Nuxt

Last updated
Nuxt
Original authors Alexandre Chopin, Sebastien Chopin, Pooya Parsa
Initial releaseOctober 26, 2016;9 years ago (2016-10-26) [1]
Stable release
4.2.2 [2]   OOjs UI icon edit-ltr-progressive.svg / 9 December 2025;27 days ago (9 December 2025)
Repository
Written in TypeScript
Platform Cross-platform
Size 57 KB production
Type full-stack web framework
License MIT License [3]
Website nuxt.com

Nuxt is a free and open source full-stack web framework based on Vue.js, Nitro, and Vite. Nuxt is inspired by Next.js, [4] which is a similar framework based on React rather than the Vue JavaScript library.

Contents

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. [5] [6] 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. [7]

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. [8]

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

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. [10]

Automatic imports

Nuxt automatically imports most Vue composition API functions, and any helper functions from the composables/ and utils/ folders. [11] 

<scriptsetup>// ref is automatically importedconstcount=ref(0);// useRoute is also automatically importedconstroute=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. [12] 

<!-- 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. [13] 

<scriptsetup>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. [14]

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. [15] [16] 

exportdefaultdefineNuxtMiddleware((to,from)=>{// navigation logicif(to.params.id==="0")returnabortNavigation();returnnavigateTo(`/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). [17] 

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

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

<scriptsetup>const{data}=awaituseFetch('/api/hello')</script><template><pre>{{data}}</pre></template>

See also

References

  1. ↑ "Nuxt First Public Release". Npm.
  2. ↑ "Release 4.2.2". 9 December 2025. Retrieved 10 December 2025.
  3. ↑ "Nuxt/LICENSE". GitHub. Retrieved 2023-12-19.
  4. ↑ "Nuxt First Public Release". Npm. Retrieved March 23, 2017.
  5. ↑ Omole, Olayinka (March 18, 2019). "Nuxt: A Universal Vue.js Application Framework". Sitepoint. Retrieved June 18, 2020.
  6. ↑ Berning, Dave (2018-04-16). "Getting Started with Server-Side Rendering Using Nuxt". Alligator.io. Retrieved 2018-07-02.
  7. ↑ "Vue.js Development · Nuxt Concepts". Nuxt. Retrieved 2025-02-09.
  8. ↑ "Introduction · Get Started with Nuxt". Nuxt. Retrieved 2025-02-09.
  9. ↑ "Routing · Get Started with Nuxt". Nuxt. Retrieved 2025-03-06.
  10. ↑ "pages/ · Nuxt Directory Structure". Nuxt. Archived from the original on 2023-08-19. Retrieved 2025-03-06.
  11. ↑ "Auto-imports · Nuxt Concepts". Nuxt. Retrieved 2025-03-06.
  12. ↑ "Views · Get Started with Nuxt". Nuxt. Retrieved 2025-03-06.
  13. ↑ "layouts/ · Nuxt Directory Structure". Nuxt. Retrieved 2025-03-06.
  14. ↑ "middleware/ · Nuxt Directory Structure". Nuxt. Retrieved 2025-03-06.
  15. ↑ "abortNavigation · Nuxt Utils". Nuxt. Retrieved 2025-03-06.
  16. ↑ "navigateTo · Nuxt Utils". Nuxt. Retrieved 2025-03-06.
  17. ↑ "server/ · Nuxt Directory Structure". Nuxt. Retrieved 2025-03-06.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.