Menu
Home Explore People Places Arts History Plants & Animals Science Life & Culture Technology
On this page
Nuxt
Open source web framework on Vue.js, Node, and webpack

Nuxt is a free and open source JavaScript library based on Vue.js, Nitro, and Vite. Nuxt is inspired by Next.js, which is a similar framework based on React rather than Vue.

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's loaded. This allows websites to have the SEO 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 flagship 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.

We don't have any images related to Nuxt yet.
We don't have any YouTube videos related to Nuxt yet.
We don't have any PDF documents related to Nuxt yet.
We don't have any Books related to Nuxt yet.
We don't have any archived web articles related to Nuxt yet.

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.6

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

  • /pages/about.vue - Matches /about.
  • /pages/user/[id].vue - Matches all routes directly under /user.
  • /pages/posts/[...slug].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 composition API functions, and any helper functions from the composables/ and utils/ folders.8

<script setup> // ref is automatically imported const count = ref(0); // useRoute is also automatically imported const route = useRoute(); </script> <template> <span>{{ count }}</span> </template>

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.9

<!-- sample app.vue file content --> <template> <NuxtLayout> <NuxtPage /> </NuxtLayout> </template>

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

<!-- sample layout file content --> <template> <CustomNavbar /> <slot /> <CustomFooter /> </template>

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

<script setup> definePageMeta({ layout: "custom", }); </script> <template> <!-- this will now fill the slot of the custom layout --> </template>

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.11

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 abortNavigation and navigateTo can be used to control navigation.1213

export default defineNuxtMiddleware((to, from) => { // navigation logic if (to.params.id === "0") return abortNavigation(); return navigateTo(`/users/${to.params.id}`); });

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 adds an api prefix to the path).14

// server/api/hello.ts export default defineEventHandler((event) => { return { some: "data here", }; });

This can now be called from components using the useFetch composable.

<script setup> const { data } = await useFetch('/api/hello') </script> <template> <pre>{{ data }}</pre> </template>

See also

References

  1. "Nuxt First Public Release". Npm. Retrieved March 23, 2017. https://www.npmjs.com/package/nuxt/v/0.0.1 ↩

  2. Omole, Olayinka (March 18, 2019). "Nuxt: A Universal Vue.js Application Framework". Sitepoint. Retrieved June 18, 2020. https://www.sitepoint.com/nuxt-js-universal-vue-js/ ↩

  3. Berning, Dave (2018-04-16). "Getting Started with Server-Side Rendering Using Nuxt". Alligator.io. Retrieved 2018-07-02. https://alligator.io/vuejs/server-side-rendering-with-nuxtjs/ ↩

  4. "Vue.js Development · Nuxt Concepts". Nuxt. Retrieved 2025-02-09. https://nuxt.com/docs/guide/concepts/vuejs-development#single-file-components ↩

  5. "Introduction · Get Started with Nuxt". Nuxt. Retrieved 2025-02-09. https://nuxt.com/docs/getting-started/introduction ↩

  6. "Routing · Get Started with Nuxt". Nuxt. Retrieved 2025-03-06. https://nuxt.com/docs/getting-started/routing ↩

  7. "pages/ · Nuxt Directory Structure". Nuxt. Archived from the original on 2023-08-19. Retrieved 2025-03-06. http://web.archive.org/web/20230819053825/https://nuxt.com/docs/guide/directory-structure/pages ↩

  8. "Auto-imports · Nuxt Concepts". Nuxt. Retrieved 2025-03-06. https://nuxt.com/docs/guide/concepts/auto-imports ↩

  9. "Views · Get Started with Nuxt". Nuxt. Retrieved 2025-03-06. https://nuxt.com/docs/getting-started/views#layouts ↩

  10. "layouts/ · Nuxt Directory Structure". Nuxt. Retrieved 2025-03-06. https://nuxt.com/docs/guide/directory-structure/layouts ↩

  11. "middleware/ · Nuxt Directory Structure". Nuxt. Retrieved 2025-03-06. https://nuxt.com/docs/guide/directory-structure/middleware ↩

  12. "abortNavigation · Nuxt Utils". Nuxt. Retrieved 2025-03-06. https://nuxt.com/docs/api/utils/abort-navigation ↩

  13. "navigateTo · Nuxt Utils". Nuxt. Retrieved 2025-03-06. https://nuxt.com/docs/api/utils/navigate-to ↩

  14. "server/ · Nuxt Directory Structure". Nuxt. Retrieved 2025-03-06. https://nuxt.com/docs/guide/directory-structure/server ↩