| Nuxt | |
|---|---|
.svg) | |
| Original authors | Alexandre Chopin, Sebastien Chopin, Pooya Parsa |
| Initial release | October 26, 2016; 9 years ago (2016-10-26)[1] |
| Stable release | |
| Repository | |
| Written in | TypeScript |
| Platform | Cross-platform |
| Size | 57 KB production |
| Type | JavaScript library |
| License | MIT License[3] |
| Website | nuxt |
Nuxt is a free andopen sourceJavaScript library based onVue.js, Nitro, andVite. Nuxt is inspired byNext.js,[4] which is a similarframework based onReact rather than Vue.
The main advantage of Nuxt over using Vue alone is its universal rendering system. The framework works as both an in-browsersingle-page application (SPA) as well as a server-renderedstatic website, by "hydrating" a server-rendered page to a full SPA after it is loaded. This allows websites to have thesearch engine optimization and performance benefits of a server-rendered site in addition to theinteractivity 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'ssingle-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, andmiddleware and server logic.[8]
Rather than a regularVue.js application, which ordinarily requires every route to be manually registered, Nuxt uses path-basedrouting to automatically register every route in an application.[9]
Pages are declared in thepages/ 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 likeJavaScript's array spread syntax.[10]
/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.Nuxt automatically imports most Vuecomposition API functions, and any helper functions from thecomposables/ andutils/ folders.[11]
<scriptsetup>// ref is automatically importedconstcount=ref(0);// useRoute is also automatically importedconstroute=useRoute();</script><template><span>{{count}}</span></template>
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 thelayouts/ folder, and work using native Vue slots.
To enable layouts in a Nuxt project, theentry point of the application,app.vue, must include aNuxtLayout component to toggle between layouts for each page.[12]
<!-- sample app.vue file content --><template><NuxtLayout><NuxtPage/></NuxtLayout></template>
The default layout is located atlayouts/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 thedefinePageMeta 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>
Nuxt addsmiddleware 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 themiddleware/ folder, which exports a function that takes in the current and previous routes as parameters. From there, globally-available helpers likeabortNavigation andnavigateTo can be used to control navigation.[15][16]
exportdefaultdefineNuxtMiddleware((to,from)=>{// navigation logicif(to.params.id==="0")returnabortNavigation();returnnavigateTo(`/users/${to.params.id}`);});
Nuxt can also generateserver API routes and handlers, using theserver/ folder. Any file placed inserver/api will become an API route, and any file placed inserver/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 theuseFetch composable.
<scriptsetup>const{data}=awaituseFetch('/api/hello')</script><template><pre>{{data}}</pre></template>