@nuxt/docs-nightly 4.1.3-29313386.edc02e27 → 4.1.3-29314777.50febbbb

package/1.getting-started/01.introduction.md

@@ -44,7 +44,7 @@ Overall, server-side rendering can provide a faster and more efficient user expe
 As Nuxt is a versatile framework, it gives you the possibility to statically render your whole application to a static hosting with `nuxt generate`,
 disable SSR globally with the `ssr: false` option or leverage hybrid rendering by setting up the `routeRules` option.
 
-:read-more{title="Nuxt rendering modes" to="/docs/guide/concepts/rendering"}
+:read-more{title="Nuxt rendering modes" to="/docs/4.x/guide/concepts/rendering"}
 
 ### Server engine
 
@@ -54,19 +54,19 @@ In development, it uses Rollup and Node.js workers for your server code and cont
 
 In production, Nitro builds your app and server into one universal `.output` directory. This output is light: minified and removed from any Node.js modules (except polyfills). You can deploy this output on any system supporting JavaScript, from Node.js, Serverless, Workers, Edge-side rendering or purely static.
 
-:read-more{title="Nuxt server engine" to="/docs/guide/concepts/server-engine"}
+:read-more{title="Nuxt server engine" to="/docs/4.x/guide/concepts/server-engine"}
 
 ### Production-ready
 
 A Nuxt application can be deployed on a Node or Deno server, pre-rendered to be hosted in static environments, or deployed to serverless and edge providers.
 
-:read-more{title="Deployment section" to="/docs/getting-started/deployment"}
+:read-more{title="Deployment section" to="/docs/4.x/getting-started/deployment"}
 
 ### Modular
 
 A module system allows you to extend Nuxt with custom features and integrations with third-party services.
 
-:read-more{title="Nuxt Modules Concept" to="/docs/guide/concepts/modules"}
+:read-more{title="Nuxt Modules Concept" to="/docs/4.x/guide/concepts/modules"}
 
 ### Architecture
 

package/1.getting-started/02.installation.md

@@ -115,4 +115,4 @@ Well done! A browser window should automatically open for <http://localhost:3000
 
 Now that you've created your Nuxt project, you are ready to start building your application.
 
-:read-more{title="Nuxt Concepts" to="/docs/guide/concepts"}
+:read-more{title="Nuxt Concepts" to="/docs/4.x/guide/concepts"}

package/1.getting-started/03.configuration.md

