@nuxt/docs 4.1.1 → 4.1.3

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

@@ -12,14 +12,14 @@ We made everything so you can start writing `.vue` files from the beginning whil
 Nuxt has no vendor lock-in, allowing you to deploy your application [**everywhere, even on the edge**](/blog/nuxt-on-the-edge).
 
 ::tip
-If you want to play around with Nuxt in your browser, you can [try it out in one of our online sandboxes](/docs/getting-started/installation#play-online).
+If you want to play around with Nuxt in your browser, you can [try it out in one of our online sandboxes](/docs/4.x/getting-started/installation#play-online).
 ::
 
 ## Automation and Conventions
 
 Nuxt uses conventions and an opinionated directory structure to automate repetitive tasks and allow developers to focus on pushing features. The configuration file can still customize and override its default behaviors.
 
-- **File-based routing:** define routes based on the structure of your [`app/pages/` directory](/docs/guide/directory-structure/app/pages). This can make it easier to organize your application and avoid the need for manual route configuration.
+- **File-based routing:** define routes based on the structure of your [`app/pages/` directory](/docs/4.x/guide/directory-structure/app/pages). This can make it easier to organize your application and avoid the need for manual route configuration.
 - **Code splitting:** Nuxt automatically splits your code into smaller chunks, which can help reduce the initial load time of your application.
 - **Server-side rendering out of the box:** Nuxt comes with built-in SSR capabilities, so you don't have to set up a separate server yourself.
 - **Auto-imports:** write Vue composables and components in their respective directories and use them without having to import them with the benefits of tree-shaking and optimized JS bundles.
@@ -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

@@ -31,6 +31,7 @@ Or follow the steps below to set up a new Nuxt project on your computer.
   - **Node.js**: Make sure to use an even numbered version (18, 20, etc)
   - **Nuxtr**: Install the community-developed [Nuxtr extension](https://marketplace.visualstudio.com/items?itemName=Nuxtr.nuxtr-vscode)
   - **WSL**: If you are using Windows and experience slow HMR, you may want to try using [WSL (Windows Subsystem for Linux)](https://docs.microsoft.com/en-us/windows/wsl/install) which may solve some performance issues.
+  - **Windows slow DNS resolution** - instead of using `localhost:3000` for local dev server on Windows, use `127.0.0.1` for much faster loading experience on browsers.
   ::
 ::
 
@@ -114,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

@@ -4,11 +4,11 @@ description: Nuxt is configured with sensible defaults to make you productive.
 navigation.icon: i-lucide-cog
 ---
 
-By default, Nuxt is configured to cover most use cases. The [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file can override or extend this default configuration.
+By default, Nuxt is configured to cover most use cases. The [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config) file can override or extend this default configuration.
 
 ## Nuxt Configuration
 
-The [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file is located at the root of a Nuxt project and can override or extend the application's behavior.
+The [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config) file is located at the root of a Nuxt project and can override or extend the application's behavior.
 
 A minimal configuration file exports the `defineNuxtConfig` function containing an object with your configuration. The `defineNuxtConfig` helper is globally available without import.
 
@@ -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**.
 ::
 
@@ -36,16 +36,16 @@ You can configure fully typed, per-environment overrides in your nuxt.config
 export default defineNuxtConfig({
   $production: {
     routeRules: {
-      '/**': { isr: true }
-    }
+      '/**': { isr: true },
+    },
   },
   $development: {
     //
   },
   $env: {
     staging: {
-      // 
-    }
+      //
+    },
   },
 })
 ```
@@ -75,9 +75,9 @@ export default defineNuxtConfig({
     apiSecret: '123',
     // Keys within public are also exposed client-side
     public: {
-      apiBase: '/api'
-    }
-  }
+      apiBase: '/api',
+    },
+  },
 })
 ```
 
@@ -88,7 +88,7 @@ NUXT_API_SECRET=api_secret_token
 
 ::
 
-These variables are exposed to the rest of your application using the [`useRuntimeConfig()`](/docs/api/composables/use-runtime-config) composable.
+These variables are exposed to the rest of your application using the [`useRuntimeConfig()`](/docs/4.x/api/composables/use-runtime-config) composable.
 
 ```vue [app/pages/index.vue]
 <script setup lang="ts">
@@ -96,27 +96,27 @@ 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
 
-The `app.config.ts` file, located in the source directory (by default the root of the project), is used to expose public variables that can be determined at build time. Contrary to the `runtimeConfig` option, these cannot be overridden using environment variables.
+The `app.config.ts` file, located in the source directory (by default `app/`), is used to expose public variables that can be determined at build time. Contrary to the `runtimeConfig` option, these cannot be overridden using environment variables.
 
 A minimal configuration file exports the `defineAppConfig` function containing an object with your configuration. The `defineAppConfig` helper is globally available without import.
 
-```ts [app.config.ts]
+```ts [app/app.config.ts]
 export default defineAppConfig({
   title: 'Hello Nuxt',
   theme: {
     dark: true,
     colors: {
-      primary: '#ff0000'
-    }
-  }
+      primary: '#ff0000',
+    },
+  },
 })
 ```
 
-These variables are exposed to the rest of your application using the [`useAppConfig`](/docs/api/composables/use-app-config) composable.
+These variables are exposed to the rest of your application using the [`useAppConfig`](/docs/4.x/api/composables/use-app-config) composable.
 
 ```vue [app/pages/index.vue]
 <script setup lang="ts">
@@ -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`
 
@@ -145,20 +145,20 @@ Non primitive JS types         | ❌ No            | ✅ Yes
 
 ## External Configuration Files
 
-Nuxt uses [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file as the single source of truth for configurations and skips reading external configuration files. During the course of building your project, you may have a need to configure those. The following table highlights common configurations and, where applicable, how they can be configured with Nuxt.
+Nuxt uses [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config) file as the single source of truth for configurations and skips reading external configuration files. During the course of building your project, you may have a need to configure those. The following table highlights common configurations and, where applicable, how they can be configured with Nuxt.
 
 Name                                         | Config File               |  How To Configure
 ---------------------------------------------|---------------------------|-------------------------
-[Nitro](https://nitro.build)               | ~~`nitro.config.ts`~~     | Use [`nitro`](/docs/api/nuxt-config#nitro) key in `nuxt.config`
-[PostCSS](https://postcss.org)               | ~~`postcss.config.js`~~   | Use [`postcss`](/docs/api/nuxt-config#postcss) key in `nuxt.config`
-[Vite](https://vite.dev)                     | ~~`vite.config.ts`~~      | Use [`vite`](/docs/api/nuxt-config#vite) key in `nuxt.config`
-[webpack](https://webpack.js.org)            | ~~`webpack.config.ts`~~   | Use [`webpack`](/docs/api/nuxt-config#webpack-1) key in `nuxt.config`
+[Nitro](https://nitro.build)               | ~~`nitro.config.ts`~~     | Use [`nitro`](/docs/4.x/api/nuxt-config#nitro) key in `nuxt.config`
+[PostCSS](https://postcss.org)               | ~~`postcss.config.js`~~   | Use [`postcss`](/docs/4.x/api/nuxt-config#postcss) key in `nuxt.config`
+[Vite](https://vite.dev)                     | ~~`vite.config.ts`~~      | Use [`vite`](/docs/4.x/api/nuxt-config#vite) key in `nuxt.config`
+[webpack](https://webpack.js.org)            | ~~`webpack.config.ts`~~   | Use [`webpack`](/docs/4.x/api/nuxt-config#webpack-1) key in `nuxt.config`
 
 Here is a list of other common config files:
 
 Name                                         | Config File             | How To Configure
 ---------------------------------------------|-------------------------|--------------------------
-[TypeScript](https://www.typescriptlang.org) | `tsconfig.json`         | [More Info](/docs/guide/concepts/typescript#nuxttsconfigjson)
+[TypeScript](https://www.typescriptlang.org) | `tsconfig.json`         | [More Info](/docs/4.x/guide/directory-structure/tsconfig)
 [ESLint](https://eslint.org)                 | `eslint.config.js`      | [More Info](https://eslint.org/docs/latest/use/configure/configuration-files)
 [Prettier](https://prettier.io)              | `prettier.config.js`    | [More Info](https://prettier.io/docs/en/configuration.html)
 [Stylelint](https://stylelint.io)            | `stylelint.config.js`   | [More Info](https://stylelint.io/user-guide/configure)
@@ -178,16 +178,16 @@ If you need to pass options to `@vitejs/plugin-vue` or `@vitejs/plugin-vue-jsx`,
 export default defineNuxtConfig({
   vite: {
     vue: {
-      customElement: true
+      customElement: true,
     },
     vueJsx: {
-      mergeProps: true
-    }
-  }
+      mergeProps: true,
+    },
+  },
 })
 ```
 
-:read-more{to="/docs/api/configuration/nuxt-config#vue"}
+:read-more{to="/docs/4.x/api/configuration/nuxt-config#vue"}
 
 ### With webpack
 
@@ -199,13 +199,13 @@ export default defineNuxtConfig({
     loaders: {
       vue: {
         hotReload: true,
-      }
-    }
-  }
+      },
+    },
+  },
 })
 ```
 
-:read-more{to="/docs/api/configuration/nuxt-config#loaders"}
+:read-more{to="/docs/4.x/api/configuration/nuxt-config#loaders"}
 
 ### Enabling Experimental Vue Features
 
@@ -214,8 +214,8 @@ You may need to enable experimental features in Vue, such as `propsDestructure`.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   vue: {
-    propsDestructure: true
-  }
+    propsDestructure: true,
+  },
 })
 ```
 
@@ -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

@@ -13,7 +13,7 @@ By default, Nuxt will treat this file as the **entrypoint** and render its conte
 ```vue [app/app.vue]
 <template>
   <div>
-   <h1>Welcome to the homepage</h1>
+    <h1>Welcome to the homepage</h1>
   </div>
 </template>
 ```
@@ -26,7 +26,7 @@ If you are familiar with Vue, you might wonder where `main.js` is (the file that
 
 ![Components are reusable pieces of UI](/assets/docs/getting-started/views/components.svg)
 
-Most components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the [`app/components/`](/docs/guide/directory-structure/app/components) directory, and they will be automatically available across your application without having to explicitly import them.
+Most components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the [`app/components/`](/docs/4.x/guide/directory-structure/app/components) directory, and they will be automatically available across your application without having to explicitly import them.
 
 ::code-group
 
@@ -55,9 +55,9 @@ Most components are reusable pieces of the user interface, like buttons and menu
 
 ![Pages are views tied to a specific route](/assets/docs/getting-started/views/pages.svg)
 
-Pages represent views for each specific route pattern. Every file in the [`app/pages/`](/docs/guide/directory-structure/app/pages) directory represents a different route displaying its content.
+Pages represent views for each specific route pattern. Every file in the [`app/pages/`](/docs/4.x/guide/directory-structure/app/pages) directory represents a different route displaying its content.
 
-To use pages, create an `app/pages/index.vue` file and add `<NuxtPage />` component to the [`app/app.vue`](/docs/guide/directory-structure/app) (or remove `app/app.vue` for default entry). You can now create more pages and their corresponding routes by adding new files in the [`app/pages/`](/docs/guide/directory-structure/app/pages) directory.
+To use pages, create an `app/pages/index.vue` file and add `<NuxtPage />` component to the [`app/app.vue`](/docs/4.x/guide/directory-structure/app) (or remove `app/app.vue` for default entry). You can now create more pages and their corresponding routes by adding new files in the [`app/pages/`](/docs/4.x/guide/directory-structure/app/pages) directory.
 
 ::code-group
 
@@ -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
 
@@ -91,7 +91,7 @@ To use pages, create an `app/pages/index.vue` file and add `<NuxtPage />` compon
 Layouts are wrappers around pages that contain a common User Interface for several pages, such as header and footer displays. Layouts are Vue files using `<slot />` components to display the **page** content. The `app/layouts/default.vue` file will be used by default. Custom layouts can be set as part of your page metadata.
 
 ::note
-If you only have a single layout in your application, we recommend using [`app/app.vue`](/docs/guide/directory-structure/app) with [`<NuxtPage />`](/docs/api/components/nuxt-page) instead.
+If you only have a single layout in your application, we recommend using [`app/app.vue`](/docs/4.x/guide/directory-structure/app) with [`<NuxtPage />`](/docs/4.x/api/components/nuxt-page) instead.
 ::
 
 ::code-group
@@ -137,12 +137,12 @@ If you only have a single layout in your application, we recommend using [`app/a
 
 ::
 
-If you want to create more layouts and learn how to use them in your pages, find more information in the [Layouts section](/docs/guide/directory-structure/app/layouts).
+If you want to create more layouts and learn how to use them in your pages, find more information in the [Layouts section](/docs/4.x/guide/directory-structure/app/layouts).
 
 ## Advanced: Extending the HTML Template
 
 ::note
-If you only need to modify the `<head>`, you can refer to the [SEO and meta section](/docs/getting-started/seo-meta).
+If you only need to modify the `<head>`, you can refer to the [SEO and meta section](/docs/4.x/getting-started/seo-meta).
 ::
 
 You can have full control over the HTML template by adding a Nitro plugin that registers a hook.
@@ -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

@@ -6,14 +6,14 @@ navigation.icon: i-lucide-image
 
 Nuxt uses two directories to handle assets like stylesheets, fonts or images.
 
-- The [`public/`](/docs/guide/directory-structure/public) directory content is served at the server root as-is.
-- The [`app/assets/`](/docs/guide/directory-structure/app/assets) directory contains by convention every asset that you want the build tool (Vite or webpack) to process.
+- The [`public/`](/docs/4.x/guide/directory-structure/public) directory content is served at the server root as-is.
+- The [`app/assets/`](/docs/4.x/guide/directory-structure/app/assets) directory contains by convention every asset that you want the build tool (Vite or webpack) to process.
 
 ## Public Directory
 
-The [`public/`](/docs/guide/directory-structure/public) directory is used as a public server for static assets publicly available at a defined URL of your application.
+The [`public/`](/docs/4.x/guide/directory-structure/public) directory is used as a public server for static assets publicly available at a defined URL of your application.
 
-You can get a file in the [`public/`](/docs/guide/directory-structure/public) directory from your application's code or from a browser by the root URL `/`.
+You can get a file in the [`public/`](/docs/4.x/guide/directory-structure/public) directory from your application's code or from a browser by the root URL `/`.
 
 ### Example
 
@@ -21,7 +21,10 @@ For example, referencing an image file in the `public/img/` directory, available
 
 ```vue [app/app.vue]
 <template>
-  <img src="/img/nuxt.png" alt="Discover Nuxt" />
+  <img
+    src="/img/nuxt.png"
+    alt="Discover Nuxt"
+  >
 </template>
 ```
 
@@ -29,9 +32,9 @@ For example, referencing an image file in the `public/img/` directory, available
 
 Nuxt uses [Vite](https://vite.dev/guide/assets.html) (default) or [webpack](https://webpack.js.org/guides/asset-management) to build and bundle your application. The main function of these build tools is to process JavaScript files, but they can be extended through [plugins](https://vite.dev/plugins) (for Vite) or [loaders](https://webpack.js.org/loaders) (for webpack) to process other kinds of assets, like stylesheets, fonts or SVGs. This step transforms the original file, mainly for performance or caching purposes (such as stylesheet minification or browser cache invalidation).
 
-By convention, Nuxt uses the [`app/assets/`](/docs/guide/directory-structure/app/assets) directory to store these files but there is no auto-scan functionality for this directory, and you can use any other name for it.
+By convention, Nuxt uses the [`app/assets/`](/docs/4.x/guide/directory-structure/app/assets) directory to store these files but there is no auto-scan functionality for this directory, and you can use any other name for it.
 
-In your application's code, you can reference a file located in the [`app/assets/`](/docs/guide/directory-structure/app/assets) directory by using the `~/assets/` path.
+In your application's code, you can reference a file located in the [`app/assets/`](/docs/4.x/guide/directory-structure/app/assets) directory by using the `~/assets/` path.
 
 ### Example
 
@@ -39,10 +42,13 @@ For example, referencing an image file that will be processed if a build tool is
 
 ```vue [app/app.vue]
 <template>
-  <img src="~/assets/img/nuxt.png" alt="Discover Nuxt" />
+  <img
+    src="~/assets/img/nuxt.png"
+    alt="Discover Nuxt"
+  >
 </template>
 ```
 
 ::note
-Nuxt won't serve files in the [`app/assets/`](/docs/guide/directory-structure/app/assets) directory at a static URL like `/assets/my-file.png`. If you need a static URL, use the [`public/`](#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

@@ -9,7 +9,7 @@ You can use CSS preprocessors, CSS frameworks, UI libraries and Nuxt modules to
 
 ## Local Stylesheets
 
-If you're writing local stylesheets, the natural place to put them is the [`app/assets/` directory](/docs/guide/directory-structure/app/assets).
+If you're writing local stylesheets, the natural place to put them is the [`app/assets/` directory](/docs/4.x/guide/directory-structure/app/assets).
 
 ### Importing Within Components
 
@@ -37,11 +37,11 @@ The stylesheets will be inlined in the HTML rendered by Nuxt.
 ### The CSS Property
 
 You can also use the `css` property in the Nuxt configuration.
-The natural place for your stylesheets is the [`app/assets/` directory](/docs/guide/directory-structure/app/assets). You can then reference its path and Nuxt will include it to all the pages of your application.
+The natural place for your stylesheets is the [`app/assets/` directory](/docs/4.x/guide/directory-structure/app/assets). You can then reference its path and Nuxt will include it to all the pages of your application.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
-  css: ['~/assets/css/main.css']
+  css: ['~/assets/css/main.css'],
 })
 ```
 
@@ -113,7 +113,7 @@ The package can also be referenced as a string in the css property of your Nuxt
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
-  css: ['animate.css']
+  css: ['animate.css'],
 })
 ```
 
@@ -121,15 +121,15 @@ export default defineNuxtConfig({
 
 You can include external stylesheets in your application by adding a link element in the head section of your nuxt.config file. You can achieve this result using different methods. Note that local stylesheets can also be included this way.
 
-You can manipulate the head with the [`app.head`](/docs/api/nuxt-config#head) property of your Nuxt configuration:
+You can manipulate the head with the [`app.head`](/docs/4.x/api/nuxt-config#head) property of your Nuxt configuration:
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   app: {
     head: {
-      link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]
-    }
-  }
+      link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }],
+    },
+  },
 })
 ```
 
@@ -137,11 +137,11 @@ 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({
-  link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]
+  link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }],
 })
 ```
 
@@ -198,7 +198,7 @@ Alternatively, you can use the `css` property of your Nuxt configuration.
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
-  css: ['~/assets/scss/main.scss']
+  css: ['~/assets/scss/main.scss'],
 })
 ```
 
@@ -234,11 +234,11 @@ export default defineNuxtConfig({
     css: {
       preprocessorOptions: {
         scss: {
-          additionalData: '@use "~/assets/_colors.scss" as *;'
-        }
-      }
-    }
-  }
+          additionalData: '@use "~/assets/_colors.scss" as *;',
+        },
+      },
+    },
+  },
 })
 ```
 
@@ -248,11 +248,11 @@ export default defineNuxtConfig({
     css: {
       preprocessorOptions: {
         sass: {
-          additionalData: '@use "~/assets/_colors.sass" as *\n'
-        }
-      }
-    }
-  }
+          additionalData: '@use "~/assets/_colors.sass" as *\n',
+        },
+      },
+    },
+  },
 })
 ```
 
@@ -267,13 +267,12 @@ Vite has made available an [experimental option](https://vite.dev/config/shared-
 You can enable this in your `nuxt.config`:
 
 ```ts
-
 export default defineNuxtConfig({
   vite: {
     css: {
-      preprocessorMaxWorkers: true // number of CPUs minus 1
-    }
-  }
+      preprocessorMaxWorkers: true, // number of CPUs minus 1
+    },
+  },
 })
 ```
 
@@ -298,14 +297,17 @@ You can leverage Vue SFC features to style your components with class and style
 const isActive = ref(true)
 const hasError = ref(false)
 const classObject = reactive({
-  active: true,
-  'text-danger': false
+  'active': true,
+  'text-danger': false,
 })
 </script>
 
 <template>
-  <div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
-  <div :class="classObject"></div>
+  <div
+    class="static"
+    :class="{ 'active': isActive, 'text-danger': hasError }"
+  />
+  <div :class="classObject" />
 </template>
 ```
 
