Nuxt


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 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 system.
In addition to its flagship universal rendering mechanism, Nuxt also provides many other benefits and quality-of-life features, such as path-based routing, hot module replacement, TypeScript support out of the box, and middleware and server logic.

Features

Path-based routing

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 pages/ 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.
  • /pages/about.vue - Matches /about.
  • /pages/user/.vue - Matches all routes directly under /user.
  • /pages/posts/.vue - Matches all routes under /posts.
  • /pages/admin/page.vue - Matches /admin in addition to all routes directly under it.

    Automatic imports

Nuxt automatically imports most Vue functions, and any helper functions from the composables/ and utils/ folders.


Layouts

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 layouts/ folder, and work using native Vue slots.
To enable layouts in a Nuxt project, the entry point of the application, app.vue, must include a NuxtLayout component to toggle between layouts for each page.

The default layout is located at layouts/default.vue, and must include a slot for the page content.

A page can use a custom layout by using the definePageMeta helper in a setup function or block.

Middleware

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 middleware/ 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.

export default defineNuxtMiddleware;

Server API

Nuxt can also generate server API routes and handlers, using the server/ folder. Any file placed in server/api will become an API route, and any file placed in server/routes will become a route file, the difference being the final file location.
// server/api/hello.ts
export default defineEventHandler;
This can now be called from components using the useFetch composable.