@@ -20,7 +20,7 @@ export default defineNuxtConfig({
 
 This file will often be mentioned in the documentation, for example to add custom scripts, register modules or change rendering modes.
 
-::read-more{to="/docs/api/configuration/nuxt-config"}
+::read-more{to="/docs/4.x/api/configuration/nuxt-config"}
 Every option is described in the **Configuration Reference**.
 ::
 
@@ -96,7 +96,7 @@ const runtimeConfig = useRuntimeConfig()
 </script>
 ```
 
-:read-more{to="/docs/guide/going-further/runtime-config"}
+:read-more{to="/docs/4.x/guide/going-further/runtime-config"}
 
 ## App Configuration
 
@@ -124,7 +124,7 @@ const appConfig = useAppConfig()
 </script>
 ```
 
-:read-more{to="/docs/guide/directory-structure/app-config"}
+:read-more{to="/docs/4.x/guide/directory-structure/app-config"}
 
 ## `runtimeConfig` vs. `app.config`
 
@@ -187,7 +187,7 @@ export default defineNuxtConfig({
 })
 ```
 
-:read-more{to="/docs/api/configuration/nuxt-config#vue"}
+:read-more{to="/docs/4.x/api/configuration/nuxt-config#vue"}
 
 ### With webpack
 
@@ -205,7 +205,7 @@ export default defineNuxtConfig({
 })
 ```
 
-:read-more{to="/docs/api/configuration/nuxt-config#loaders"}
+:read-more{to="/docs/4.x/api/configuration/nuxt-config#loaders"}
 
 ### Enabling Experimental Vue Features
 
@@ -223,4 +223,4 @@ export default defineNuxtConfig({
 
 Since Nuxt 3.9 and Vue 3.4, `reactivityTransform` has been moved from Vue to Vue Macros which has a [Nuxt integration](https://vue-macros.dev/guide/nuxt-integration.html).
 
-:read-more{to="/docs/api/configuration/nuxt-config#vue-1"}
+:read-more{to="/docs/4.x/api/configuration/nuxt-config#vue-1"}

package/1.getting-started/04.views.md

@@ -82,7 +82,7 @@ To use pages, create an `app/pages/index.vue` file and add `<NuxtPage />` compon
 
 ::
 
-:read-more{title="Routing Section" to="/docs/getting-started/routing"}
+:read-more{title="Routing Section" to="/docs/4.x/getting-started/routing"}
 
 ## Layouts
 
@@ -162,4 +162,4 @@ export default defineNitroPlugin((nitroApp) => {
 })
 ```
 
-:read-more{to="/docs/guide/going-further/hooks"}
+:read-more{to="/docs/4.x/guide/going-further/hooks"}

package/1.getting-started/05.assets.md

@@ -44,5 +44,5 @@ For example, referencing an image file that will be processed if a build tool is
 ```
 
 ::note
-Nuxt won't serve files in the [`app/assets/`](/docs/4.x/guide/directory-structure/app/assets) directory at a static URL like `/assets/my-file.png`. If you need a static URL, use the [`public/`](/docs/getting-started/assets#public-directory) directory.
+Nuxt won't serve files in the [`app/assets/`](/docs/4.x/guide/directory-structure/app/assets) directory at a static URL like `/assets/my-file.png`. If you need a static URL, use the [`public/`](/docs/4.x/getting-started/assets#public-directory) directory.
 ::

package/1.getting-started/06.styling.md

@@ -137,7 +137,7 @@ export default defineNuxtConfig({
 
 You can use the useHead composable to dynamically set a value in your head in your code.
 
-:read-more{to="/docs/api/composables/use-head"}
+:read-more{to="/docs/4.x/api/composables/use-head"}
 
 ```ts twoslash
 useHead({
@@ -492,7 +492,7 @@ Use different styles for different layouts.
 </style>
 ```
 
-:read-more{to="/docs/guide/directory-structure/app/layouts"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/layouts"}
 
 ## Third Party Libraries And Modules
 
@@ -523,7 +523,7 @@ If you are using [UnoCSS](https://unocss.dev/integrations/nuxt), note that it co
 
 Nuxt comes with the same `<Transition>` element that Vue has, and also has support for the experimental [View Transitions API](/docs/4.x/getting-started/transitions#view-transitions-api-experimental).
 
-:read-more{to="/docs/getting-started/transitions"}
+:read-more{to="/docs/4.x/getting-started/transitions"}
 
 ### Font Advanced Optimization
 

package/1.getting-started/07.routing.md

@@ -43,7 +43,7 @@ This file system routing uses naming conventions to create dynamic and nested ro
 
 ::
 
-:read-more{to="/docs/guide/directory-structure/app/pages"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/pages"}
 
 ## Navigation
 
@@ -65,7 +65,7 @@ When a [`<NuxtLink>`](/docs/4.x/api/components/nuxt-link) enters the viewport on
 </template>
 ```
 
-:read-more{to="/docs/api/components/nuxt-link"}
+:read-more{to="/docs/4.x/api/components/nuxt-link"}
 
 ## Route Parameters
 
@@ -80,7 +80,7 @@ console.log(route.params.id)
 </script>
 ```
 
-:read-more{to="/docs/api/composables/use-route"}
+:read-more{to="/docs/4.x/api/composables/use-route"}
 
 ## Route Middleware
 
@@ -125,7 +125,7 @@ definePageMeta({
 
 ::
 
-:read-more{to="/docs/guide/directory-structure/app/middleware"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/middleware"}
 
 ## Route Validation
 
@@ -146,4 +146,4 @@ definePageMeta({
 </script>
 ```
 
-:read-more{to="/docs/api/utils/define-page-meta"}
+:read-more{to="/docs/4.x/api/utils/define-page-meta"}

package/1.getting-started/08.seo-meta.md

@@ -33,7 +33,7 @@ export default defineNuxtConfig({
 })
 ```
 
-You can also provide any of the keys listed below in [Types](/docs/getting-started/seo-meta#types).
+You can also provide any of the keys listed below in [Types](/docs/4.x/getting-started/seo-meta#types).
 
 ### Defaults Tags
 
@@ -96,7 +96,7 @@ useSeoMeta({
 </script>
 ```
 
-:read-more{to="/docs/api/composables/use-seo-meta"}
+:read-more{to="/docs/4.x/api/composables/use-seo-meta"}
 
 ## Components
 
@@ -291,9 +291,9 @@ useHead({
 </script>
 ```
 
-:link-example{to="/docs/examples/features/meta-tags"}
+:link-example{to="/docs/4.x/examples/features/meta-tags"}
 
-:read-more{to="/docs/guide/directory-structure/app/pages/#page-metadata"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/pages/#page-metadata"}
 
 ### Dynamic Title
 

package/1.getting-started/10.data-fetching.md

@@ -80,11 +80,11 @@ async function addTodo() {
 ```
 
 ::warning
-Beware that using only `$fetch` will not provide [network calls de-duplication and navigation prevention](/docs/getting-started/data-fetching#the-need-for-usefetch-and-useasyncdata). :br
-It is recommended to use `$fetch` for client-side interactions (event-based) or combined with [`useAsyncData`](/docs/getting-started/data-fetching#useasyncdata) when fetching the initial component data.
+Beware that using only `$fetch` will not provide [network calls de-duplication and navigation prevention](/docs/4.x/getting-started/data-fetching#the-need-for-usefetch-and-useasyncdata). :br
+It is recommended to use `$fetch` for client-side interactions (event-based) or combined with [`useAsyncData`](/docs/4.x/getting-started/data-fetching#useasyncdata) when fetching the initial component data.
 ::
 
-::read-more{to="/docs/api/utils/dollarfetch"}
+::read-more{to="/docs/4.x/api/utils/dollarfetch"}
 Read more about `$fetch`.
 ::
 
@@ -146,9 +146,9 @@ This composable is a wrapper around the [`useAsyncData`](/docs/4.x/api/composabl
 
 :video-accordion{title="Watch a video from Alexander Lichter to avoid using useFetch the wrong way" videoId="njsGVmcWviY"}
 
-:read-more{to="/docs/api/composables/use-fetch"}
+:read-more{to="/docs/4.x/api/composables/use-fetch"}
 
-:link-example{to="/docs/examples/features/data-fetching"}
+:link-example{to="/docs/4.x/examples/features/data-fetching"}
 
 ## `useAsyncData`
 
@@ -220,7 +220,7 @@ await useAsyncData(() => offersStore.getOffer(route.params.slug))
 ```
 ::
 
-::read-more{to="/docs/api/composables/use-async-data"}
+::read-more{to="/docs/4.x/api/composables/use-async-data"}
 Read more about `useAsyncData`.
 ::
 
@@ -280,11 +280,11 @@ const { status, data: posts } = useLazyFetch('/api/posts')
 </script>
 ```
 
-::read-more{to="/docs/api/composables/use-lazy-fetch"}
+::read-more{to="/docs/4.x/api/composables/use-lazy-fetch"}
 Read more about `useLazyFetch`.
 ::
 
-::read-more{to="/docs/api/composables/use-lazy-async-data"}
+::read-more{to="/docs/4.x/api/composables/use-lazy-async-data"}
 Read more about `useLazyAsyncData`.
 ::
 
@@ -307,7 +307,7 @@ const { status, data: comments } = useFetch('/api/comments', {
 })
 ```
 
-The `useFetch` composable is meant to be invoked in setup method or called directly at the top level of a function in lifecycle hooks, otherwise you should use [`$fetch` method](/docs/getting-started/data-fetching#fetch).
+The `useFetch` composable is meant to be invoked in setup method or called directly at the top level of a function in lifecycle hooks, otherwise you should use [`$fetch` method](/docs/4.x/getting-started/data-fetching#fetch).
 
 ### Minimize payload size
 
@@ -431,7 +431,7 @@ const { data, error, execute, refresh } = await useFetch('/api/users')
 </template>
 ```
 
-The `execute` function is an alias for `refresh` that works in exactly the same way but is more semantic for cases when the fetch is [not immediate](/docs/getting-started/data-fetching#not-immediate).
+The `execute` function is an alias for `refresh` that works in exactly the same way but is more semantic for cases when the fetch is [not immediate](/docs/4.x/getting-started/data-fetching#not-immediate).
 
 ::tip
 To globally refetch or invalidate cached data, see [`clearNuxtData`](/docs/4.x/api/utils/clear-nuxt-data) and [`refreshNuxtData`](/docs/4.x/api/utils/refresh-nuxt-data).
@@ -479,7 +479,7 @@ const { data, error, refresh } = await useFetch(`/api/users/${id.value}`, {
 </script>
 ```
 
-If you need to change the URL based on a reactive value, you may want to use a [computed URL](/docs/getting-started/data-fetching#computed-url) instead.
+If you need to change the URL based on a reactive value, you may want to use a [computed URL](/docs/4.x/getting-started/data-fetching#computed-url) instead.
 
 When reactive fetch options are provided, they'll be automatically watched and trigger refetches. In some cases, it can be useful to opt-out of this behavior by specifying `watch: false`.
 
@@ -514,7 +514,7 @@ const { data, status } = useLazyFetch('/api/user', {
 
 In the case of more complex URL construction, you may use a callback as a [computed getter](https://vuejs.org/guide/essentials/computed.html) that returns the URL string.
 
-Every time a dependency changes, the data will be fetched using the newly constructed URL. Combine this with [not-immediate](/docs/getting-started/data-fetching#not-immediate), and you can wait until the reactive element changes before fetching.
+Every time a dependency changes, the data will be fetched using the newly constructed URL. Combine this with [not-immediate](/docs/4.x/getting-started/data-fetching#not-immediate), and you can wait until the reactive element changes before fetching.
 
 ```vue
 <script setup lang="ts">
@@ -547,7 +547,7 @@ const pending = computed(() => status.value === 'pending');
 </template>
 ```
 
-If you need to force a refresh when other reactive values change, you can also [watch other values](/docs/getting-started/data-fetching#watch).
+If you need to force a refresh when other reactive values change, you can also [watch other values](/docs/4.x/getting-started/data-fetching#watch).
 
 ### Not immediate
 
@@ -647,7 +647,7 @@ export default defineNuxtComponent({
 Using `<script setup>` or `<script setup lang="ts">` are the recommended way of declaring Vue components in Nuxt.
 ::
 
-:read-more{to="/docs/api/utils/define-nuxt-component"}
+:read-more{to="/docs/4.x/api/utils/define-nuxt-component"}
 
 ## Serializing Data From Server to Client
 

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

@@ -14,7 +14,7 @@ Nuxt provides the [`useState`](/docs/4.x/api/composables/use-state) composable t
 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,7 +53,7 @@ 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/4.x/api/utils/clear-nuxt-state) util.
@@ -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
 
@@ -187,7 +187,7 @@ 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
 

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

@@ -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](/docs/getting-started/error-handling#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.
 ::
 
@@ -105,7 +105,7 @@ const handleError = () => clearError({ redirect: '/' })
 </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.
 ::
 
@@ -126,7 +126,7 @@ Make sure to check before using anything dependent on Nuxt plugins, such as `$ro
 ::
 
 ::note
-Rendering an error page is an entirely separate page load, meaning any registered middleware will run again. You can use [`useError`](/docs/getting-started/error-handling#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 +143,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 +156,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`](/docs/getting-started/error-handling#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]
@@ -173,7 +173,7 @@ if (!data.value) {
 </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 +183,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`](/docs/getting-started/error-handling#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,7 +199,7 @@ 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.
 ::
 
@@ -230,4 +230,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
 
@@ -81,7 +81,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::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

@@ -96,7 +96,7 @@ export default defineNuxtConfig({
 
 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,7 +6,7 @@ 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
 
@@ -45,7 +45,7 @@ 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.
 ::
 
@@ -105,7 +105,7 @@ Read more about Nitro's `routeRules` configuration.
 
 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`.
 ::
 
@@ -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
 

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

@@ -73,7 +73,7 @@ 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/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
 

package/1.getting-started/17.testing.md

@@ -624,7 +624,7 @@ Please use the options below for the `setup` method.
   - Type: `number | undefined`
   - Default: `undefined`
 
-- `host`: If provided, a URL to use as the test target instead of building and running a new server. Useful for running "real" end-to-end tests against a deployed version of your application, or against an already running local server (which may provide a significant reduction in test execution timings). See the [target host end-to-end example below](/docs/getting-started/testing#target-host-end-to-end-example).
+- `host`: If provided, a URL to use as the test target instead of building and running a new server. Useful for running "real" end-to-end tests against a deployed version of your application, or against an already running local server (which may provide a significant reduction in test execution timings). See the [target host end-to-end example below](/docs/4.x/getting-started/testing#target-host-end-to-end-example).
   - Type: `string`
   - Default: `undefined`
 

package/1.getting-started/18.upgrade.md

@@ -1195,7 +1195,7 @@ Static sites             | ✅             | ✅                | ✅
 
 The migration guide provides a step-by-step comparison of Nuxt 2 features to Nuxt 3+ features and guidance to adapt your current application.
 
-::read-more{to="/docs/migration/overview"}
+::read-more{to="/docs/4.x/migration/overview"}
 Check out the **guide to migrating from Nuxt 2 to Nuxt 3**.
 ::
 
@@ -1203,6 +1203,6 @@ Check out the **guide to migrating from Nuxt 2 to Nuxt 3**.
 
 If you prefer to progressively migrate your Nuxt 2 application to Nuxt 3, you can use Nuxt Bridge. Nuxt Bridge is a compatibility layer that allows you to use Nuxt 3+ features in Nuxt 2 with an opt-in mechanism.
 
-::read-more{to="/docs/bridge/overview"}
+::read-more{to="/docs/4.x/bridge/overview"}
 **Migrate from Nuxt 2 to Nuxt Bridge**
 ::

package/2.guide/0.index.md

@@ -7,19 +7,19 @@ surround: false
 ---
 
 ::card-group{class="sm:grid-cols-1"}
-  ::card{icon="i-lucide-folders" title="Directory Structure" to="/docs/guide/directory-structure"}
+  ::card{icon="i-lucide-folders" title="Directory Structure" to="/docs/4.x/guide/directory-structure"}
   Learn about Nuxt directory structure and what benefits each directory or file offers.
   ::
-  ::card{icon="i-lucide-medal" title="Key Concepts" to="/docs/guide/concepts"}
+  ::card{icon="i-lucide-medal" title="Key Concepts" to="/docs/4.x/guide/concepts"}
   Discover the main concepts behind Nuxt, from auto-import, hybrid rendering to its TypeScript support.
   ::
-  ::card{icon="i-lucide-star" title="Going Further" to="/docs/guide/going-further"}
+  ::card{icon="i-lucide-star" title="Going Further" to="/docs/4.x/guide/going-further"}
   Master Nuxt with advanced concepts like experimental features, hooks, modules, and more.
   ::
-  ::card{icon="i-lucide-book-open" title="Recipes" to="/docs/guide/recipes"}
+  ::card{icon="i-lucide-book-open" title="Recipes" to="/docs/4.x/guide/recipes"}
   Find solutions to common problems and learn how to implement them in your Nuxt project.
   ::
-  ::card{icon="i-lucide-square-check" title="Best Practices" to="/docs/guide/best-practices"}
+  ::card{icon="i-lucide-square-check" title="Best Practices" to="/docs/4.x/guide/best-practices"}
   Learn about best practices when developing with Nuxt
   ::
 ::

package/2.guide/1.directory-structure/0.output.md

@@ -11,7 +11,7 @@ This directory should be added to your [`.gitignore`](/docs/4.x/guide/directory-
 
 Use this directory to deploy your Nuxt application to production.
 
-:read-more{to="/docs/getting-started/deployment"}
+:read-more{to="/docs/4.x/getting-started/deployment"}
 
 ::warning
 You should not touch any files inside since the whole directory will be re-created when running [`nuxt build`](/docs/4.x/api/commands/build).

package/2.guide/1.directory-structure/1.app/1.assets.md

@@ -13,4 +13,4 @@ The directory usually contains the following types of files:
 
 If you want to serve assets from the server, we recommend taking a look at the [`public/`](/docs/4.x/guide/directory-structure/public) directory.
 
-:read-more{to="/docs/getting-started/assets"}
+:read-more{to="/docs/4.x/getting-started/assets"}

package/2.guide/1.directory-structure/1.app/1.components.md

@@ -416,7 +416,7 @@ This feature only works with Nuxt auto-imports and `#components` imports. Explic
 `.client` components are rendered only after being mounted. To access the rendered template using `onMounted()`, add `await nextTick()` in the callback of the `onMounted()` hook.
 ::
 
-::read-more{to="/docs/api/components/client-only"}
+::read-more{to="/docs/4.x/api/components/client-only"}
 You can also achieve a similar result with the `<ClientOnly>` component.
 ::
 
@@ -424,7 +424,7 @@ You can also achieve a similar result with the `<ClientOnly>` component.
 
 Server components allow server-rendering individual components within your client-side apps. It's possible to use server components within Nuxt, even if you are generating a static site. That makes it possible to build complex sites that mix dynamic components, server-rendered HTML and even static chunks of markup.
 
-Server components can either be used on their own or paired with a [client component](/docs/guide/directory-structure/app/components#paired-with-a-client-component).
+Server components can either be used on their own or paired with a [client component](/docs/4.x/guide/directory-structure/app/components#paired-with-a-client-component).
 
 :video-accordion{title="Watch Learn Vue video about Nuxt Server Components" videoId="u1yyXe86xJM"}
 
@@ -547,7 +547,7 @@ In this case, the `.server` + `.client` components are two 'halves' of a compone
 
 There are a number of components that Nuxt provides, including `<ClientOnly>` and `<DevOnly>`. You can read more about them in the API documentation.
 
-::read-more{to="/docs/api"}
+::read-more{to="/docs/4.x/api"}
 ::
 
 ## Library Authors
@@ -609,4 +609,4 @@ export default defineNuxtConfig({
 
 It will automatically import the components only if used and also support HMR when updating your components in `node_modules/awesome-ui/components/`.
 
-:link-example{to="/docs/examples/features/auto-imports"}
+:link-example{to="/docs/4.x/examples/features/auto-imports"}