{"id":"pg_a4gkqthxdgur","property_id":"prp_pklgwresh6hp","domain_id":"dom_zrkwapcbulfb","root_domain":"vercel.com","locale":"en","url":"https://vercel.com/docs/frameworks/full-stack/nuxt","url_hash":"7a287629c1ce3df72cef352b50aca2da617fc5ce4fc90593b99f6d451e41ddab","path":"/docs/frameworks/full-stack/nuxt","depth":1,"canonical_url":"https://vercel.com/docs/frameworks/full-stack/nuxt","canonical_page_id":null,"page_type":"docs","page_type_guess":"docs","state":"indexed","skip_reason":"budget","priority":"1.4","discovered_via":"sitemap","first_seen_at":"2026-08-27T09:05:09.822Z","last_seen_at":"2026-09-26T09:10:02.787Z","http_status":200,"content_hash":"a98d75e9077289fa0a5df8e64cfb002b841e3f2195663537467e941c1955ee17","title":"Nuxt on Vercel","description":"Deploy Nuxt applications to Vercel and configure rendering, functions, middleware, routing, image optimization, and caching.","author":"Vercel","published_at":null,"modified_at":"2026-08-26T18:10:00.000Z","word_count":1617,"reading_time_sec":441,"lang_detected":"en","images":[],"links_out":null,"markdown_source":"readability","refresh_interval":"monthly","last_fetched_at":"2026-09-26T09:09:42.109Z","next_refresh_at":"2026-10-26T09:09:42.109Z","runs_count":1,"changes_count":0,"last_changed_at":null,"fail_count":0,"last_error":null,"created_at":"2026-08-27T09:05:09.822Z","updated_at":"2026-08-27T09:05:09.822Z","inlinks":28,"inlinks_body":8,"outlinks":190,"outlinks_external":16,"anchor_terms":["NextNuxt","Nuxt"],"template_score":"0.93333333333333333333","cash":"0.0114915422511915448","cash_total":"0.65071325962454354040","pagerank":"0.0336226975825662","is_orphan":false,"link_confirmed":true,"discovered_wave":0,"embedded_hash":null,"embedded_at":null,"domain_name":"Vercel Inc.","brand_color":null,"domain_rank":579,"spam_score":14,"markdown":"Nuxt is an open-source framework that streamlines the process of creating modern Vue apps. It offers server-side rendering, SEO features, automatic code splitting, prerendering, and more out of the box. It also has [an extensive catalog of community-built modules](https://nuxt.com/modules), which allow you to integrate popular tools with your projects.\n\nYou can deploy Nuxt static and server-side rendered sites on Vercel with no configuration required.\n\nTo get started with Nuxt on Vercel:\n\n- If you already have a project with Nuxt, install [Vercel CLI](https://vercel.com/docs/cli) and run the `vercel` command from your project's root directory\n- Clone one of our Nuxt example repos to your favorite git provider and deploy it on Vercel with the button below:\n\nVercel deployments can [integrate with your git provider](https://vercel.com/docs/git) to [generate preview URLs](https://vercel.com/docs/deployments/environments#preview-environment-pre-production) for each pull request you make to your Nuxt project.\n\nThe following table outlines the differences between `nuxt build` and `nuxt generate` on Vercel:\n\nFeature\n\n`nuxt build`\n\n`nuxt generate`\n\nDefault build command\n\nYes\n\nNo\n\nSupports all Vercel features out of the box\n\nYes\n\nYes\n\n[Supports SSR](#server-side-rendering-ssr)\n\nYes\n\nNo\n\n[Supports SSG](#static-rendering)\n\nYes, [with nuxt config](#static-rendering)\n\nYes\n\n[Supports ISR](#incremental-static-regeneration-isr)\n\nYes\n\nNo\n\nIn general, `nuxt build` is likely best for most use cases. Consider using `nuxt generate` to build [fully static sites](#static-rendering).\n\nYou can configure your Nuxt deployment by creating a Nuxt config file in your project's root directory. It can be a TypeScript, JavaScript, or MJS file, but [the Nuxt team recommends using TypeScript](https://nuxt.com/docs/getting-started/configuration#nuxt-configuration). Using TypeScript will allow your editor to suggest the correct names for configuration options, which can help mitigate typos.\n\nYour Nuxt config file should default export `defineNuxtConfig` by default, which you can add an options object to.\n\nThe following is an example of a Nuxt config file with no options defined:\n\n[See the Nuxt Configuration Reference docs for a list of available options](https://nuxt.com/docs/api/configuration/nuxt-config/#nuxt-configuration-reference).\n\nWith the `routeRules` config option, you can:\n\n- Create redirects\n- Modify a route's response headers\n- Enable ISR\n- Deploy specific routes statically\n- Deploy specific routes with SSR\n- and more\n\nAt the moment, there is no way to configure route deployment options within your page components, but development of this feature is in progress.\n\nThe following is an example of a Nuxt config that:\n\n- Creates a redirect\n- Modifies a route's response headers\n- Opts a set of routes into client-side rendering\n\nTo learn more about `routeRules`:\n\n[Vercel Functions](https://vercel.com/docs/functions) enable developers to write functions that use resources that scale up and down based on traffic demands. This prevents them from failing during peak hours, but keeps them from running up high costs during periods of low activity.\n\nNuxt deploys routes defined in `/server/api`, `/server/routes`, and `/server/middleware` as one server-rendered Function by default. Nuxt Pages, APIs, and Middleware routes get bundled into a single Vercel Function.\n\nThe following is an example of a basic API Route in Nuxt:\n\nYou can test your API Routes with `nuxt dev`.\n\nYou can read and write server files with Nuxt on Vercel. One way to do this is by using Nitro with Vercel Functions and a Redis driver such as the [Upstash Redis driver](https://unstorage.unjs.io/drivers/upstash). Use Nitro's [server assets](https://nitro.unjs.io/guide/assets#server-assets) to include files in your project deployment. Assets within `server/assets` get included by default.\n\nTo access server assets, you can use Nitro's [storage API](https://nitro.unjs.io/guide/storage):\n\nTo write files, mount [Redis storage](https://nitro.unjs.io/guide/storage) with a Redis driver such as the [Upstash Redis driver](https://unstorage.unjs.io/drivers/upstash).\n\nFirst, [install Upstash Redis from the Vercel Marketplace](https://vercel.com/marketplace/upstash) to get your Redis credentials.\n\nThen update your `nuxt.config.ts` file:\n\nUse with the storage API.\n\n[See an example code repository](https://github.com/pi0/nuxt-server-assets/tree/main).\n\nMiddleware is code that executes before a request gets processed. Because Middleware runs before the cache, it's an effective way of providing personalization to statically generated content.\n\nNuxt has two forms of Middleware:\n\n- [Server middleware](#nuxt-server-middleware-on-vercel)\n- [Route middleware](#nuxt-route-middleware-on-vercel)\n\nIn Nuxt, modules defined in `/server/middleware` will get deployed as [server middleware](https://nuxt.com/docs/guide/directory-structure/server#server-middleware). Server middleware should not have a return statement or send a response to the request.\n\nServer middleware is best used to read data from or add data to a request's `context`. Doing so allows you to handle authentication or check a request's params, headers, url, [and more](https://www.w3schools.com/nodejs/obj_http_incomingmessage.asp).\n\nThe following example demonstrates Middleware that:\n\n- Checks for a cookie\n- Tries to fetch user data from a database based on the request\n- Adds the user's data and the cookie data to the request's context\n\nYou could then access that data in a page on the frontend with the [`useRequestEvent`](https://nuxt.com/docs/api/composables/use-request-event) hook. This hook is only available in routes deployed with SSR. If your page renders in the browser, `useRequestEvent` will return `undefined`.\n\nThe following example demonstrates a page fetching data with `useRequestEvent`:\n\nNuxt's route middleware runs before navigating to a particular route. While server middleware runs in Nuxt's [Nitro engine](https://nitro.unjs.io/), route middleware runs in Vue.\n\nRoute middleware is best used when you want to do things that server middleware can't, such as redirecting users, or preventing them from navigating to a route.\n\nThe following example demonstrates route middleware that redirects users to a secret route:\n\nBy default, route middleware code will only run on pages that specify them. To do so, within the `