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.

Nuxt 3 beta on Netlify

Nuxt 3 beta is released and ready for you to try out on Netlify!

Nuxt 3 introduces new rendering options, such as server-side rendering (SSR). Since it’s currently in beta, we recommend following the Nuxt team’s advice on not using Nuxt 3 in production yet.

For more information, check out the Nuxt 3 Getting Started Guide and Deploy Nuxt 3 to Netlify doc.

# 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 2: nuxt generate and dist
  • Nuxt 3 (beta): nuxt build and dist

If you’re using the CLI to run Netlify Dev for a local development environment, the CLI should work automatically assuming you are using the 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 2 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