Create your nuxt v3 website with Netlify ✨
Tags: netlify, nuxt, webdev, javascript
Published: 2023-04-26 16:12:36

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` ✨

{% cta https://thomasbnt.dev/blog/creer-un-site-web-avec-nuxt-et-netlify %} This post is available in French language → {% endcta %}

## Explain what is...

### Nuxt 

[![Nuxt home website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/slgzcswknwd3tdgftrwa.png)](https://nuxt.com)

**[Nuxt](https://nuxt.com) 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

[![Netlify home website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bsh2r3uy25a5chutt452.png)](https://netlify.com)

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**](https://netlify.com) is here for that, we can deploy with some fairly simple settings our JS application. 

## Start to create the Nuxt v3 project !

Be sure to have [Node.js](https://nodejs.org/) and also NPM installed on your client.

We can create the Nuxt application with :

```bash
npx nuxi@latest init my-app
```

_Terminal output:_

```bash
thomasbnt@thomasbnt:~/lab$ npx nuxi@latest init my-app
Need to install the following packages:
  nuxi@3.4.2
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.

![My VSCode opened with the Nuxt project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vuqlkebi5s8977pjmin1.png)

## `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`](https://docs.netlify.com/configure-builds/file-based-configuration/), 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` : 

```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 : 

```bash
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 git@github.com: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](https://app.netlify.com/signup), **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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31xokgiyhnoyigwb0erp.png)
*Pick the Nuxt website on Netlify from the import an existing project from a Git repository*

5. 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzf28w7fjwkudxnqk6yk.png)

6. 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/atgc1ysj0t6mq6084z9r.png)

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


## Documentations

- [Nuxt on Netlify](https://docs.netlify.com/integrations/frameworks/nuxt/)
- [Nitro and Netlify provider](https://nitro.unjs.io/deploy/providers/netlify)
- [File-based configuration aka `netlify.toml`](https://docs.netlify.com/configure-builds/file-based-configuration/)

___

|☕|Check my [Twitter account](https://twitter.com/thomasbnt_). You can see many projects and updates. You can also [support me on Buy Me a Coffee, Stripe or GitHub Sponsors](https://thomasbnt.dev/donate). Thanks for read my post ! 🤩|
|---|---|