Create your nuxt website with Netlify

Oh hello here !

In this post, we go to create a simple Nuxt website with Netlify, and how to configure the application to have a better renderer.

The difference between this post and an other tutorial how to deploy your Nuxt website on Netlify ? The Configurations with the beautiful netlify.toml

Explain what is...

Nuxt

Nuxt is an open source framework based on Vue.js, a progressive JavaScript framework for creating user interfaces. Some good features such as server-side rendering (SSR), static site generator, advanced route management and global state management are here.

Netlify

We got a framework, we have to make sure that we build it and deploy it in order to publish it on the Internet.
Netlify is here for that, we can deploy with some fairly simple settings our JS application.

Start to create the Nuxt project !

Be sure to have Node.js and also NPM installed on your client.

We can create the Nuxt application with :

npx nuxi@latest init my-app

Terminal output:

thomasbnt@thomasbnt:~/lab$ npx nuxi@latest init my-appNeed to install the following packages:  [email protected] to proceed? (y) yNuxi 3.4.2   Nuxt project is created with v3 template. Next steps:                                                                   8:46:21 PM  cd my-app      Install dependencies with npm install or yarn install or pnpm install                                                PM  Start development server with npm run dev or yarn dev or pnpm run dev

Don't hesitate to run npm install/yarn in your folder project.
Open that on your code software.

netlify.toml file

One of the power of Netlify are configs files. With that, you can deploy your website without interact with the dashboard of Netlify (only one time for the installation)

In the netlify.toml, we can add some lines for configuration deployment and plugins.

File-based configuration settings take precedence

Be aware that if you have conflicting configuration values, settings specified in netlify.toml override any corresponding settings in the Netlify UI.

For this project, there is the netlify.toml :

# The build part for Netlify with a Nuxt project[build]    base='/'    publish='dist'    command='nuxt generate'    environment = { NODE_VERSION = "18.0.0" }# We can put redirects [[redirects]]    from = "/devto"    to = "https://dev.to/thomasbnt"    status = 301# Also put headers[[headers]]    for = "/*"    [headers.values]        X-Frame-Options = "DENY"        X-XSS-Protection = "1; mode=block"        X-Content-Type-Options = "nosniff"        cache-control = "public, max-age=10000, must-revalidate"

Create your repository

Netlify uses Git (commits nor pull requests) to trigger new incoming modification on your project.

Create your repository, private or public it's works.
And time to push your local work on GitHub :

thomasbnt@thomasbnt:~/lab/my-app$ git initInitialized empty Git repository in /home/thomasbnt/lab/my-app/.git/thomasbnt@thomasbnt:~/lab/my-app$ gc .On branch mainInitial committhomasbnt@thomasbnt:~/lab/my-app$ ga .thomasbnt@thomasbnt:~/lab/my-app$ gc "Init"[main (root-commit) a3b9cff] Init 10 files changed, 4392 insertions(+) create mode 100644 .gitignore create mode 100644 .npmrc create mode 100644 README.md create mode 100644 app.vue create mode 100644 netlify.toml create mode 100644 nuxt.config.ts create mode 100644 package.json create mode 100644 public/favicon.ico create mode 100644 tsconfig.json create mode 100644 yarn.lockthomasbnt@thomasbnt:~/lab/my-app$ git branch -M mainthomasbnt@thomasbnt:~/lab/my-app$ git remote add origin [email protected]:thomasbnt/nuxt-netlify-example.gitthomasbnt@thomasbnt:~/lab/my-app$ git push -u origin mainEnumerating objects: 13, done.Counting objects: 100% (13/13), done.Delta compression using up to 12 threadsCompressing objects: 100% (12/12), done.Writing objects: 100% (13/13), 82.32 KiB | 11.76 MiB/s, done.Total 13 (delta 0), reused 0 (delta 0), pack-reused 0To github.com:thomasbnt/nuxt-netlify-example.git * [new branch]      main -> mainBranch 'main' set up to track remote branch 'main' from 'origin'.

Time to deploy on Netlify

1. Go to Netlify, and create an account, it's free.
2. Import your git project into netlify from Import an existing project
3. Choice GitHub and grant the integration
4. Choice the repository with your Nuxt website

Pick the Nuxt website on Netlify from the import an existing project from a Git repository

1. Fill in all fields, by default Netlify detects that it's Nuxt so it will put values for you.

1. PUSH to the Deploy site button!

Here we gooo! You can see your website is building, wait one or two minutes, and you've got your website published! Magic!

Share us your website, and your best configurations file in comments

Documentations

• Nuxt on Netlify
• Nitro and Netlify provider
• File-based configuration aka netlify.toml