@nuxt/docs 4.1.2 → 4.2.0

package/2.guide/4.recipes/4.sessions-and-authentication.md

@@ -48,7 +48,7 @@ import { z } from 'zod'
 
 const bodySchema = z.object({
   email: z.string().email(),
-  password: z.string().min(8)
+  password: z.string().min(8),
 })
 
 export default defineEventHandler(async (event) => {
@@ -59,14 +59,14 @@ export default defineEventHandler(async (event) => {
     // this server util is auto-imported by the auth-utils module
     await setUserSession(event, {
       user: {
-        name: 'John Doe'
-      }
+        name: 'John Doe',
+      },
     })
     return {}
   }
   throw createError({
     statusCode: 401,
-    message: 'Bad credentials'
+    message: 'Bad credentials',
   })
 })
 ```
@@ -98,25 +98,37 @@ const credentials = reactive({
   email: '',
   password: '',
 })
-async function login() {
-  $fetch('/api/login', {
-    method: 'POST',
-    body: credentials
-  })
-  .then(async () => {
+async function login () {
+  try {
+    await $fetch('/api/login', {
+      method: 'POST',
+      body: credentials,
+    })
+
     // Refresh the session on client-side and redirect to the home page
     await refreshSession()
     await navigateTo('/')
-  })
-  .catch(() => alert('Bad credentials'))
+  } catch {
+    alert('Bad credentials')
+  }
 }
 </script>
 
 <template>
   <form @submit.prevent="login">
-    <input v-model="credentials.email" type="email" placeholder="Email" />
-    <input v-model="credentials.password" type="password" placeholder="Password" />
-    <button type="submit">Login</button>
+    <input
+      v-model="credentials.email"
+      type="email"
+      placeholder="Email"
+    >
+    <input
+      v-model="credentials.password"
+      type="password"
+      placeholder="Password"
+    >
+    <button type="submit">
+      Login
+    </button>
   </form>
 </template>
 ```
@@ -138,12 +150,12 @@ export default defineEventHandler(async (event) => {
   // TODO: Fetch some stats based on the user
 
   return {}
-});
+})
 ```
 
 ## Protect App Routes
 
-Our data is safe with the server-side route in place, but without doing anything else, unauthenticated users would probably get some odd data when trying to access the `/users` page. We should create a [client-side middleware](https://nuxt.com/docs/guide/directory-structure/app/middleware) to protect the route on the client side and redirect users to the login page.
+Our data is safe with the server-side route in place, but without doing anything else, unauthenticated users would probably get some odd data when trying to access the `/users` page. We should create a [client-side middleware](https://nuxt.com/docs/4.x/guide/directory-structure/app/middleware) to protect the route on the client side and redirect users to the login page.
 
 `nuxt-auth-utils` provides a convenient `useUserSession` composable which we'll use to check if the user is logged in, and redirect them if they are not.
 
@@ -164,17 +176,17 @@ export default defineNuxtRouteMiddleware(() => {
 
 Now that we have our app middleware to protect our routes, we can use it on our home page that display our authenticated user information. If the user is not authenticated, they will be redirected to the login page.
 
-We'll use [`definePageMeta`](/docs/api/utils/define-page-meta) to apply the middleware to the route that we want to protect.
+We'll use [`definePageMeta`](/docs/4.x/api/utils/define-page-meta) to apply the middleware to the route that we want to protect.
 
 ```vue [app/pages/index.vue]
 <script setup lang="ts">
 definePageMeta({
   middleware: ['authenticated'],
 })
-  
+
 const { user, clear: clearSession } = useUserSession()
 
