@nuxt/docs 4.1.1 → 4.1.3

package/1.getting-started/11.state-management.md

@@ -4,17 +4,17 @@ description: Nuxt provides powerful state management libraries and the useState
 navigation.icon: i-lucide-database
 ---
 
-Nuxt provides the [`useState`](/docs/api/composables/use-state) composable to create a reactive and SSR-friendly shared state across components.
+Nuxt provides the [`useState`](/docs/4.x/api/composables/use-state) composable to create a reactive and SSR-friendly shared state across components.
 
-[`useState`](/docs/api/composables/use-state) is an SSR-friendly [`ref`](https://vuejs.org/api/reactivity-core.html#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key.
+[`useState`](/docs/4.x/api/composables/use-state) is an SSR-friendly [`ref`](https://vuejs.org/api/reactivity-core.html#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key.
 
 :video-accordion{title="Watch a video from Alexander Lichter about why and when to use useState" videoId="mv0WcBABcIk"}
 
 ::important
-Because the data inside [`useState`](/docs/api/composables/use-state) will be serialized to JSON, it is important that it does not contain anything that cannot be serialized, such as classes, functions or symbols.
+Because the data inside [`useState`](/docs/4.x/api/composables/use-state) will be serialized to JSON, it is important that it does not contain anything that cannot be serialized, such as classes, functions or symbols.
 ::
 
-::read-more{to="/docs/api/composables/use-state"}
+::read-more{to="/docs/4.x/api/composables/use-state"}
 Read more about `useState` composable.
 ::
 
@@ -53,15 +53,15 @@ const counter = useState('counter', () => Math.round(Math.random() * 1000))
 </template>
 ```
 
-:link-example{to="/docs/examples/features/state-management"}
+:link-example{to="/docs/4.x/examples/features/state-management"}
 
 ::note
-To globally invalidate cached state, see [`clearNuxtState`](/docs/api/utils/clear-nuxt-state) util.
+To globally invalidate cached state, see [`clearNuxtState`](/docs/4.x/api/utils/clear-nuxt-state) util.
 ::
 
 ### Initializing State
 
-Most of the time, you will want to initialize your state with data that resolves asynchronously. You can use the [`app.vue`](/docs/guide/directory-structure/app) component with the [`callOnce`](/docs/api/utils/call-once) util to do so.
+Most of the time, you will want to initialize your state with data that resolves asynchronously. You can use the [`app.vue`](/docs/4.x/guide/directory-structure/app) component with the [`callOnce`](/docs/4.x/api/utils/call-once) util to do so.
 
 ```vue twoslash [app/app.vue]
 <script setup lang="ts">
@@ -77,7 +77,7 @@ await callOnce(async () => {
 This is similar to the [`nuxtServerInit` action](https://v2.nuxt.com/docs/directory-structure/store/#the-nuxtserverinit-action) in Nuxt 2, which allows filling the initial state of your store server-side before rendering the page.
 ::
 
-:read-more{to="/docs/api/utils/call-once"}
+:read-more{to="/docs/4.x/api/utils/call-once"}
 
 ### Usage with Pinia
 
@@ -88,20 +88,20 @@ Make sure to install the Pinia module with `npx nuxt module add pinia` or follow
 ::
 
 ::code-group
-```ts [stores/website.ts]
+```ts [app/stores/website.ts]
 export const useWebsiteStore = defineStore('websiteStore', {
   state: () => ({
     name: '',
-    description: ''
+    description: '',
   }),
   actions: {
-    async fetch() {
+    async fetch () {
       const infos = await $fetch('https://api.nuxt.com/modules/pinia')
 
       this.name = infos.name
       this.description = infos.description
-    }
-  }
+    },
+  },
 })
 ```
 ```vue [app/app.vue]
@@ -151,8 +151,8 @@ export const useLocales = () => {
   const locales = ref([
     'en-US',
     'en-GB',
-    ...
-    'ja-JP-u-ca-japanese'
+    // ...,
+    'ja-JP-u-ca-japanese',
   ])
   if (!locales.value.includes(locale.value)) {
     locales.value.unshift(locale.value)
@@ -177,8 +177,15 @@ const date = useLocaleDate(new Date('2016-10-26'))
     <h1>Nuxt birthday</h1>
     <p>{{ date }}</p>
     <label for="locale-chooser">Preview a different locale</label>
-    <select id="locale-chooser" v-model="locale">
-      <option v-for="loc of locales" :key="loc" :value="loc">
+    <select
+      id="locale-chooser"
+      v-model="locale"
+    >
+      <option
+        v-for="loc of locales"
+        :key="loc"
+        :value="loc"
+      >
         {{ loc }}
       </option>
     </select>
@@ -187,11 +194,11 @@ const date = useLocaleDate(new Date('2016-10-26'))
 ```
 ::
 
-:link-example{to="/docs/examples/advanced/locale"}
+:link-example{to="/docs/4.x/examples/advanced/locale"}
 
 ## Shared State
 
-By using [auto-imported composables](/docs/guide/directory-structure/app/composables) we can define global type-safe states and import them across the app.
+By using [auto-imported composables](/docs/4.x/guide/directory-structure/app/composables) we can define global type-safe states and import them across the app.
 
 ```ts twoslash [composables/states.ts]
 export const useColor = () => useState<string>('color', () => 'pink')
@@ -214,7 +221,7 @@ const color = useColor() // Same as useState('color')
 
 ## Using third-party libraries
 
-Nuxt **used to rely** on the Vuex library to provide global state management. If you are migrating from Nuxt 2, please head to [the migration guide](/docs/migration/configuration#vuex).
+Nuxt **used to rely** on the Vuex library to provide global state management. If you are migrating from Nuxt 2, please head to [the migration guide](/docs/4.x/migration/configuration#vuex).
 
 Nuxt is not opinionated about state management, so feel free to choose the right solution for your needs. There are multiple integrations with the most popular state management libraries, including:
 

package/1.getting-started/12.error-handling.md

@@ -8,7 +8,7 @@ Nuxt is a full-stack framework, which means there are several sources of unpreve
 
 - Errors during the Vue rendering lifecycle (SSR & CSR)
 - Server and client startup errors (SSR + CSR)
-- Errors during Nitro server lifecycle ([`server/`](/docs/guide/directory-structure/server) directory)
+- Errors during Nitro server lifecycle ([`server/`](/docs/4.x/guide/directory-structure/server) directory)
 - Errors downloading JS chunks
 
 ::tip
@@ -19,7 +19,7 @@ Nuxt is a full-stack framework, which means there are several sources of unpreve
 
 You can hook into Vue errors using [`onErrorCaptured`](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured).
 
-In addition, Nuxt provides a [`vue:error`](/docs/api/advanced/hooks#app-hooks-runtime) hook that will be called if any errors propagate up to the top level.
+In addition, Nuxt provides a [`vue:error`](/docs/4.x/api/advanced/hooks#app-hooks-runtime) hook that will be called if any errors propagate up to the top level.
 
 If you are using an error reporting framework, you can provide a global handler through [`vueApp.config.errorHandler`](https://vuejs.org/api/application.html#app-config-errorhandler). It will receive all Vue errors, even if they are handled.
 
@@ -45,7 +45,7 @@ Note that the `vue:error` hook is based on [`onErrorCaptured`](https://vuejs.org
 Nuxt will call the `app:error` hook if there are any errors in starting your Nuxt application.
 
 This includes:
-- running [Nuxt plugins](/docs/guide/directory-structure/plugins)
+- running [Nuxt plugins](/docs/4.x/guide/directory-structure/plugins)
 - processing `app:created` and `app:beforeMount` hooks
 - rendering your Vue app to HTML (during SSR)
 - mounting the app (on client-side), though you should handle this case with `onErrorCaptured` or with `vue:error`
@@ -53,7 +53,7 @@ This includes:
 
 ## Nitro Server Errors
 
-You cannot currently define a server-side handler for these errors, but can render an error page, see the [Render an Error Page](#error-page) section.
+You cannot currently define a server-side handler for these errors, but can render an error page, see the [Render an Error Page](/docs/4.x/getting-started/error-handling#error-page) section.
 
 ## Errors with JS Chunks
 
@@ -78,7 +78,7 @@ It can also occur on the client side when:
 - mounting your app if the error was not handled with `onErrorCaptured` or `vue:error` hook
 - the Vue app is initialized and mounted in browser (`app:mounted`).
 
-::read-more{to="/docs/api/advanced/hooks"}
+::read-more{to="/docs/4.x/api/advanced/hooks"}
 Discover all the Nuxt lifecycle hooks.
 ::
 
@@ -91,7 +91,7 @@ Customize the default error page by adding `~/error.vue` in the source directory
 import type { NuxtError } from '#app'
 
 const props = defineProps({
-  error: Object as () => NuxtError
+  error: Object as () => NuxtError,
 })
 
 const handleError = () => clearError({ redirect: '/' })
@@ -100,33 +100,35 @@ const handleError = () => clearError({ redirect: '/' })
 <template>
   <div>
     <h2>{{ error?.statusCode }}</h2>
-    <button @click="handleError">Clear errors</button>
+    <button @click="handleError">
+      Clear errors
+    </button>
   </div>
 </template>
 ```
 
-::read-more{to="/docs/guide/directory-structure/error"}
+::read-more{to="/docs/4.x/guide/directory-structure/error"}
 Read more about `error.vue` and its uses.
 ::
 
 For custom errors we highly recommend using `onErrorCaptured` composable that can be called in a page/component setup function or `vue:error` runtime nuxt hook that can be configured in a nuxt plugin.
 
 ```ts twoslash [plugins/error-handler.ts]
-export default defineNuxtPlugin(nuxtApp => {
+export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.hook('vue:error', (err) => {
     //
   })
 })
 ```
 
-When you are ready to remove the error page, you can call the [`clearError`](/docs/api/utils/clear-error) helper function, which takes an optional path to redirect to (for example, if you want to navigate to a 'safe' page).
+When you are ready to remove the error page, you can call the [`clearError`](/docs/4.x/api/utils/clear-error) helper function, which takes an optional path to redirect to (for example, if you want to navigate to a 'safe' page).
 
 ::important
 Make sure to check before using anything dependent on Nuxt plugins, such as `$route` or `useRouter`, as if a plugin threw an error, then it won't be re-run until you clear the error.
 ::
 
 ::note
-Rendering an error page is an entirely separate page load, meaning any registered middleware will run again. You can use [`useError`](#useerror) in middleware to check if an error is being handled.
+Rendering an error page is an entirely separate page load, meaning any registered middleware will run again. You can use [`useError`](/docs/4.x/getting-started/error-handling#useerror) in middleware to check if an error is being handled.
 ::
 
 ::note
@@ -143,7 +145,7 @@ function useError (): Ref<Error | { url, statusCode, statusMessage, message, des
 
 This function will return the global Nuxt error that is being handled.
 
-::read-more{to="/docs/api/composables/use-error"}
+::read-more{to="/docs/4.x/api/composables/use-error"}
 Read more about `useError` composable.
 ::
 
@@ -156,7 +158,7 @@ function createError (err: string | { cause, data, message, name, stack, statusC
 Create an error object with additional metadata. You can pass a string to be set as the error `message` or an object containing error properties. It is usable in both the Vue and Server portions of your app, and is meant to be thrown.
 
 If you throw an error created with `createError`:
-- on server-side, it will trigger a full-screen error page which you can clear with [`clearError`](#clearerror).
+- on server-side, it will trigger a full-screen error page which you can clear with [`clearError`](/docs/4.x/getting-started/error-handling#clearerror).
 - on client-side, it will throw a non-fatal error for you to handle. If you need to trigger a full-screen error page, then you can do this by setting `fatal: true`.
 
 ```vue twoslash [pages/movies/[slug\\].vue]
@@ -167,13 +169,13 @@ const { data } = await useFetch(`/api/movies/${route.params.slug}`)
 if (!data.value) {
   throw createError({
     statusCode: 404,
-    statusMessage: 'Page Not Found'
+    statusMessage: 'Page Not Found',
   })
 }
 </script>
 ```
 
-::read-more{to="/docs/api/utils/create-error"}
+::read-more{to="/docs/4.x/api/utils/create-error"}
 Read more about `createError` util.
 ::
 
@@ -183,11 +185,11 @@ Read more about `createError` util.
 function showError (err: string | Error | { statusCode, statusMessage }): Error
 ```
 
-You can call this function at any point on client-side, or (on server side) directly within middleware, plugins or `setup()` functions. It will trigger a full-screen error page which you can clear with [`clearError`](#clearerror).
+You can call this function at any point on client-side, or (on server side) directly within middleware, plugins or `setup()` functions. It will trigger a full-screen error page which you can clear with [`clearError`](/docs/4.x/getting-started/error-handling#clearerror).
 
 It is recommended instead to use `throw createError()`.
 
-::read-more{to="/docs/api/utils/show-error"}
+::read-more{to="/docs/4.x/api/utils/show-error"}
 Read more about `showError` util.
 ::
 
@@ -199,13 +201,13 @@ function clearError (options?: { redirect?: string }): Promise<void>
 
 This function will clear the currently handled Nuxt error. It also takes an optional path to redirect to (for example, if you want to navigate to a 'safe' page).
 
-::read-more{to="/docs/api/utils/clear-error"}
+::read-more{to="/docs/4.x/api/utils/clear-error"}
 Read more about `clearError` util.
 ::
 
 ## Render Error in Component
 
-Nuxt also provides a [`<NuxtErrorBoundary>`](/docs/api/components/nuxt-error-boundary) component that allows you to handle client-side errors within your app, without replacing your entire site with an error page.
+Nuxt also provides a [`<NuxtErrorBoundary>`](/docs/4.x/api/components/nuxt-error-boundary) component that allows you to handle client-side errors within your app, without replacing your entire site with an error page.
 
 This component is responsible for handling errors that occur within its default slot. On client-side, it will prevent the error from bubbling up to the top level, and will render the `#error` slot instead.
 
@@ -230,4 +232,4 @@ If you navigate to another route, the error will be cleared automatically.
 </template>
 ```
 
-:link-example{to="/docs/examples/advanced/error-handling"}
+:link-example{to="/docs/4.x/examples/advanced/error-handling"}

package/1.getting-started/13.server.md

@@ -4,7 +4,7 @@ description: Build full-stack applications with Nuxt's server framework. You can
 navigation.icon: i-lucide-pc-case
 ---
 
-:read-more{to="/docs/guide/directory-structure/server"}
+:read-more{to="/docs/4.x/guide/directory-structure/server"}
 
 ## Powered by Nitro
 
@@ -38,7 +38,7 @@ And you can directly return `text`, `json`, `html` or even a `stream`.
 
 Out-of-the-box, it supports **hot module replacement** and **auto-import** like the other parts of your Nuxt application.
 
-:read-more{to="/docs/guide/directory-structure/server"}
+:read-more{to="/docs/4.x/guide/directory-structure/server"}
 
 ## Universal Deployment
 
@@ -59,7 +59,7 @@ Or for other runtimes:
   :card{icon="i-logos-bun" title="Bun" to="https://bun.sh" target="_blank"}
 ::
 
-:read-more{to="/docs/getting-started/deployment"}
+:read-more{to="/docs/4.x/getting-started/deployment"}
 
 ## Hybrid Rendering
 
@@ -74,14 +74,14 @@ export default defineNuxtConfig({
     '/api/*': { cache: { maxAge: 60 * 60 } },
     // Redirection to avoid 404
     '/old-page': {
-      redirect: { to: '/new-page', statusCode: 302 }
-    }
+      redirect: { to: '/new-page', statusCode: 302 },
+    },
     // ...
-  }
+  },
 })
 ```
 
-::read-more{to="/docs/guide/concepts/rendering#hybrid-rendering"}
+::read-more{to="/docs/4.x/guide/concepts/rendering#hybrid-rendering"}
 Learn about all available route rules are available to customize the rendering mode of your routes.
 ::
 
@@ -91,4 +91,4 @@ Some route rules (`appMiddleware`, `redirect` and `prerender`) also affect clien
 
 Nitro is used to build the app for server side rendering, as well as pre-rendering.
 
-:read-more{to="/docs/guide/concepts/rendering"}
+:read-more{to="/docs/4.x/guide/concepts/rendering"}

package/1.getting-started/14.layers.md

@@ -9,8 +9,8 @@ One of the core features of Nuxt is the layers and extending support. You can ex
 ## Use Cases
 
 - Share reusable configuration presets across projects using `nuxt.config` and `app.config`
-- Create a component library using [`app/components/`](/docs/guide/directory-structure/app/components) directory
-- Create utility and composable library using [`app/composables/`](/docs/guide/directory-structure/app/composables) and [`app/utils/`](/docs/guide/directory-structure/app/utils) directories
+- Create a component library using [`app/components/`](/docs/4.x/guide/directory-structure/app/components) directory
+- Create utility and composable library using [`app/composables/`](/docs/4.x/guide/directory-structure/app/composables) and [`app/utils/`](/docs/4.x/guide/directory-structure/app/utils) directories
 - Create Nuxt module presets
 - Share standard setup across projects
 - Create Nuxt themes
@@ -30,15 +30,18 @@ In addition, named layer aliases to the `srcDir` of each of these layers will au
 Named layer aliases were introduced in Nuxt v3.16.0.
 ::
 
-In addition, you can extend from a layer by adding the [extends](/docs/api/nuxt-config#extends) property to your [`nuxt.config`](/docs/guide/directory-structure/nuxt-config) file.
+In addition, you can extend from a layer by adding the [extends](/docs/4.x/api/nuxt-config#extends) property to your [`nuxt.config`](/docs/4.x/guide/directory-structure/nuxt-config) file.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   extends: [
-    '../base',                     // Extend from a local layer
-    '@my-themes/awesome',          // Extend from an installed npm package
-    'github:my-themes/awesome#v1', // Extend from a git repository
-  ]
+    // Extend from a local layer
+    '../base',
+    // Extend from an installed npm package
+    '@my-themes/awesome',
+    // Extend from a git repository
+    'github:my-themes/awesome#v1',
+  ],
 })
 ```
 
@@ -48,8 +51,8 @@ You can also pass an authentication token if you are extending from a private Gi
 export default defineNuxtConfig({
   extends: [
     // per layer configuration
-    ['github:my-themes/private-awesome', { auth: process.env.GITHUB_TOKEN }]
-  ]
+    ['github:my-themes/private-awesome', { auth: process.env.GITHUB_TOKEN }],
+  ],
 })
 ```
 
@@ -61,13 +64,13 @@ export default defineNuxtConfig({
   extends: [
     [
       'github:my-themes/awesome',
-      { 
+      {
         meta: {
           name: 'my-awesome-theme',
         },
       },
     ],
-  ]
+  ],
 })
 ```
 
@@ -86,17 +89,20 @@ When using multiple layers, it's important to understand how they override each
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   extends: [
-    '../base',                     // Highest priority (among extends)
-    '@my-themes/awesome',          // Medium priority
-    'github:my-themes/awesome#v1', // Lower priority
-  ]
+    // Highest priority (among extends)
+    '../base',
+    // Medium priority
+    '@my-themes/awesome',
+    // Lower priority
+    'github:my-themes/awesome#v1',
+  ],
   // Your project has the highest priority
 })
 ```
 
 This means if multiple layers define the same component, configuration, or file, the one with higher priority will be used.
 
-::read-more{to="/docs/guide/going-further/layers"}
+::read-more{to="/docs/4.x/guide/going-further/layers"}
 Read more about layers in the **Layer Author Guide**.
 ::
 

package/1.getting-started/15.prerendering.md

@@ -6,11 +6,11 @@ navigation.icon: i-lucide-file-code-2
 
 Nuxt allows for select pages from your application to be rendered at build time. Nuxt will serve the prebuilt pages when requested instead of generating them on the fly.
 
-:read-more{title="Nuxt rendering modes" to="/docs/guide/concepts/rendering"}
+:read-more{title="Nuxt rendering modes" to="/docs/4.x/guide/concepts/rendering"}
 
 ## Crawl-based Pre-rendering
 
-Use the [`nuxt generate` command](/docs/api/commands/generate) to build and pre-render your application using the [Nitro](/docs/guide/concepts/server-engine) crawler. This command is similar to `nuxt build` with the `nitro.static` option set to `true`, or running `nuxt build --prerender`.
+Use the [`nuxt generate` command](/docs/4.x/api/commands/generate) to build and pre-render your application using the [Nitro](/docs/4.x/guide/concepts/server-engine) crawler. This command is similar to `nuxt build` with the `nitro.static` option set to `true`, or running `nuxt build --prerender`.
 
 This will build your site, stand up a nuxt instance, and, by default, prerender the root page `/` along with any of your site's pages it links to, any of your site's pages they link to, and so on.
 
@@ -45,23 +45,23 @@ Working of the Nitro crawler:
 
 This is important to understand since pages that are not linked to a discoverable page can't be pre-rendered automatically.
 
-::read-more{to="/docs/api/commands/generate#nuxt-generate"}
+::read-more{to="/docs/4.x/api/commands/generate#nuxt-generate"}
 Read more about the `nuxt generate` command.
 ::
 
 ### Selective Pre-rendering
 
-You can manually specify routes that [Nitro](/docs/guide/concepts/server-engine) will fetch and pre-render during the build or ignore routes that you don't want to pre-render like `/dynamic` in the `nuxt.config` file:
+You can manually specify routes that [Nitro](/docs/4.x/guide/concepts/server-engine) will fetch and pre-render during the build or ignore routes that you don't want to pre-render like `/dynamic` in the `nuxt.config` file:
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   nitro: {
     prerender: {
-      routes: ["/user/1", "/user/2"],
-      ignore: ["/dynamic"],
+      routes: ['/user/1', '/user/2'],
+      ignore: ['/dynamic'],
     },
   },
-});
+})
 ```
 
 You can combine this with the `crawlLinks` option to pre-render a set of routes that the crawler can't discover like your `/sitemap.xml` or `/robots.txt`:
@@ -71,10 +71,10 @@ export default defineNuxtConfig({
   nitro: {
     prerender: {
       crawlLinks: true,
-      routes: ["/sitemap.xml", "/robots.txt"],
+      routes: ['/sitemap.xml', '/robots.txt'],
     },
   },
-});
+})
 ```
 
 Setting `nitro.prerender` to `true` is similar to `nitro.prerender.crawlLinks` to `true`.
@@ -89,23 +89,23 @@ Lastly, you can manually configure this using routeRules.
 export default defineNuxtConfig({
   routeRules: {
     // Set prerender to true to configure it to be prerendered
-    "/rss.xml": { prerender: true },
+    '/rss.xml': { prerender: true },
     // Set it to false to configure it to be skipped for prerendering
-    "/this-DOES-NOT-get-prerendered": { prerender: false },
+    '/this-DOES-NOT-get-prerendered': { prerender: false },
     // Everything under /blog gets prerendered as long as it
     // is linked to from another page
-    "/blog/**": { prerender: true },
+    '/blog/**': { prerender: true },
   },
-});
+})
 ```
 
 ::read-more{to="https://nitro.build/config#routerules"}
 Read more about Nitro's `routeRules` configuration.
 ::
 
-As a shorthand, you can also configure this in a page file using [`defineRouteRules`](/docs/api/utils/define-route-rules).
+As a shorthand, you can also configure this in a page file using [`defineRouteRules`](/docs/4.x/api/utils/define-route-rules).
 
-::read-more{to="/docs/guide/going-further/experimental-features#inlinerouterules" icon="i-lucide-star"}
+::read-more{to="/docs/4.x/guide/going-further/experimental-features#inlinerouterules" icon="i-lucide-star"}
 This feature is experimental and in order to use it you must enable the `experimental.inlineRouteRules` option in your `nuxt.config`.
 ::
 
@@ -114,7 +114,7 @@ This feature is experimental and in order to use it you must enable the `experim
 // Or set at the page level
 defineRouteRules({
   prerender: true,
-});
+})
 </script>
 
 <template>
@@ -130,21 +130,21 @@ This will be translated to:
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   routeRules: {
-    "/": { prerender: true },
+    '/': { prerender: true },
   },
-});
+})
 ```
 
 ## Runtime Prerender Configuration
 
 ### `prerenderRoutes`
 
-You can use this at runtime within a [Nuxt context](/docs/guide/going-further/nuxt-app#the-nuxt-context) to add more routes for Nitro to prerender.
+You can use this at runtime within a [Nuxt context](/docs/4.x/guide/going-further/nuxt-app#the-nuxt-context) to add more routes for Nitro to prerender.
 
 ```vue [app/pages/index.vue]
 <script setup>
-prerenderRoutes(["/some/other/url"]);
-prerenderRoutes("/api/content/article/my-article");
+prerenderRoutes(['/some/other/url'])
+prerenderRoutes('/api/content/article/my-article')
 </script>
 
 <template>
@@ -154,7 +154,7 @@ prerenderRoutes("/api/content/article/my-article");
 </template>
 ```
 
-:read-more{title="prerenderRoutes" to="/docs/api/utils/prerender-routes"}
+:read-more{title="prerenderRoutes" to="/docs/4.x/api/utils/prerender-routes"}
 
 ### `prerender:routes` Nuxt hook
 
@@ -163,16 +163,16 @@ This is called before prerendering for additional routes to be registered.
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   hooks: {
-    async "prerender:routes"(ctx) {
-      const { pages } = await fetch("https://api.some-cms.com/pages").then(
-        (res) => res.json(),
-      );
+    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}`);
+        ctx.routes.add(`/${page.name}`)
       }
     },
   },
