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/imagemodule allows you to automatically optimize images for your site.
- Git-based Headless CMS. The
nuxt/contentmodule 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.
If you decide to use Nuxt 3 and pnpm, you’ll need a
PNPM_FLAGS environment variable.
# 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 3 (beta):
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:
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-appto generate a new Nuxt project, make these selections:
- Rendering mode:
Universal (SSR / SSG)(the default)
- Deployment target:
Static (Static/JAMstack hosting)
- Rendering mode:
- If you have an existing Nuxt project, the project’s
nuxt.config.jsfile must contain
For single-page applications with client side rendering, refer to the Nuxt documentation for configuration information.
# pnpm support
If you’re planning to use pnpm with Nuxt 3, you must set a
PNPM_FLAGS environment variable with a value of
--shamefully-hoist. This appends an argument to the
pnpm install command that Netlify runs. Learn more about using pnpm on Netlify.
# Edge Functions
This feature is in
Edge Functions connect the Netlify platform and workflow with an open runtime standard at the network edge. This enables you to build fast, personalized web experiences with an ecosystem of development tools.
Full support for Nuxt server-side rendering (SSR), including a template that will help you get started, is coming soon.
# More resources
Did you find this doc useful?
Your feedback helps us improve our docs.