-async function logout() {
+async function logout () {
   await clearSession()
   await navigateTo('/login')
 }
@@ -183,7 +195,9 @@ async function logout() {
 <template>
   <div>
     <h1>Welcome {{ user.name }}</h1>
-    <button @click="logout">Logout</button>
+    <button @click="logout">
+      Logout
+    </button>
   </div>
 </template>
 ```

package/2.guide/5.best-practices/hydration.md

@@ -47,7 +47,7 @@ const userTheme = localStorage.getItem('theme') || 'light'
 </script>
 ```
 
-**Solution**: You can use [`useCookie`](/docs/api/composables/use-cookie):
+**Solution**: You can use [`useCookie`](/docs/4.x/api/composables/use-cookie):
 
 ```html
 <template>
@@ -144,7 +144,7 @@ const greeting = hour < 12 ? 'Good morning' : 'Good afternoon'
 </script>
 ```
 
-**Solution**: Use [`NuxtTime`](/docs/api/components/nuxt-time) component or handle it client-side:
+**Solution**: Use [`NuxtTime`](/docs/4.x/api/components/nuxt-time) component or handle it client-side:
 
 ```html
 <template>
@@ -178,8 +178,8 @@ onMounted(() => {
 
 ## In summary
 
-1. **Use SSR-friendly composables**: [`useFetch`](/docs/api/composables/use-fetch), [`useAsyncData`](/docs/api/composables/use-async-data), [`useState`](/docs/api/composables/use-state)
-2. **Wrap client-only code**: Use [`ClientOnly`](/docs/api/components/client-only) component for browser-specific content
+1. **Use SSR-friendly composables**: [`useFetch`](/docs/4.x/api/composables/use-fetch), [`useAsyncData`](/docs/4.x/api/composables/use-async-data), [`useState`](/docs/4.x/api/composables/use-state)
+2. **Wrap client-only code**: Use [`ClientOnly`](/docs/4.x/api/components/client-only) component for browser-specific content
 3. **Consistent data sources**: Ensure server and client uses the same data
 4. **Avoid side effects in setup**: Move browser-dependent code to `onMounted`
 

package/2.guide/5.best-practices/performance.md

@@ -12,7 +12,7 @@ Nuxt offers several built-in features that help you optimize performance of your
 
 ### Links
 
-[`<NuxtLink>`](/docs/api/components/nuxt-link) is a drop-in replacement for both Vue Router's `<RouterLink>` component and HTML's `<a>` tag. It intelligently determines whether the link is internal or external and renders it accordingly with available optimizations (prefetching, default attributes, etc.)
+[`<NuxtLink>`](/docs/4.x/api/components/nuxt-link) is a drop-in replacement for both Vue Router's `<RouterLink>` component and HTML's `<a>` tag. It intelligently determines whether the link is internal or external and renders it accordingly with available optimizations (prefetching, default attributes, etc.)
 
 ```html
 <template>
@@ -34,12 +34,12 @@ export default defineNuxtConfig({
       nuxtLink: {
         prefetchOn: 'interaction',
       },
-    }
-  }
+    },
+  },
 })
 ```
 
-:read-more{title="NuxtLink" to="/docs/api/components/nuxt-link"}
+:read-more{title="NuxtLink" to="/docs/4.x/api/components/nuxt-link"}
 
 ### Hybrid Rendering
 
@@ -51,24 +51,24 @@ Hybrid rendering allows different caching rules per route using Route Rules and
 export default defineNuxtConfig({
   routeRules: {
     '/': {
-      prerender: true
+      prerender: true,
     },
     '/products/**': {
-      swr: 3600
+      swr: 3600,
     },
     '/blog': {
-      isr: 3600
+      isr: 3600,
     },
     '/admin/**': {
-      ssr: false
+      ssr: false,
     },
-  }
+  },
 })
 ```
 
 Nuxt server will automatically register corresponding middleware and wrap routes with cache handlers using Nitro caching layer.
 
-:read-more{title="Hybrid rendering" to="/docs/guide/concepts/rendering#hybrid-rendering"}
+:read-more{title="Hybrid rendering" to="/docs/4.x/guide/concepts/rendering#hybrid-rendering"}
 
 ### Lazy Loading Components
 
