deployment

28 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Nuxt has no vendor lock-in for deployment

Nuxt applications can be deployed anywhere, including on the edge, without vendor lock-in.

Nitro supports 15+ deployment presets

Nitro offers more than 15 presets to build Nuxt apps for different cloud providers and servers. Supported platforms include Cloudflare Workers, Netlify Functions, and Vercel Cloud. Additional runtimes supported include Deno and Bun.

Nitro startup performance

Nitro enables deployment anywhere from bare metal servers to edge networks with a startup time of just a few milliseconds.

nuxt generate command for prerendering

Run `npx nuxt generate` to build and pre-render your application using the Nitro crawler. This is similar to `nuxt build` with the `nitro.static` option set to `true`, or running `nuxt build --prerender`. The command will build your site, start a Nuxt instance, and by default prerender the root page `/` along with any pages it links to, recursively following all anchor tags until no new links are found.

Deploy prerendered site from .output/public directory

After running `nuxt generate`, deploy the `.output/public` directory to any static hosting service. You can also preview it locally with `npx serve .output/public`.

How Nitro crawler works for prerendering

The Nitro crawler follows this process: 1. Load the HTML of your application's root route (`/`), any non-dynamic pages in your `~/pages` directory, and any routes in the `nitro.prerender.routes` array. 2. Save the HTML and `_payload.json` to the `~/.output/public/` directory to be served statically. 3. Find all anchor tags (`<a href="...">`) in the HTML to navigate to other routes. 4. Repeat steps 1-3 for each anchor tag found until there are no more anchor tags to crawl. Pages that are not linked to a discoverable page cannot be pre-rendered automatically.

SPA fallback files in prerender output

Static and prerender builds emit `200.html` and `404.html` SPA fallback files in the `.output/public` directory.

Payload extraction in prerendered pages

When Nuxt renders a page on the server, it serializes the results of `useAsyncData`, `useFetch` data fetching, and `useState` app state into a payload for client hydration. With payload extraction enabled, Nuxt writes this payload to a `_payload.json` file alongside the route's HTML. Prerendered routes generate their payload file at build time. Routes using ISR or SWR caching generate their payload file when the route is first rendered.

Client-side navigation with prerendered payloads

During client-side navigation, Nuxt fetches the `_payload.json` file for the destination route and reuses the extracted data instead of running data fetching again in the browser. On fully static sites, client-side navigation reuses data captured at build time, so data can be stale until the next rebuild. For ISR/SWR routes, CDNs can cache payload files alongside HTML to improve performance for cached routes.

Payload serialization with devalue

Payloads are serialized with devalue, so custom types such as class instances need payload plugins with custom reducers and revivers to survive the round trip.

prerenderRoutes utility to add routes at runtime

Use `prerenderRoutes()` at runtime within a Nuxt context to add more routes for Nitro to prerender. It accepts a string for a single route or an array of strings. Example: `prerenderRoutes(['/some/other/url'])` or `prerenderRoutes('/api/content/article/my-article')`

prerender:routes Nuxt hook

The `prerender:routes` hook is called before prerendering starts and allows registering additional routes. It receives a context object with a `routes` property (a Set) where you can add routes. Example: `export default defineNuxtConfig({ hooks: { async 'prerender:routes' (ctx) { const { pages } = await fetch('https://api.some-cms.com/pages').then(res => res.json()); for (const page of pages) { ctx.routes.add(`/${page.name}`) } } } })`

prerender:generate Nitro hook for fine-grained route handling

The `prerender:generate` Nitro hook is called for each route during prerendering, allowing fine-grained handling of individual routes. Set `route.skip = true` to skip prerendering a specific route. Example: `export default defineNuxtConfig({ nitro: { hooks: { 'prerender:generate' (route) { if (route.route?.includes('private')) { route.skip = true } } } } })`

Set Nitro preset with NITRO_PRESET environment variable

Set the deployment preset when running nuxt build using the NITRO_PRESET environment variable: NITRO_PRESET=node-server nuxt build

Cloudflare CDN settings to disable for Nuxt

Disable the following Cloudflare options to prevent Nuxt hydration errors: Speed > Settings > Content Optimization > disable 'Rocket Loader™' and Security > Settings > disable 'Email Address Obfuscation'. These options can otherwise cause unnecessary re-rendering or hydration errors in production.

Node.js server entry point command

When running `nuxt build` with the Node server preset, launch the production server with: `NODE_ENV=production node .output/server/index.mjs`. This starts a ready-to-run Node server that listens on port 3000 by default.

NODE_ENV=production is required for Node server

When running the Node server, always set NODE_ENV=production. Without it, some dependencies like Vue Router only strip development-only warnings when this environment variable is set, which can flood logs with messages like '[Vue Router warn]: No match found for location with path …' on unmatched routes.

Node server runtime environment variables

The Nitro Node server respects these runtime environment variables: NITRO_PORT or PORT (defaults to 3000), NITRO_HOST or HOST (defaults to '0.0.0.0'), and NITRO_SSL_CERT and NITRO_SSL_KEY (if both present, launches server in HTTPS mode, though this should rarely be used outside testing and the server should run behind a reverse proxy).

PM2 ecosystem.config.cjs example for Nuxt

Example PM2 configuration for hosting Nuxt: module.exports = { apps: [{ name: 'NuxtAppName', port: '3000', exec_mode: 'cluster', instances: 'max', script: './.output/server/index.mjs', env: { NODE_ENV: 'production' } }] }

Cluster mode with NITRO_PRESET=node_cluster

Use NITRO_PRESET=node_cluster to leverage multi-process performance using Node.js cluster module. By default, workload is distributed to workers using round robin strategy.

Static site generation with ssr: true

Static site generation (SSG) with ssr: true pre-renders routes at build time (default behavior of `nuxt generate`). It generates /200.html and /404.html single-page app fallback pages that can render dynamic routes or 404 errors on the client, though the static host must be configured accordingly.

Static single-page app with ssr: false

Prerender your site with ssr: false (static single-page app) to produce HTML pages with an empty <div id="__nuxt"></div>. This will lose many SEO benefits of prerendering, so it is suggested to use <ClientOnly> to wrap portions that cannot be server rendered instead.

Payload extraction in prerendered routes

Prerendered routes emit _payload.json files with data captured at build time. Nuxt reuses this payload during client-side navigation.

Static fallback pages 200.html and 404.html

Nuxt generates two fallback pages for static hosts: 200.html is the single-page app fallback to serve for unmatched routes when client-side routing should handle the URL, and 404.html is the not-found fallback to serve for routes that should keep a 404 status.

Explicitly add fallback page to routeRules

If using `nuxt build` with route rules to prerender selected routes (rather than `nuxt generate`), explicitly add the fallback page to routeRules: { '/200.html': { prerender: true } }

Server-render error page into 404.html

By default, 200.html and 404.html fallback pages are empty shells. Set experimental.prerenderErrorPages to server-render error.vue into 404.html at build time.

Client-side only rendering with ssr: false

To use static hosting without pre-rendering routes, set ssr: false in nuxt.config. The `nuxt generate` command will output .output/public/index.html entrypoint and JavaScript bundles like a classic client-side Vue.js application.

Set Nitro preset in nuxt.config.ts

Explicitly set the deployment preset in nuxt.config.ts using: export default defineNuxtConfig({ nitro: { preset: 'node-server' } })

Give your agent this brain