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 dir property

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

generate: {
  dir: 'my-site'
}

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.

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.

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.

generate: {
  exclude: [/admin/]
}