How to deploy on Netlify?

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

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

Watch a free lesson on How to deploy Nuxt.js to Netlify on Vue School

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

• Branch to deploy: master, or which-ever branch you prefer
• Build command: npm run generate
• Publish directory: dist

For site generated in SPA mode

• Branch to deploy: master, or which-ever branch you prefer
• Build command: npm run build
• Publish directory: dist For a single page app 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 refesh 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 SPA 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.js 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.js application is now hosted on Netlify!