Nuxt is a free and open source full-stack web framework based on Vue.js, Nitro, and Vite. Nuxt is inspired by Next.js, which is a similar framework based on React rather than the Vue JavaScript library.
The main advantage of Nuxt over using Vue alone is its universal rendering system. The framework works as both an in-browser single-page application (SPA) as well as a server-rendered static website, by "hydrating" a server-rendered page to a full SPA after it is loaded. This allows websites to have the search engine optimization and performance benefits of a server-rendered site in addition to the interactivity of a client-rendered application. Nuxt largely abstracts the server-rendering features from the developer, and it's therefore able to have a similar development experience to a traditional SPA using Vue's single-file component (SFC) system.
In addition to its universal rendering mechanism, Nuxt also provides many other benefits and quality-of-life features, such as path-based routing, hot module replacement (HMR), TypeScript support out of the box, and middleware and server logic.
Rather than a regular Vue.js application, which ordinarily requires every route to be manually registered, Nuxt uses path-based routing to automatically register every route in an application.
Pages are declared in the <code>pages/</code> folder, where the name of the page file becomes the name of the route. Dynamic parameters can be added using square brackets, and catch-all routes can be added using three dots and square brackets, much like JavaScript's array spread syntax.
Nuxt automatically imports most Vue composition API functions, and any helper functions from the <code>composables/</code> and <code>utils/</code> folders.
Nuxt supports SSR-friendly layouts out of the box, which allows similar pages to use the same basic templates, such as a header and footer. Layouts are declared in the <code>layouts/</code> folder, and work using native Vue slots.
To enable layouts in a Nuxt project, the entry point of the application, <code>app.vue</code>, must include a <code>NuxtLayout</code> component to toggle between layouts for each page.The default layout is located at <code>layouts/default.vue</code>, and must include a slot for the page content.A page can use a custom layout by using the <code>definePageMeta</code> helper in a setup function or block.
Nuxt adds middleware support to applications, which enables server logic to run between navigation changes. Both global and page-specific middleware files are supported.
Middleware is declared in the <code>middleware/</code> folder, which exports a function that takes in the current and previous routes as parameters. From there, globally-available helpers like and can be used to control navigation.
Nuxt can also generate server API routes and handlers, using the <code>server/</code> folder. Any file placed in <code>server/api</code> will become an API route, and any file placed in <code>server/routes</code> will become a route file, the difference being the final file location (<code>server/api</code> adds an api prefix to the path).This can now be called from components using the <code>useFetch</code> composable.