DEV Community

Cover image for Create your nuxt website with Netlify ✨
Thomas Bnt
Thomas Bnt

Posted on • Updated on

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 ✨

This post is available in French language β†’

Explain what is...


Nuxt home website

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 home website

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
Enter fullscreen mode Exit fullscreen mode

Terminal output:

thomasbnt@thomasbnt:~/lab$ npx nuxi@latest init my-app
Need to install the following packages:
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
Enter fullscreen mode Exit fullscreen mode

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

My VSCode opened with the Nuxt project

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
    command='nuxt generate'
    environment = { NODE_VERSION = "18.0.0" }

# We can put redirects 
    from = "/devto"
    to = ""
    status = 301

# Also put headers
    for = "/*"

        X-Frame-Options = "DENY"
        X-XSS-Protection = "1; mode=block"
        X-Content-Type-Options = "nosniff"
        cache-control = "public, max-age=10000, must-revalidate"
Enter fullscreen mode Exit fullscreen mode

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
 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
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
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.
Enter fullscreen mode Exit fullscreen mode

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
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.

The latest step before deploy the website : check if all field for the project are not empty

  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! πŸ§™πŸΌβ€β™‚οΈ

The dashboard of Netlify with the overview of the Nuxt website, just deployed

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


β˜• Check my Twitter account. You can see many projects and updates. You can also support me on Buy Me a Coffee, Stripe or GitHub Sponsors. Thanks for read my post ! 🀩

Top comments (0)