-});
+})
 ```
 
 ### `prerender:generate` Nitro hook
@@ -183,12 +183,12 @@ This is called for each route during prerendering. You can use this for fine-gra
 export default defineNuxtConfig({
   nitro: {
     hooks: {
-      "prerender:generate"(route) {
-        if (route.route?.includes("private")) {
-          route.skip = true;
+      'prerender:generate' (route) {
+        if (route.route?.includes('private')) {
+          route.skip = true
         }
       },
     },
   },
-});
+})
 ```

package/1.getting-started/16.deployment.md

@@ -48,9 +48,9 @@ module.exports = {
       port: '3000',
       exec_mode: 'cluster',
       instances: 'max',
-      script: './.output/server/index.mjs'
-    }
-  ]
+      script: './.output/server/index.mjs',
+    },
+  ],
 }
 ```
 
@@ -71,9 +71,9 @@ By default, the workload gets distributed to the workers with the round robin st
 There are two ways to deploy a Nuxt application to any static hosting services:
 
 - Static site generation (SSG) with `ssr: true` pre-renders routes of your application at build time. (This is the default behavior when running `nuxt generate`.) It will also generate `/200.html` and `/404.html` single-page app fallback pages, which can render dynamic routes or 404 errors on the client (though you may need to configure this on your static host).
-- Alternatively, you can prerender your site with `ssr: false` (static single-page app). This will produce HTML pages with an empty `<div id="__nuxt"></div>` where your Vue app would normally be rendered. You will lose many SEO benefits of prerendering your site, so it is suggested instead to use [`<ClientOnly>`](/docs/api/components/client-only) to wrap the portions of your site that cannot be server rendered (if any).
+- Alternatively, you can prerender your site with `ssr: false` (static single-page app). This will produce HTML pages with an empty `<div id="__nuxt"></div>` where your Vue app would normally be rendered. You will lose many SEO benefits of prerendering your site, so it is suggested instead to use [`<ClientOnly>`](/docs/4.x/api/components/client-only) to wrap the portions of your site that cannot be server rendered (if any).
 
-:read-more{title="Nuxt prerendering" to="/docs/getting-started/prerendering"}
+:read-more{title="Nuxt prerendering" to="/docs/4.x/getting-started/prerendering"}
 
 ### Client-side Only Rendering
 
@@ -81,7 +81,7 @@ If you don't want to pre-render your routes, another way of using static hosting
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
-  ssr: false
+  ssr: false,
 })
 ```
 
@@ -95,13 +95,13 @@ Nuxt can be deployed to several cloud providers with a minimal amount of configu
 
 In addition to Node.js servers and static hosting services, a Nuxt project can be deployed with several well-tested presets and minimal amount of configuration.
 
-You can explicitly set the desired preset in the [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file:
+You can explicitly set the desired preset in the [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config) file:
 
-```js twoslash [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   nitro: {
-    preset: 'node-server'
-  }
+    preset: 'node-server',
+  },
 })
 ```