@nuxt/docs 4.1.2 → 4.2.0

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

@@ -4,11 +4,11 @@ description: Nuxt file-system routing creates a route for every file in the page
 navigation.icon: i-lucide-milestone
 ---
 
-One core feature of Nuxt is the file system router. Every Vue file inside the [`app/pages/`](/docs/guide/directory-structure/app/pages) directory creates a corresponding URL (or route) that displays the contents of the file. By using dynamic imports for each page, Nuxt leverages code-splitting to ship the minimum amount of JavaScript for the requested route.
+One core feature of Nuxt is the file system router. Every Vue file inside the [`app/pages/`](/docs/4.x/guide/directory-structure/app/pages) directory creates a corresponding URL (or route) that displays the contents of the file. By using dynamic imports for each page, Nuxt leverages code-splitting to ship the minimum amount of JavaScript for the requested route.
 
 ## Pages
 
-Nuxt routing is based on [vue-router](https://router.vuejs.org) and generates the routes from every component created in the [`app/pages/` directory](/docs/guide/directory-structure/app/pages), based on their filename.
+Nuxt routing is based on [vue-router](https://router.vuejs.org) and generates the routes from every component created in the [`app/pages/` directory](/docs/4.x/guide/directory-structure/app/pages), based on their filename.
 
 This file system routing uses naming conventions to create dynamic and nested routes:
 
@@ -43,13 +43,13 @@ 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
 
-The [`<NuxtLink>`](/docs/api/components/nuxt-link) component links pages between them. It renders an `<a>` tag with the `href` attribute set to the route of the page. Once the application is hydrated, page transitions are performed in JavaScript by updating the browser URL. This prevents full-page refreshes and allows for animated transitions.
+The [`<NuxtLink>`](/docs/4.x/api/components/nuxt-link) component links pages between them. It renders an `<a>` tag with the `href` attribute set to the route of the page. Once the application is hydrated, page transitions are performed in JavaScript by updating the browser URL. This prevents full-page refreshes and allows for animated transitions.
 
-When a [`<NuxtLink>`](/docs/api/components/nuxt-link) enters the viewport on the client side, Nuxt will automatically prefetch components and payload (generated pages) of the linked pages ahead of time, resulting in faster navigation.
+When a [`<NuxtLink>`](/docs/4.x/api/components/nuxt-link) enters the viewport on the client side, Nuxt will automatically prefetch components and payload (generated pages) of the linked pages ahead of time, resulting in faster navigation.
 
 ```vue [app/pages/index.vue]
 <template>
@@ -65,11 +65,11 @@ When a [`<NuxtLink>`](/docs/api/components/nuxt-link) enters the viewport on the
 </template>
 ```
 
-:read-more{to="/docs/api/components/nuxt-link"}
+:read-more{to="/docs/4.x/api/components/nuxt-link"}
 
 ## Route Parameters
 
-The [`useRoute()`](/docs/api/composables/use-route) composable can be used in a `<script setup>` block or a `setup()` method of a Vue component to access the current route details.
+The [`useRoute()`](/docs/4.x/api/composables/use-route) composable can be used in a `<script setup>` block or a `setup()` method of a Vue component to access the current route details.
 
 ```vue twoslash [pages/posts/[id\\].vue]
 <script setup lang="ts">
@@ -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
 
@@ -93,15 +93,15 @@ Route middleware runs within the Vue part of your Nuxt app. Despite the similar
 There are three kinds of route middleware:
 
 1. Anonymous (or inline) route middleware, which are defined directly in the pages where they are used.
-2. Named route middleware, which are placed in the [`app/middleware/`](/docs/guide/directory-structure/app/middleware) directory and will be automatically loaded via asynchronous import when used on a page. (**Note**: The route middleware name is normalized to kebab-case, so `someMiddleware` becomes `some-middleware`.)
-3. Global route middleware, which are placed in the [`app/middleware/`](/docs/guide/directory-structure/app/middleware) directory (with a `.global` suffix) and will be automatically run on every route change.
+2. Named route middleware, which are placed in the [`app/middleware/`](/docs/4.x/guide/directory-structure/app/middleware) directory and will be automatically loaded via asynchronous import when used on a page. (**Note**: The route middleware name is normalized to kebab-case, so `someMiddleware` becomes `some-middleware`.)
+3. Global route middleware, which are placed in the [`app/middleware/`](/docs/4.x/guide/directory-structure/app/middleware) directory (with a `.global` suffix) and will be automatically run on every route change.
 
 Example of an `auth` middleware protecting the `/dashboard` page:
 
 ::code-group
 
 ```ts twoslash [middleware/auth.ts]
-function isAuthenticated(): boolean { return false }
+function isAuthenticated (): boolean { return false }
 // ---cut---
 export default defineNuxtRouteMiddleware((to, from) => {
   // isAuthenticated() is an example method verifying if a user is authenticated
@@ -114,7 +114,7 @@ export default defineNuxtRouteMiddleware((to, from) => {
 ```vue twoslash [pages/dashboard.vue]
 <script setup lang="ts">
 definePageMeta({
-  middleware: 'auth'
+  middleware: 'auth',
 })
 </script>
 
@@ -125,11 +125,11 @@ definePageMeta({
 
 ::
 
-:read-more{to="/docs/guide/directory-structure/app/middleware"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/middleware"}
 
 ## Route Validation
 
-Nuxt offers route validation via the `validate` property in [`definePageMeta()`](/docs/api/utils/define-page-meta) in each page you wish to validate.
+Nuxt offers route validation via the `validate` property in [`definePageMeta()`](/docs/4.x/api/utils/define-page-meta) in each page you wish to validate.
 
 The `validate` property accepts the `route` as an argument. You can return a boolean value to determine whether or not this is a valid route to be rendered with this page. If you return `false`, this will cause a 404 error. You can also directly return an object with `statusCode`/`statusMessage` to customize the error returned.
 
@@ -138,12 +138,12 @@ If you have a more complex use case, then you can use anonymous route middleware
 ```vue twoslash [pages/posts/[id\\].vue]
 <script setup lang="ts">
 definePageMeta({
-  validate: async (route) => {
+  validate (route) {
     // Check if the id is made up of digits
     return typeof route.params.id === 'string' && /^\d+$/.test(route.params.id)
-  }
+  },
 })
 </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

@@ -9,7 +9,7 @@ and numerous configuration options to manage your app's head and SEO meta tags.
 
 ## Nuxt Config
 
-Providing an [`app.head`](/docs/api/nuxt-config#head) property in your [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) allows you to statically customize the head for your entire app.
+Providing an [`app.head`](/docs/4.x/api/nuxt-config#head) property in your [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config) allows you to statically customize the head for your entire app.
 
 ::important
 This method does not allow you to provide reactive data. We recommend using `useHead()` in `app.vue`.
@@ -27,13 +27,13 @@ export default defineNuxtConfig({
       },
       link: [
         { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-      ]
-    }
-  }
+      ],
+    },
+  },
 })
 ```
 
-You can also provide any of the keys listed below in [Types](#types).
+You can also provide any of the keys listed below in [Types](/docs/4.x/getting-started/seo-meta#types).
 
 ### Defaults Tags
 
@@ -51,35 +51,35 @@ export default defineNuxtConfig({
       // update Nuxt defaults
       charset: 'utf-16',
       viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
-    }
-  }
+    },
+  },
 })
 ```
 
 ## `useHead`
 
-The [`useHead`](/docs/api/composables/use-head) composable function supports reactive input, allowing you to manage your head tags programmatically.
+The [`useHead`](/docs/4.x/api/composables/use-head) composable function supports reactive input, allowing you to manage your head tags programmatically.
 
 ```vue twoslash [app/app.vue]
 <script setup lang="ts">
 useHead({
   title: 'My App',
   meta: [
-    { name: 'description', content: 'My amazing site.' }
+    { name: 'description', content: 'My amazing site.' },
   ],
   bodyAttrs: {
-    class: 'test'
+    class: 'test',
   },
-  script: [ { innerHTML: 'console.log(\'Hello world\')' } ]
+  script: [{ innerHTML: 'console.log(\'Hello world\')' }],
 })
 </script>
 ```
 
-We recommend taking a look at the [`useHead`](/docs/api/composables/use-head) and [`useHeadSafe`](/docs/api/composables/use-head-safe) composables.
+We recommend taking a look at the [`useHead`](/docs/4.x/api/composables/use-head) and [`useHeadSafe`](/docs/4.x/api/composables/use-head-safe) composables.
 
 ## `useSeoMeta`
 
-The [`useSeoMeta`](/docs/api/composables/use-seo-meta) composable lets you define your site's SEO meta tags as an object with full type safety.
+The [`useSeoMeta`](/docs/4.x/api/composables/use-seo-meta) composable lets you define your site's SEO meta tags as an object with full type safety.
 
 This helps you avoid typos and common mistakes, such as using `name` instead of `property`.
 
@@ -96,11 +96,11 @@ useSeoMeta({
 </script>
 ```
 
-:read-more{to="/docs/api/composables/use-seo-meta"}
+:read-more{to="/docs/4.x/api/composables/use-seo-meta"}
 
 ## Components
 
-While using [`useHead`](/docs/api/composables/use-head) is recommended in all cases, you may have a personal preference for defining your head tags in your template using components.
+While using [`useHead`](/docs/4.x/api/composables/use-head) is recommended in all cases, you may have a personal preference for defining your head tags in your template using components.
 
 Nuxt provides the following components for this purpose: `<Title>`, `<Base>`, `<NoScript>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>`. Note
 the capitalization of these components ensuring we don't use invalid native HTML tags.
@@ -118,9 +118,12 @@ const title = ref('Hello World')
   <div>
     <Head>
       <Title>{{ title }}</Title>
-      <Meta name="description" :content="title" />
+      <Meta
+        name="description"
+        :content="title"
+      />
       <Style>
-      body { background-color: green; }
+        body { background-color: green; }
       </Style>
     </Head>
 
@@ -133,7 +136,7 @@ It's suggested to wrap your components in either a `<Head>` or `<Html>` componen
 
 ## Types
 
-Below are the non-reactive types used for [`useHead`](/docs/api/composables/use-head), [`app.head`](/docs/api/nuxt-config#head) and components.
+Below are the non-reactive types used for [`useHead`](/docs/4.x/api/composables/use-head), [`app.head`](/docs/4.x/api/nuxt-config#head) and components.
 
 ```ts
 interface MetaObject {
@@ -145,9 +148,9 @@ interface MetaObject {
   meta?: Meta[]
   style?: Style[]
   script?: Script[]
-  noscript?: Noscript[];
-  htmlAttrs?: HtmlAttributes;
-  bodyAttrs?: BodyAttributes;
+  noscript?: Noscript[]
+  htmlAttrs?: HtmlAttributes
+  bodyAttrs?: BodyAttributes
 }
 ```
 
@@ -167,7 +170,7 @@ Reactivity is supported on all properties, by providing a computed value, a gett
 
   useHead({
     meta: [
-      { name: 'description', content: description }
+      { name: 'description', content: description },
     ],
   })
   </script>
@@ -178,7 +181,7 @@ Reactivity is supported on all properties, by providing a computed value, a gett
   const description = ref('My amazing site.')
 
   useSeoMeta({
-    description
+    description,
   })
   </script>
   ```
@@ -190,7 +193,10 @@ Reactivity is supported on all properties, by providing a computed value, a gett
 
   <template>
     <div>
-      <Meta name="description" :content="description" />
+      <Meta
+        name="description"
+        :content="description"
+      />
     </div>
   </template>
   ```
@@ -211,15 +217,15 @@ If you want to use a function (for full control), then this cannot be set in you
   <script setup lang="ts">
   useHead({
     titleTemplate: (titleChunk) => {
-      return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
-    }
+      return titleChunk ? `${titleChunk} - Site Title` : 'Site Title'
+    },
   })
   </script>
   ```
 
 ::
 
-Now, if you set the title to `My Page` with [`useHead`](/docs/api/composables/use-head) on another page of your site, the title would appear as 'My Page - Site Title' in the browser tab. You could also pass `null` to default to 'Site Title'.
+Now, if you set the title to `My Page` with [`useHead`](/docs/4.x/api/composables/use-head) on another page of your site, the title would appear as 'My Page - Site Title' in the browser tab. You could also pass `null` to default to 'Site Title'.
 
 ### Template Params
 
@@ -231,12 +237,12 @@ You can use `templateParams` to provide additional placeholders in your `titleTe
   <script setup lang="ts">
   useHead({
     titleTemplate: (titleChunk) => {
-      return titleChunk ? `${titleChunk} %separator %siteName` : '%siteName';
+      return titleChunk ? `${titleChunk} %separator %siteName` : '%siteName'
     },
     templateParams: {
       siteName: 'Site Title',
-      separator: '-'
-    }
+      separator: '-',
+    },
   })
   </script>
   ```
@@ -256,9 +262,9 @@ useHead({
     {
       src: 'https://third-party-script.com',
       // valid options are: 'head' | 'bodyClose' | 'bodyOpen'
-      tagPosition: 'bodyClose'
-    }
-  ]
+      tagPosition: 'bodyClose',
+    },
+  ],
 })
 </script>
 ```
@@ -267,14 +273,14 @@ useHead({
 
 ### With `definePageMeta`
 
-Within your [`app/pages/` directory](/docs/guide/directory-structure/app/pages), you can use `definePageMeta` along with [`useHead`](/docs/api/composables/use-head) to set metadata based on the current route.
+Within your [`app/pages/` directory](/docs/4.x/guide/directory-structure/app/pages), you can use `definePageMeta` along with [`useHead`](/docs/4.x/api/composables/use-head) to set metadata based on the current route.
 
 For example, you can first set the current page title (this is extracted at build time via a macro, so it can't be set dynamically):
 
 ```vue twoslash [pages/some-page.vue]
 <script setup lang="ts">
 definePageMeta({
-  title: 'Some Page'
+  title: 'Some Page',
 })
 </script>
 ```
@@ -286,14 +292,14 @@ And then in your layout file, you might use the route's metadata you have previo
 const route = useRoute()
 
 useHead({
-  meta: [{ property: 'og:title', content: `App Name - ${route.meta.title}` }]
+  meta: [{ property: 'og:title', content: `App Name - ${route.meta.title}` }],
 })
 </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
 
@@ -317,7 +323,7 @@ useHead({
     return productCategory
       ? `${productCategory} - Site Title`
       : 'Site Title'
-  }
+  },
 })
 </script>
 ```
@@ -326,7 +332,7 @@ useHead({
 
 ### External CSS
 
-The example below shows how you might enable Google Fonts using either the `link` property of the [`useHead`](/docs/api/composables/use-head) composable or using the `<Link>` component:
+The example below shows how you might enable Google Fonts using either the `link` property of the [`useHead`](/docs/4.x/api/composables/use-head) composable or using the `<Link>` component:
 
 ::code-group
 
@@ -336,14 +342,14 @@ The example below shows how you might enable Google Fonts using either the `link
     link: [
       {
         rel: 'preconnect',
-        href: 'https://fonts.googleapis.com'
+        href: 'https://fonts.googleapis.com',
       },
       {
         rel: 'stylesheet',
         href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
-        crossorigin: ''
-      }
-    ]
+        crossorigin: '',
+      },
+    ],
   })
   </script>
   ```
@@ -351,8 +357,15 @@ The example below shows how you might enable Google Fonts using either the `link
   ```vue [app/Components]
   <template>
     <div>
-      <Link rel="preconnect" href="https://fonts.googleapis.com" />
-      <Link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" crossorigin="" />
+      <Link
+        rel="preconnect"
+        href="https://fonts.googleapis.com"
+      />
+      <Link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
+        crossorigin=""
+      />
     </div>
   </template>
   ```

package/1.getting-started/09.transitions.md

@@ -10,21 +10,21 @@ Nuxt leverages Vue's [`<Transition>`](https://vuejs.org/guide/built-ins/transiti
 
 ## Page Transitions
 
-You can enable page transitions to apply an automatic transition for all your [pages](/docs/guide/directory-structure/app/pages).
+You can enable page transitions to apply an automatic transition for all your [pages](/docs/4.x/guide/directory-structure/app/pages).
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   app: {
-    pageTransition: { name: 'page', mode: 'out-in' }
-  }
+    pageTransition: { name: 'page', mode: 'out-in' },
+  },
 })
 ```
 
 ::note
-If you are changing layouts as well as page, the page transition you set here will not run. Instead, you should set a [layout transition](/docs/getting-started/transitions#layout-transitions).
+If you are changing layouts as well as page, the page transition you set here will not run. Instead, you should set a [layout transition](/docs/4.x/getting-started/transitions#layout-transitions).
 ::
 
-To start adding transition between your pages, add the following CSS to your [`app.vue`](/docs/guide/directory-structure/app):
+To start adding transition between your pages, add the following CSS to your [`app.vue`](/docs/4.x/guide/directory-structure/app):
 
 ::code-group
 
@@ -72,7 +72,7 @@ This produces the following result when navigating between pages:
   <source src="https://res.cloudinary.com/nuxt/video/upload/v1665061349/nuxt3/nuxt3-page-transitions_umwvmh.mp4" type="video/mp4">
 </video>
 
-To set a different transition for a page, set the `pageTransition` key in [`definePageMeta`](/docs/api/utils/define-page-meta) of the page:
+To set a different transition for a page, set the `pageTransition` key in [`definePageMeta`](/docs/4.x/api/utils/define-page-meta) of the page:
 
 ::code-group
 
@@ -80,8 +80,8 @@ To set a different transition for a page, set the `pageTransition` key in [`defi
 <script setup lang="ts">
 definePageMeta({
   pageTransition: {
-    name: 'rotate'
-  }
+    name: 'rotate',
+  },
 })
 </script>
 ```
@@ -115,17 +115,17 @@ Moving to the about page will add the 3d rotation effect:
 
 ## Layout Transitions
 
-You can enable layout transitions to apply an automatic transition for all your [layouts](/docs/guide/directory-structure/app/layouts).
+You can enable layout transitions to apply an automatic transition for all your [layouts](/docs/4.x/guide/directory-structure/app/layouts).
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   app: {
-    layoutTransition: { name: 'layout', mode: 'out-in' }
-  }
+    layoutTransition: { name: 'layout', mode: 'out-in' },
+  },
 })
 ```
 
-To start adding transition between your pages and layouts, add the following CSS to your [`app.vue`](/docs/guide/directory-structure/app):
+To start adding transition between your pages and layouts, add the following CSS to your [`app.vue`](/docs/4.x/guide/directory-structure/app):
 
 ::code-group
 
@@ -192,7 +192,7 @@ div {
 ```vue [app/pages/about.vue]
 <script setup lang="ts">
 definePageMeta({
-  layout: 'orange'
+  layout: 'orange',
 })
 </script>
 
@@ -219,8 +219,8 @@ Similar to `pageTransition`, you can apply a custom `layoutTransition` to the pa
 definePageMeta({
   layout: 'orange',
   layoutTransition: {
-    name: 'slide-in'
-  }
+    name: 'slide-in',
+  },
 })
 </script>
 ```
@@ -236,13 +236,13 @@ export default defineNuxtConfig({
   app: {
     pageTransition: {
       name: 'fade',
-      mode: 'out-in' // default
+      mode: 'out-in', // default
     },
     layoutTransition: {
       name: 'slide',
-      mode: 'out-in' // default
-    }
-  }
+      mode: 'out-in', // default
+    },
+  },
 })
 ```
 
@@ -257,8 +257,8 @@ To override the global transition property, use the `definePageMeta` to define p
 definePageMeta({
   pageTransition: {
     name: 'bounce',
-    mode: 'out-in' // default
-  }
+    mode: 'out-in', // default
+  },
 })
 </script>
 ```
@@ -271,7 +271,7 @@ definePageMeta({
 <script setup lang="ts">
 definePageMeta({
   pageTransition: false,
-  layoutTransition: false
+  layoutTransition: false,
 })
 </script>
 ```
@@ -282,8 +282,8 @@ Or globally in the `nuxt.config`:
 export default defineNuxtConfig({
   app: {
     pageTransition: false,
-    layoutTransition: false
-  }
+    layoutTransition: false,
+  },
 })
 ```
 
@@ -303,8 +303,8 @@ definePageMeta({
       console.log('Before enter...')
     },
     onEnter: (el, done) => {},
-    onAfterEnter: (el) => {}
-  }
+    onAfterEnter: (el) => {},
+  },
 })
 </script>
 ```
@@ -315,7 +315,7 @@ Learn more about additional [JavaScript hooks](https://vuejs.org/guide/built-ins
 
 ## Dynamic Transitions
 
-To apply dynamic transitions using conditional logic, you can leverage inline [middleware](/docs/guide/directory-structure/app/middleware) to assign a different transition name to `to.meta.pageTransition`.
+To apply dynamic transitions using conditional logic, you can leverage inline [middleware](/docs/4.x/guide/directory-structure/app/middleware) to assign a different transition name to `to.meta.pageTransition`.
 
 ::code-group
 
@@ -324,12 +324,13 @@ To apply dynamic transitions using conditional logic, you can leverage inline [m
 definePageMeta({
   pageTransition: {
     name: 'slide-right',
-    mode: 'out-in'
+    mode: 'out-in',
   },
   middleware (to, from) {
-    if (to.meta.pageTransition && typeof to.meta.pageTransition !== 'boolean')
+    if (to.meta.pageTransition && typeof to.meta.pageTransition !== 'boolean') {
       to.meta.pageTransition.name = +to.params.id! > +from.params.id! ? 'slide-left' : 'slide-right'
-  }
+    }
+  },
 })
 </script>
 
@@ -398,10 +399,12 @@ When `<NuxtPage />` is used in `app.vue`, transitions can be configured with the
 <template>
   <div>
     <NuxtLayout>
-      <NuxtPage :transition="{
-        name: 'bounce',
-        mode: 'out-in'
-      }" />
+      <NuxtPage
+        :transition="{
+          name: 'bounce',
+          mode: 'out-in',
+        }"
+      />
     </NuxtLayout>
   </div>
 </template>
@@ -415,15 +418,15 @@ Remember, this page transition cannot be overridden with `definePageMeta` on ind
 
 Nuxt ships with an experimental implementation of the [**View Transitions API**](https://developer.chrome.com/docs/web-platform/view-transitions) (see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)). This is an exciting new way to implement native browser transitions which (among other things) have the ability to transition between unrelated elements on different pages.
 
-You can check a demo on https://nuxt-view-transitions.surge.sh and the [source on StackBlitz](https://stackblitz.com/edit/nuxt-view-transitions).
+You can check a demo [on StackBlitz](https://stackblitz.com/edit/nuxt-view-transitions).
 
-The Nuxt integration is under active development, but can be enabled with the `experimental.viewTransition` option in your configuration file:
+The Nuxt integration can be enabled with the `experimental.viewTransition` option in your configuration file:
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    viewTransition: true
-  }
+    viewTransition: true,
+  },
 })
 ```
 
@@ -431,23 +434,23 @@ The possible values are: `false`, `true`, or `'always'`.
 
 If set to true, Nuxt will not apply transitions if the user's browser matches `prefers-reduced-motion: reduce` (recommended). If set to `always`, Nuxt will always apply the transition and it is up to you to respect the user's preference.
 
-By default, view transitions are enabled for all [pages](/docs/guide/directory-structure/app/pages), but you can set a different global default.
+By default, view transitions are enabled for all [pages](/docs/4.x/guide/directory-structure/app/pages), but you can set a different global default.
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   app: {
     // Disable view transitions globally, and opt-in on a per page basis
-    viewTransition: false
+    viewTransition: false,
   },
 })
 ```
 
-It is possible to override the default `viewTransition` value for a page by setting the `viewTransition` key in [`definePageMeta`](/docs/api/utils/define-page-meta) of the page:
+It is possible to override the default `viewTransition` value for a page by setting the `viewTransition` key in [`definePageMeta`](/docs/4.x/api/utils/define-page-meta) of the page:
 
 ```vue twoslash [pages/about.vue]
 <script setup lang="ts">
 definePageMeta({
-  viewTransition: false
+  viewTransition: false,
 })
 </script>
 ```
@@ -459,8 +462,10 @@ Overriding view transitions on a per-page basis will only have an effect if you
 If you are also using Vue transitions like `pageTransition` and `layoutTransition` (see above) to achieve the same result as the new View Transitions API, then you may wish to _disable_ Vue transitions if the user's browser supports the newer, native web API. You can do this by creating `~/middleware/disable-vue-transitions.global.ts` with the following contents:
 
 ```ts
-export default defineNuxtRouteMiddleware(to => {
-  if (import.meta.server || !document.startViewTransition) { return }
+export default defineNuxtRouteMiddleware((to) => {
+  if (import.meta.server || !document.startViewTransition) {
+    return
+  }
 
   // Disable built-in Vue transitions
   to.meta.pageTransition = false