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-app
Need to install the following packages:
  [email protected]
Ok to proceed? (y) y
Nuxi 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 init
Initialized empty Git repository in /home/thomasbnt/lab/my-app/.git/
thomasbnt@thomasbnt:~/lab/my-app$ gc .
On branch main

Initial commit
thomasbnt@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.lock
thomasbnt@thomasbnt:~/lab/my-app$ git branch -M main
thomasbnt@thomasbnt:~/lab/my-app$ git remote add origin [email protected]:thomasbnt/nuxt-netlify-example.git
thomasbnt@thomasbnt:~/lab/my-app$ git push -u origin main
Enumerating objects: 13, done.
Counting objects: 100% (13/13), done.
Delta compression using up to 12 threads
Compressing 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 0
To github.com:thomasbnt/nuxt-netlify-example.git
 * [new branch]      main -> main
Branch '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