@@ -90,7 +90,7 @@ const show = ref(false)
 
 By using the Lazy prefix you can delay loading the component code until the right moment, which can be helpful for optimizing your JavaScript bundle size.
 
-:read-more{title="Lazy loading components" to="/docs/guide/directory-structure/app/components#dynamic-imports"}
+:read-more{title="Lazy loading components" to="/docs/4.x/guide/directory-structure/app/components#dynamic-imports"}
 
 ### Lazy Hydration
 
@@ -106,13 +106,13 @@ It is not always necessary to hydrate (or make interactive) all the components o
 
 To optimize your app, you may want to delay the hydration of some components until they're visible, or until the browser is done with more important tasks.
 
-:read-more{title="Lazy hydration" to="/docs/guide/directory-structure/app/components#delayed-or-lazy-hydration"}
+:read-more{title="Lazy hydration" to="/docs/4.x/guide/directory-structure/app/components#delayed-or-lazy-hydration"}
 
 ### Fetching data
 
-To avoid fetching same data twice (once on the server and once on client) Nuxt provides [`useFetch`](/docs/api/composables/use-fetch) and [`useAsyncData`](/docs/api/composables/use-async-data). They ensure that if an API call is made on the server, the data is forwarded to the client in the payload instead of being fetched again.
+To avoid fetching same data twice (once on the server and once on client) Nuxt provides [`useFetch`](/docs/4.x/api/composables/use-fetch) and [`useAsyncData`](/docs/4.x/api/composables/use-async-data). They ensure that if an API call is made on the server, the data is forwarded to the client in the payload instead of being fetched again.
 
-:read-more{title="Data fetching" to="/docs/getting-started/data-fetching"}
+:read-more{title="Data fetching" to="/docs/4.x/getting-started/data-fetching"}
 
 ## Core Nuxt Modules
 
