Deploy Nuxt on Netlify

How to deploy Nuxt on Netlify?

Deploying to Netlify is a low friction option for getting a statically generated Nuxt site online quickly.

The core of the process leverages the nuxt generate(<= v2.12) command during deployment to build a static version of your Nuxt app into a dist directory. The contents of this directory are then deployed to a production URL.

Getting Started

Press the "New site from Git" button on the Netlify dashboard. Authenticate with your repository host, select a repository to deploy, and continue. You should land on step 3: "Build options, and deploy!"

Configure:

For a statically generated site

Make sure you have target: 'static'in your nuxt.config.

1. Branch to deploy: main, or which-ever branch you prefer
2. Build command: npm run generate
3. Publish directory: dist

For client side rendering only

Make sure you have target: 'static' and ssr: falsein your nuxt.config.

1. Branch to deploy: main, or which-ever branch you prefer
2. Build command: npm run generate
3. Publish directory: dist

For client side rendering there is a problem with refresh as by default on Netlify the site redirects to "404 not found". For any pages that are not generated they will fallback to SPA mode and then if you refresh or share that link you will get Netlify's 404 page. This is because the pages that are not generated don't actually exist as they are actually a single page application so if you refresh this page you will get a 404 because the url for that page doesn't actually exist. By redirecting to the 404.html Nuxt will reload your page correctly in SPA fallback.

The easiest way to fix this is by adding a generate property in your nuxt.config and setting fallback: true. Then it will fallback to the generated 404.html when in SPA mode instead of Netlify's 404 page.

export default {
  generate: {
    fallback: true
  }
}

If however you want to automatically apply headers and redirects of the application then there is a module for that, this is especially useful for when you have custom headers/redirects (in a _headers or _redirects file):

netlify-files-module

For more information on Netlify redirects see the Netlify docs .

For simple reference on Netlify redirects read blog post by Divya Sasidharan

Optionally, you can add additional ENV variables via the "Advanced" button. These can be helpful for swapping in alternative API credentials and so on. Netlify also provides a default ENV variables which can be read by your Nuxt application at build time.

Click "Deploy site" to immediately trigger a deploy. Your Netlify site will be assigned a random URL and deployed using the nuxt generate command.

Voilà! Your Nuxt application is now hosted on Netlify!