Dist directory

The dist folder, short for distribution folder, is dynamically generated when using the nuxt generate commands and includes the generated production ready HTML files and assets that are necessary to deploy and run your statically generated Nuxt application.

Deploying

This is the folder you need to upload for static hosting as it contains your generated production ready HTML files and assets

The dist directory should not be committed to your version control system and should be ignored through your .gitignore as it will be generated automatically every time you run nuxt generate.

The dir property

The dist folder is named dist by default but can be configured in your nuxt.config file.

nuxt.config.js

generate: {
  dir: 'my-site'
}

If you do change your dist folder then you will need to add that to your version control so that git will ignore it.

The subFolders Property

Nuxt puts all your generated pages inside a folder by default, however you can change this if you want by modifying the nuxt.config and changing the subFolders to be false.

nuxt.config.js

generate: {
  subFolders: false
}

The fallback Property

When deploying your site you will need to make sure the fallback HTML path is set correctly. It should be set as the error page so that unknown routes are rendered via Nuxt. If it is unset Nuxt will use the default value which is 200.html.

When running a single page application it makes more sense to use 200.html as it is the only file necessary as no other routes are generated.

When working with statically generated pages it is recommended to use a 404.html for error pages.

Depending on where you are hosting your site, you may have to use 200.html or 404.html. Please check with your hosting provider. Netlify, for example uses 404.html.

nuxt.config.js

export default {
  generate: {
    fallback: '404.html'
  }
}

The excludes property

You can exclude pages from being generated by using the generate excludes property. Instead of being generated as a static page it will fallback to be a single page application page and will only be rendered on the client side.

nuxt.config.js