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.
# 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:
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-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.
# More resources
Did you find this doc useful?
Your feedback helps us improve our docs.