@@ -126,7 +126,7 @@ In Nuxt we can use [Nuxt Image](https://image.nuxt.com/) module that is a plug-a
 
 :video-accordion{title="Watch the video by LearnVue about Nuxt Image" videoId="_UBff2eqGY0"}
 
-[`<NuxtImg>`](/docs/api/components/nuxt-img) is a drop-in replacement for the native `<img>` tag that comes with following enhancements:
+[`<NuxtImg>`](/docs/4.x/api/components/nuxt-img) is a drop-in replacement for the native `<img>` tag that comes with following enhancements:
 
 * Uses built-in provider to optimize local and remote images
 * Converts `src` to provider optimized URLs with modern formats such as WebP or Avif
@@ -193,7 +193,7 @@ Nuxt Scripts provides an abstraction layer on top of third-party scripts, provid
 
 ```ts
 const { onLoaded, proxy } = useScriptGoogleAnalytics(
-  { 
+  {
     id: 'G-1234567',
     scriptOptions: {
       trigger: 'manual',
@@ -216,7 +216,7 @@ To improve performance, we need to first know how to measure it, starting with m
 
 ### Nuxi Analyze
 
-[This](/docs/api/commands/analyze) command of `nuxi` allows to analyze the production bundle or your Nuxt application. It leverages `vite-bundle-visualizer` (similar to `webpack-bundle-analyzer`) to generate a visual representation of your application's bundle, making it easier to identify which components take up the most space.
+[This](/docs/4.x/api/commands/analyze) command of `nuxi` allows to analyze the production bundle or your Nuxt application. It leverages `vite-bundle-visualizer` (similar to `webpack-bundle-analyzer`) to generate a visual representation of your application's bundle, making it easier to identify which components take up the most space.
 
 When you see a large block in the visualization, it often signals an opportunity for optimization—whether by splitting it into smaller parts, implementing lazy loading, or replacing it with a more efficient alternative, especially for third-party libraries.
 

package/3.api/1.components/1.client-only.md

@@ -24,7 +24,10 @@ The content of the default slot will be tree-shaken out of the server build. (Th
   <div>
     <Sidebar />
     <!-- The <Comment> component will only be rendered on client-side -->
-    <ClientOnly fallback-tag="span" fallback="Loading comments...">
+    <ClientOnly
+      fallback-tag="span"
+      fallback="Loading comments..."
+    >
       <Comment />
     </ClientOnly>
   </div>
@@ -40,7 +43,7 @@ The content of the default slot will be tree-shaken out of the server build. (Th
   <div>
     <Sidebar />
     <!-- This renders the "span" element on the server side -->
-    <ClientOnly fallbackTag="span">
+    <ClientOnly fallback-tag="span">
       <!-- this component will only be rendered on client side -->
       <Comments />
       <template #fallback>
@@ -64,7 +67,7 @@ const nuxtWelcomeRef = useTemplateRef('nuxtWelcomeRef')
 
 // The watch will be triggered when the component is available
 watch(nuxtWelcomeRef, () => {
- console.log('<NuxtWelcome /> mounted')
+  console.log('<NuxtWelcome /> mounted')
 }, { once: true })
 </script>
 

package/3.api/1.components/1.nuxt-client-fallback.md

@@ -14,7 +14,7 @@ links:
 
 Nuxt provides the `<NuxtClientFallback>` component to render its content on the client if any of its children trigger an error in SSR.
 
-::note{to="/docs/guide/going-further/experimental-features#clientfallback"}
+::note{to="/docs/4.x/guide/going-further/experimental-features#clientfallback"}
 This component is experimental and in order to use it you must enable the `experimental.clientFallback` option in your `nuxt.config`.
 ::
 
@@ -55,12 +55,15 @@ This component is experimental and in order to use it you must enable the `exper
   - **default**: `false`
 
 ```vue
-  <template>
-    <!-- render <span>Hello world</span> server-side if the default slot fails to render -->
-    <NuxtClientFallback fallback-tag="span" fallback="Hello world">
-      <BrokeInSsr />
-    </NuxtClientFallback>
-  </template>
+<template>
+  <!-- render <span>Hello world</span> server-side if the default slot fails to render -->
+  <NuxtClientFallback
+    fallback-tag="span"
+    fallback="Hello world"
+  >
+    <BrokeInSSR />
+  </NuxtClientFallback>
+</template>
 ```
 
 ## Slots

package/3.api/1.components/10.nuxt-picture.md

@@ -10,7 +10,7 @@ links:
 
 `<NuxtPicture>` is a drop-in replacement for the native `<picture>` tag.
 
-Usage of `<NuxtPicture>` is almost identical to [`<NuxtImg>`](/docs/api/components/nuxt-img) but it also allows serving modern formats like `webp` when possible.
+Usage of `<NuxtPicture>` is almost identical to [`<NuxtImg>`](/docs/4.x/api/components/nuxt-img) but it also allows serving modern formats like `webp` when possible.
 
 Learn more about the [`<picture>` tag on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture).
 

package/3.api/1.components/11.teleports.md

@@ -15,7 +15,10 @@ The `to` target of [`<Teleport>`](https://vuejs.org/guide/built-ins/teleport.htm
     Open Modal
   </button>
   <Teleport to="#teleports">
-    <div v-if="open" class="modal">
+    <div
+      v-if="open"
+      class="modal"
+    >
       <p>Hello from the modal!</p>
       <button @click="open = false">
         Close
@@ -37,4 +40,4 @@ The `to` target of [`<Teleport>`](https://vuejs.org/guide/built-ins/teleport.htm
 </template>
 ```
 
-:link-example{to="/docs/examples/advanced/teleport"}
+:link-example{to="/docs/4.x/examples/advanced/teleport"}

package/3.api/1.components/12.nuxt-route-announcer.md

@@ -16,7 +16,7 @@ This component is available in Nuxt v3.12+.
 
 ## Usage
 
-Add `<NuxtRouteAnnouncer/>` in your [`app.vue`](/docs/guide/directory-structure/app) or [`app/layouts/`](/docs/guide/directory-structure/app/layouts) to enhance accessibility by informing assistive technologies about page title changes. This ensures that navigational changes are announced to users relying on screen readers.
+Add `<NuxtRouteAnnouncer/>` in your [`app.vue`](/docs/4.x/guide/directory-structure/app) or [`app/layouts/`](/docs/4.x/guide/directory-structure/app/layouts) to enhance accessibility by informing assistive technologies about page title changes. This ensures that navigational changes are announced to users relying on screen readers.
 
 ```vue [app/app.vue]
 <template>
@@ -32,13 +32,13 @@ Add `<NuxtRouteAnnouncer/>` in your [`app.vue`](/docs/guide/directory-structure/
 You can pass custom HTML or components through the route announcer's default slot.
 
 ```vue
-  <template>
-    <NuxtRouteAnnouncer>
-      <template #default="{ message }">
-        <p>{{ message }} was loaded.</p>
-      </template>
-    </NuxtRouteAnnouncer>
-  </template>
+<template>
+  <NuxtRouteAnnouncer>
+    <template #default="{ message }">
+      <p>{{ message }} was loaded.</p>
+    </template>
+  </NuxtRouteAnnouncer>
+</template>
 ```
 
 ## Props
@@ -52,5 +52,5 @@ To achieve full customization, you can implement your own one based on [its sour
 ::
 
 ::callout
-You can hook into the underlying announcer instance using [the `useRouteAnnouncer` composable](/docs/api/composables/use-route-announcer), which allows you to set a custom announcement message.
+You can hook into the underlying announcer instance using [the `useRouteAnnouncer` composable](/docs/4.x/api/composables/use-route-announcer), which allows you to set a custom announcement message.
 ::

package/3.api/1.components/13.nuxt-time.md

@@ -56,7 +56,10 @@ The [BCP 47 language tag](https://datatracker.ietf.org/doc/html/rfc5646) for for
 
 ```vue
 <template>
-  <NuxtTime :datetime="Date.now()" locale="fr-FR" />
+  <NuxtTime
+    :datetime="Date.now()"
+    locale="fr-FR"
+  />
 </template>
 ```
 
@@ -66,8 +69,8 @@ The component accepts any property from the [Intl.DateTimeFormat](https://develo
 
 ```vue
 <template>
-  <NuxtTime 
-    :datetime="Date.now()" 
+  <NuxtTime
+    :datetime="Date.now()"
     year="numeric"
     month="long"
     day="numeric"
@@ -90,7 +93,10 @@ Enables relative time formatting using the Intl.RelativeTimeFormat API:
 ```vue
 <template>
   <!-- Shows something like "5 minutes ago" -->
-  <NuxtTime :datetime="Date.now() - 5 * 60 * 1000" relative />
+  <NuxtTime
+    :datetime="Date.now() - 5 * 60 * 1000"
+    relative
+  />
 </template>
 ```
 
@@ -98,13 +104,17 @@ Enables relative time formatting using the Intl.RelativeTimeFormat API:
 
 When `relative` is set to `true`, the component also accepts properties from [Intl.RelativeTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat):
 
+::warning
+Due to `style` being a reserved prop, `relativeStyle` prop is used instead.
+::
+
 ```vue
 <template>
-  <NuxtTime 
-    :datetime="Date.now() - 3 * 24 * 60 * 60 * 1000" 
-    relative 
+  <NuxtTime
+    :datetime="Date.now() - 3 * 24 * 60 * 60 * 1000"
+    relative
     numeric="auto"
-    style="long"
+    relative-style="long"
   />
 </template>
 ```
@@ -125,8 +135,8 @@ This would output something like: "3 days ago" or "last Friday" depending on the
 
 ```vue
 <template>
-  <NuxtTime 
-    :datetime="Date.now()" 
+  <NuxtTime
+    :datetime="Date.now()"
     weekday="long"
     year="numeric"
     month="short"
@@ -134,7 +144,7 @@ This would output something like: "3 days ago" or "last Friday" depending on the
     hour="numeric"
     minute="numeric"
     second="numeric"
-    timeZoneName="short"
+    time-zone-name="short"
   />
 </template>
 ```
@@ -145,15 +155,24 @@ This would output something like: "3 days ago" or "last Friday" depending on the
 <template>
   <div>
     <p>
-      <NuxtTime :datetime="Date.now() - 30 * 1000" relative />
+      <NuxtTime
+        :datetime="Date.now() - 30 * 1000"
+        relative
+      />
       <!-- 30 seconds ago -->
     </p>
-    <p>  
-      <NuxtTime :datetime="Date.now() - 45 * 60 * 1000" relative />
+    <p>
+      <NuxtTime
+        :datetime="Date.now() - 45 * 60 * 1000"
+        relative
+      />
       <!-- 45 minutes ago -->
     </p>
     <p>
-      <NuxtTime :datetime="Date.now() + 2 * 24 * 60 * 60 * 1000" relative />
+      <NuxtTime
+        :datetime="Date.now() + 2 * 24 * 60 * 60 * 1000"
+        relative
+      />
       <!-- in 2 days -->
     </p>
   </div>
@@ -165,9 +184,21 @@ This would output something like: "3 days ago" or "last Friday" depending on the
 ```vue
 <template>
   <div>
-    <NuxtTime :datetime="Date.now()" locale="en-US" weekday="long" />
-    <NuxtTime :datetime="Date.now()" locale="fr-FR" weekday="long" />
-    <NuxtTime :datetime="Date.now()" locale="ja-JP" weekday="long" />
+    <NuxtTime
+      :datetime="Date.now()"
+      locale="en-US"
+      weekday="long"
+    />
+    <NuxtTime
+      :datetime="Date.now()"
+      locale="fr-FR"
+      weekday="long"
+    />
+    <NuxtTime
+      :datetime="Date.now()"
+      locale="ja-JP"
+      weekday="long"
+    />
   </div>
 </template>
 ```

package/3.api/1.components/2.nuxt-page.md

@@ -8,7 +8,7 @@ links:
     size: xs
 ---
 
-`<NuxtPage>` is a built-in component that comes with Nuxt. It lets you display top-level or nested pages located in the [`app/pages/`](/docs/guide/directory-structure/app/pages) directory.
+`<NuxtPage>` is a built-in component that comes with Nuxt. It lets you display top-level or nested pages located in the [`app/pages/`](/docs/4.x/guide/directory-structure/app/pages) directory.
 
 ::note
 `<NuxtPage>` is a wrapper around [`<RouterView>`](https://router.vuejs.org/api/interfaces/RouterViewProps.html#interface-routerviewprops) from Vue Router. It should be used instead of `<RouterView>` because the former takes additional care of internal states. Otherwise, `useRoute()` may return incorrect paths.
@@ -18,7 +18,7 @@ links:
 
 ```vue
 <template>
-  <RouterView #default="{ Component }">
+  <RouterView v-slot="{ Component }">
     <!-- Optional, when using transitions -->
     <Transition>
       <!-- Optional, when using keep-alive -->
@@ -79,17 +79,17 @@ You can also use a dynamic key based on the current route:
 Don't use `$route` object here as it can cause problems with how `<NuxtPage>` renders pages with `<Suspense>`.
 ::
 
-Alternatively, `pageKey` can be passed as a `key` value via [`definePageMeta`](/docs/api/utils/define-page-meta) from the `<script>` section of your Vue component in the `/pages` directory.
+Alternatively, `pageKey` can be passed as a `key` value via [`definePageMeta`](/docs/4.x/api/utils/define-page-meta) from the `<script>` section of your Vue component in the `/pages` directory.
 
 ```vue [app/pages/my-page.vue]
 <script setup lang="ts">
 definePageMeta({
-  key: route => route.fullPath
+  key: route => route.fullPath,
 })
 </script>
 ```
 
-:link-example{to="/docs/examples/routing/pages"}
+:link-example{to="/docs/4.x/examples/routing/pages"}
 
 ## Page's Ref
 
@@ -151,4 +151,4 @@ console.log(attrs.foobar) // Outputs: 123
 </script>
 ```
 
-:read-more{to="/docs/guide/directory-structure/app/pages"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/pages"}

package/3.api/1.components/3.nuxt-layout.md

@@ -18,11 +18,11 @@ You can use `<NuxtLayout />` component to activate the `default` layout on `app.
 </template>
 ```
 
-:read-more{to="/docs/guide/directory-structure/app/layouts"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/layouts"}
 
 ## Props
 
-- `name`: Specify a layout name to be rendered, can be a string, reactive reference or a computed property. It **must** match the name of the corresponding layout file in the [`app/layouts/`](/docs/guide/directory-structure/app/layouts) directory.
+- `name`: Specify a layout name to be rendered, can be a string, reactive reference or a computed property. It **must** match the name of the corresponding layout file in the [`app/layouts/`](/docs/4.x/guide/directory-structure/app/layouts) directory.
   - **type**: `string`
   - **default**: `default`
 
@@ -51,11 +51,11 @@ Please note the layout name is normalized to kebab-case, so if your layout file
 </template>
 ```
 
-::read-more{to="/docs/guide/directory-structure/app/layouts"}
+::read-more{to="/docs/4.x/guide/directory-structure/app/layouts"}
 Read more about dynamic layouts.
 ::
 
-- `fallback`: If an invalid layout is passed to the `name` prop, no layout will be rendered. Specify a `fallback` layout to be rendered in this scenario. It **must** match the name of the corresponding layout file in the [`app/layouts/`](/docs/guide/directory-structure/app/layouts) directory.
+- `fallback`: If an invalid layout is passed to the `name` prop, no layout will be rendered. Specify a `fallback` layout to be rendered in this scenario. It **must** match the name of the corresponding layout file in the [`app/layouts/`](/docs/4.x/guide/directory-structure/app/layouts) directory.
   - **type**: `string`
   - **default**: `null`
 
@@ -66,8 +66,11 @@ Read more about dynamic layouts.
 ```vue [app/pages/some-page.vue]
 <template>
   <div>
-    <NuxtLayout name="custom" title="I am a custom layout">
-      <-- ... -->
+    <NuxtLayout
+      name="custom"
+      title="I am a custom layout"
+    >
+      <!-- ... -->
     </NuxtLayout>
   </div>
 </template>
@@ -93,7 +96,9 @@ console.log(layoutCustomProps.title) // I am a custom layout
 <template>
   <div>
     <NuxtLayout name="custom">
-      <template #header> Some header template content. </template>
+      <template #header>
+        Some header template content.
+      </template>
     </NuxtLayout>
   </div>
 </template>
@@ -111,7 +116,7 @@ console.log(layoutCustomProps.title) // I am a custom layout
 
 ::
 
-:read-more{to="/docs/getting-started/transitions"}
+:read-more{to="/docs/4.x/getting-started/transitions"}
 
 ## Layout's Ref
 
@@ -139,7 +144,7 @@ function logFoo () {
 <script setup lang="ts">
 const foo = () => console.log('foo')
 defineExpose({
-  foo
+  foo,
 })
 </script>
 
@@ -153,4 +158,4 @@ defineExpose({
 
 ::
 
-:read-more{to="/docs/guide/directory-structure/app/layouts"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/layouts"}