@@ -315,13 +317,13 @@ const isActive = ref(true)
 const error = ref(null)
 
 const classObject = computed(() => ({
-  active: isActive.value && !error.value,
-  'text-danger': error.value && error.value.type === 'fatal'
+  'active': isActive.value && !error.value,
+  'text-danger': error.value && error.value.type === 'fatal',
 }))
 </script>
 
 <template>
-  <div :class="classObject"></div>
+  <div :class="classObject" />
 </template>
 ```
 
@@ -332,7 +334,7 @@ const errorClass = ref('text-danger')
 </script>
 
 <template>
-  <div :class="[{ active: isActive }, errorClass]"></div>
+  <div :class="[{ active: isActive }, errorClass]" />
 </template>
 ```
 
@@ -344,9 +346,9 @@ const styleObject = reactive({ color: 'red', fontSize: '13px' })
 </script>
 
 <template>
-  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
-  <div :style="[baseStyles, overridingStyles]"></div>
-  <div :style="styleObject"></div>
+  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }" />
+  <div :style="[baseStyles, overridingStyles]" />
+  <div :style="styleObject" />
 </template>
 ```
 
@@ -361,11 +363,13 @@ The binding will be dynamic, meaning that if the variable value changes, the sty
 
 ```vue
 <script setup lang="ts">
