Nuxt on Netlify

Nuxt is an open source, modular framework for building performant sites and applications using Vue.js.

# Key features

These Nuxt features provide key benefits for sites and apps, including ones built and deployed with Netlify.

  • Improved SEO. With the ability to statically generate your site, Nuxt can help to boost search engine optimization for your content.
  • Page routing. Nuxt has a file system-based routing structure. Organizing files and subdirectories within a pages directory automatically results in corresponding routes.
  • Image optimization. The nuxt/image module allows you to automatically optimize images for your site.
  • Git-based Headless CMS. The nuxt/content module parses Markdown, JSON, YAML, XML and CSV files within your site.

# Netlify integration

Nuxt sites on Netlify can benefit from automatic framework detection and require minimal setup considerations.

# Automatic framework detection

When you link a repository for a project, Netlify tries to detect the framework your site is using. If your site is built with Nuxt, Netlify provides a suggested build command and publish directory: nuxt generate and dist. If you’re using the CLI to run Netlify Dev for a local development environment, Netlify also suggests a dev command and port: nuxt and 3000. You can override suggested values or set them in a configuration file instead, but automatic framework detection may help simplify the process of setting up a site on Netlify.

For manual configuration, check out the typical build settings for Nuxt.

# Setup considerations

When setting up a statically-generated Nuxt site for deployment on Netlify, ensure the following:

  • If you’re using create-nuxt-app to generate a new Nuxt project, make these selections:
    • Rendering mode: Universal (SSR / SSG) (the default)
    • Deployment target: Static (Static/JAMstack hosting)
  • If you have an existing Nuxt project, the project’s nuxt.config.js file must contain target: 'static'.

For single-page applications with client side rendering, refer to the Nuxt documentation for configuration information.

# More resources