Nuxt

Last updated
Nuxt
Original author(s) Alexandre Chopin, Sebastien Chopin, Pooya Parsa
Initial releaseOctober 26, 2016;8 years ago (2016-10-26) [1]
Stable release
4.0.3 [2]   OOjs UI icon edit-ltr-progressive.svg / 5 August 2025;23 days ago (5 August 2025)
Repository
Written in TypeScript
Platform Cross-platform
Size 57 KB production
Type JavaScript library
License MIT License [3]
Website nuxt.com

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

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.0.3". 5 August 2025. Retrieved 14 August 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.