-const color = ref("red")
+const color = ref('red')
 </script>
 
 <template>
-  <div class="text">hello</div>
+  <div class="text">
+    hello
+  </div>
 </template>
 
 <style>
@@ -381,7 +385,9 @@ The scoped attribute allows you to style components in isolation. The styles dec
 
 ```vue
 <template>
-  <div class="example">hi</div>
+  <div class="example">
+    hi
+  </div>
 </template>
 
 <style scoped>
@@ -397,7 +403,9 @@ You can use [CSS Modules](https://github.com/css-modules/css-modules) with the m
 
 ```vue
 <template>
-  <p :class="$style.red">This should be red</p>
+  <p :class="$style.red">
+    This should be red
+  </p>
 </template>
 
 <style module>
@@ -451,9 +459,9 @@ export default defineNuxtConfig({
   postcss: {
     plugins: {
       'postcss-nested': {},
-      'postcss-custom-media': {}
-    }
-  }
+      'postcss-custom-media': {},
+    },
+  },
 })
 ```
 
@@ -492,7 +500,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
 
@@ -509,7 +517,7 @@ Here are a few modules to help you get started:
 - [Nuxt UI](https://ui.nuxt.com): A UI Library for Modern Web Apps
 - [Panda CSS](https://panda-css.com/docs/installation/nuxt): CSS-in-JS engine that generates atomic CSS at build time
 
-Nuxt modules provide you with a good developer experience out of the box, but remember that if your favorite tool doesn't have a module, it doesn't mean that you can't use it with Nuxt! You can configure it yourself for your own project. Depending on the tool, you might need to use a [Nuxt plugin](/docs/guide/directory-structure/plugins) and/or [make your own module](/docs/guide/going-further/modules). Share them with the [community](/modules) if you do!
+Nuxt modules provide you with a good developer experience out of the box, but remember that if your favorite tool doesn't have a module, it doesn't mean that you can't use it with Nuxt! You can configure it yourself for your own project. Depending on the tool, you might need to use a [Nuxt plugin](/docs/4.x/guide/directory-structure/plugins) and/or [make your own module](/docs/4.x/guide/going-further/modules). Share them with the [community](/modules) if you do!
 
 ### Easily Load Webfonts
 
@@ -521,9 +529,9 @@ If you are using [UnoCSS](https://unocss.dev/integrations/nuxt), note that it co
 
 ### Transitions
 
-Nuxt comes with the same `<Transition>` element that Vue has, and also has support for the experimental [View Transitions API](/docs/getting-started/transitions#view-transitions-api-experimental).
+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
 
@@ -558,7 +566,9 @@ export default defineNuxtConfig({
         // start from the end of the array and go to the beginning
         for (let i = css.length - 1; i >= 0; i--) {
           // if it starts with 'entry', remove it from the list
-          if (css[i].startsWith('entry')) css.splice(i, 1)
+          if (css[i].startsWith('entry')) {
+            css.splice(i, 1)
+          }
         }
       }
     },