@nuxt/docs 3.20.2 → 3.21.1

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/3.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/3.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/3.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/3.x/guide/concepts/modules"}
 
 ### Architecture
 

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

@@ -17,9 +17,7 @@ Or follow the steps below to set up a new Nuxt project on your computer.
 
 ## New Project
 
-<!-- TODO: need to fix upstream in nuxt/nuxt.com -->
-<!-- markdownlint-disable-next-line MD001 -->
-#### Prerequisites
+### Prerequisites
 
 - **Node.js** - [`20.x`](https://nodejs.org/en) or newer (but we recommend the [active LTS release](https://github.com/nodejs/release#release-schedule))
 - **Text editor** - There is no IDE requirement, but we recommend [Visual Studio Code](https://code.visualstudio.com/) with the [official Vue extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously known as Volar) or [WebStorm](https://www.jetbrains.com/webstorm/), which, along with [other JetBrains IDEs](https://www.jetbrains.com/ides/), offers great Nuxt support right out-of-the-box.
@@ -29,13 +27,12 @@ Or follow the steps below to set up a new Nuxt project on your computer.
   ::details
   :summary[Additional notes for an optimal setup:]
   - **Node.js**: Make sure to use an even numbered version (20, 22, 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://learn.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.
   ::
 ::
 
-Open a terminal (if you're using [Visual Studio Code](https://code.visualstudio.com), you can open an [integrated terminal](https://code.visualstudio.com/docs/editor/integrated-terminal)) and use the following command to create a new starter project:
+Open a terminal (if you're using [Visual Studio Code](https://code.visualstudio.com), you can open an [integrated terminal](https://code.visualstudio.com/docs/terminal/basics)) and use the following command to create a new starter project:
 
 ::code-group{sync="pm"}
 
@@ -44,7 +41,7 @@ npm create nuxt@latest <project-name> -- -t v3
 ```
 
 ```bash [yarn]
-yarn create nuxt@latest <project-name> -t v3
+yarn create nuxt <project-name> -t v3
 ```
 
 ```bash [pnpm]
@@ -115,4 +112,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/3.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/3.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/3.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/3.x/directory-structure/app-config"}
 
 ## `runtimeConfig` vs. `app.config`
 
@@ -133,37 +133,37 @@ As stated above, `runtimeConfig` and `app.config` are both used to expose variab
 - `runtimeConfig`: Private or public tokens that need to be specified after build using environment variables.
 - `app.config`: Public tokens that are determined at build time, website configuration such as theme variant, title and any project config that are not sensitive.
 
-Feature                        | `runtimeConfig`  | `app.config`
--------------------------------|------------------|-------------------
-Client Side                    | Hydrated         | Bundled
-Environment Variables          | ✅ Yes           | ❌ No
-Reactive                       | ✅ Yes           | ✅ Yes
-Types support                  | ✅ Partial       | ✅ Yes
-Configuration per Request      | ❌ No            | ✅ Yes
-Hot Module Replacement         | ❌ No            | ✅ Yes
-Non primitive JS types         | ❌ No            | ✅ Yes
+| Feature                   | `runtimeConfig` | `app.config` |
+|---------------------------|-----------------|--------------|
+| Client-side               | Hydrated        | Bundled      |
+| Environment variables     | ✅ Yes           | ❌ No         |
+| Reactive                  | ✅ Yes           | ✅ Yes        |
+| Types support             | ✅ Partial       | ✅ Yes        |
+| Configuration per request | ❌ No            | ✅ Yes        |
+| Hot module replacement    | ❌ No            | ✅ Yes        |
+| Non-primitive JS types    | ❌ No            | ✅ Yes        |
 
 ## External Configuration Files
 
 Nuxt uses [`nuxt.config.ts`](/docs/3.x/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/3.x/api/nuxt-config#nitro) key in `nuxt.config`
-[PostCSS](https://postcss.org)               | ~~`postcss.config.js`~~   | Use [`postcss`](/docs/3.x/api/nuxt-config#postcss) key in `nuxt.config`
-[Vite](https://vite.dev)                     | ~~`vite.config.ts`~~      | Use [`vite`](/docs/3.x/api/nuxt-config#vite) key in `nuxt.config`
-[webpack](https://webpack.js.org)            | ~~`webpack.config.ts`~~   | Use [`webpack`](/docs/3.x/api/nuxt-config#webpack-1) key in `nuxt.config`
+| Name                              | Config File             | How To Configure                                                          |
+|-----------------------------------|-------------------------|---------------------------------------------------------------------------|
+| [Nitro](https://nitro.build)      | ~~`nitro.config.ts`~~   | Use [`nitro`](/docs/3.x/api/nuxt-config#nitro) key in `nuxt.config`       |
+| [PostCSS](https://postcss.org)    | ~~`postcss.config.js`~~ | Use [`postcss`](/docs/3.x/api/nuxt-config#postcss) key in `nuxt.config`   |
+| [Vite](https://vite.dev)          | ~~`vite.config.ts`~~    | Use [`vite`](/docs/3.x/api/nuxt-config#vite) key in `nuxt.config`         |
+| [webpack](https://webpack.js.org) | ~~`webpack.config.ts`~~ | Use [`webpack`](/docs/3.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/3.x/guide/concepts/typescript#nuxttsconfigjson)
-[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)
-[TailwindCSS](https://tailwindcss.com)       | `tailwind.config.js`    | [More Info](https://tailwindcss.nuxtjs.org/tailwindcss/configuration)
-[Vitest](https://vitest.dev)                 | `vitest.config.ts`      | [More Info](https://vitest.dev/config/)
+| Name                                         | Config File           | How To Configure                                                              |
+|----------------------------------------------|-----------------------|-------------------------------------------------------------------------------|
+| [TypeScript](https://www.typescriptlang.org) | `tsconfig.json`       | [More Info](/docs/3.x/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/configuration.html)                      |
+| [Stylelint](https://stylelint.io)            | `stylelint.config.js` | [More Info](https://stylelint.io/user-guide/configure/)                       |
+| [TailwindCSS](https://tailwindcss.com)       | `tailwind.config.js`  | [More Info](https://tailwindcss.nuxtjs.org/tailwindcss/configuration/)        |
+| [Vitest](https://vitest.dev)                 | `vitest.config.ts`    | [More Info](https://vitest.dev/config/)                                       |
 
 ## Vue Configuration
 
@@ -187,7 +187,7 @@ export default defineNuxtConfig({
 })
 ```
 
-:read-more{to="/docs/api/configuration/nuxt-config#vue"}
+:read-more{to="/docs/3.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/3.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/3.x/api/configuration/nuxt-config#vue-1"}

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

@@ -57,7 +57,7 @@ Most components are reusable pieces of the user interface, like buttons and menu
 
 Pages represent views for each specific route pattern. Every file in the [`pages/`](/docs/3.x/directory-structure/pages) directory represents a different route displaying its content.
 
-To use pages, create `pages/index.vue` file and add `<NuxtPage />` component to the [`app.vue`](/docs/3.x/directory-structure/app) (or remove `app.vue` for default entry). You can now create more pages and their corresponding routes by adding new files in the [`pages/`](/docs/3.x/directory-structure/pages) directory.
+To use pages, create an `pages/index.vue` file and add `<NuxtPage />` component to the [`app.vue`](/docs/3.x/directory-structure/app) (or remove `app.vue` for default entry). You can now create more pages and their corresponding routes by adding new files in the [`pages/`](/docs/3.x/directory-structure/pages) directory.
 
 ::code-group
 
@@ -82,7 +82,7 @@ To use pages, create `pages/index.vue` file and add `<NuxtPage />` component to
 
 ::
 
-:read-more{title="Routing Section" to="/docs/getting-started/routing"}
+:read-more{title="Routing Section" to="/docs/3.x/getting-started/routing"}
 
 ## Layouts
 
@@ -148,7 +148,9 @@ If you only need to modify the `<head>`, you can refer to the [SEO and meta sect
 You can have full control over the HTML template by adding a Nitro plugin that registers a hook.
 The callback function of the `render:html` hook allows you to mutate the HTML before it is sent to the client.
 
-```ts twoslash [server/plugins/extend-html.ts]
+<!-- TODO: figure out how to use twoslash to inject types for a different context -->
+
+```ts [server/plugins/extend-html.ts]
 export default defineNitroPlugin((nitroApp) => {
   nitroApp.hooks.hook('render:html', (html, { event }) => {
     // This will be an object representation of the html template.
@@ -160,4 +162,4 @@ export default defineNitroPlugin((nitroApp) => {
 })
 ```
 
-:read-more{to="/docs/guide/going-further/hooks"}
+:read-more{to="/docs/3.x/guide/going-further/hooks"}

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

@@ -30,7 +30,7 @@ For example, referencing an image file in the `public/img/` directory, available
 
 ## Assets Directory
 
-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).
+Nuxt uses [Vite](https://vite.dev/guide/assets) (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 [`assets/`](/docs/3.x/directory-structure/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.
 
@@ -50,5 +50,5 @@ For example, referencing an image file that will be processed if a build tool is
 ```
 
 ::note
-Nuxt won't serve files in the [`assets/`](/docs/3.x/directory-structure/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 [`assets/`](/docs/3.x/directory-structure/assets) directory at a static URL like `/assets/my-file.png`. If you need a static URL, use the [`public/`](/docs/3.x/getting-started/assets#public-directory) directory.
 ::

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

@@ -14,7 +14,7 @@ If you're writing local stylesheets, the natural place to put them is the [`asse
 ### Importing Within Components
 
 You can import stylesheets in your pages, layouts and components directly.
-You can use a JavaScript import, or a CSS [`@import` statement](https://developer.mozilla.org/en-US/docs/Web/CSS/@import).
+You can use a JavaScript import, or a CSS [`@import` statement](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@import).
 
 ```vue [pages/index.vue]
 <script>
@@ -95,6 +95,10 @@ pnpm install animate.css
 bun install animate.css
 ```
 
+```bash [deno]
+deno install npm:animate.css
+```
+
 ::
 
 Then you can reference it directly in your pages, layouts and components:
@@ -137,7 +141,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/3.x/api/composables/use-head"}
 
 ```ts twoslash
 useHead({
@@ -153,7 +157,9 @@ If you need more advanced control, you can intercept the rendered html with a ho
 
 Create a plugin in `~/server/plugins/my-plugin.ts` like this:
 
-```ts twoslash [server/plugins/my-plugin.ts]
+<!-- TODO: figure out how to use twoslash to inject types for a different context -->
+
+```ts [server/plugins/my-plugin.ts]
 export default defineNitroPlugin((nitro) => {
   nitro.hooks.hook('render:html', (html) => {
     html.head.push('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">')
@@ -161,7 +167,7 @@ export default defineNitroPlugin((nitro) => {
 })
 ```
 
-External stylesheets are render-blocking resources: they must be loaded and processed before the browser renders the page. Web pages that contain unnecessarily large styles take longer to render. You can read more about it on [web.dev](https://web.dev/defer-non-critical-css).
+External stylesheets are render-blocking resources: they must be loaded and processed before the browser renders the page. Web pages that contain unnecessarily large styles take longer to render. You can read more about it on [web.dev](https://web.dev/articles/defer-non-critical-css).
 
 ## Using Preprocessors
 
@@ -204,7 +210,7 @@ export default defineNuxtConfig({
 In both cases, the compiled stylesheets will be inlined in the HTML rendered by Nuxt.
 ::
 
-If you need to inject code in pre-processed files, like a [Sass partial](https://sass-lang.com/documentation/at-rules/use#partials) with color variables, you can do so with the Vite [preprocessors options](https://vite.dev/config/shared-options.html#css-preprocessoroptions).
+If you need to inject code in pre-processed files, like a [Sass partial](https://sass-lang.com/documentation/at-rules/use/#partials) with color variables, you can do so with the Vite [preprocessors options](https://vite.dev/config/shared-options#css-preprocessoroptions).
 
 Create some partials in your `assets` directory:
 
@@ -256,11 +262,11 @@ export default defineNuxtConfig({
 
 ::
 
-Nuxt uses Vite by default. If you wish to use webpack instead, refer to each preprocessor loader [documentation](https://webpack.js.org/loaders/sass-loader).
+Nuxt uses Vite by default. If you wish to use webpack instead, refer to each preprocessor loader [documentation](https://webpack.js.org/loaders/sass-loader/).
 
 ### Preprocessor Workers (Experimental)
 
-Vite has made available an [experimental option](https://vite.dev/config/shared-options.html#css-preprocessormaxworkers) which can speed up using preprocessors.
+Vite has made available an [experimental option](https://vite.dev/config/shared-options#css-preprocessormaxworkers) which can speed up using preprocessors.
 
 You can enable this in your `nuxt.config`:
 
@@ -282,7 +288,7 @@ This is an experimental option and you should refer to the Vite documentation an
 
 One of the best things about Vue and SFC is how great it is at naturally dealing with styling. You can directly write CSS or preprocessor code in the style block of your components file, therefore you will have fantastic developer experience without having to use something like CSS-in-JS. However if you wish to use CSS-in-JS, you can find 3rd party libraries and modules that support it, such as [pinceau](https://github.com/Tahul/pinceau).
 
-You can refer to the [Vue docs](https://vuejs.org/api/sfc-css-features.html) for a comprehensive reference about styling components in SFC.
+You can refer to the [Vue docs](https://vuejs.org/api/sfc-css-features) for a comprehensive reference about styling components in SFC.
 
 ### Class And Style Bindings
 
@@ -352,7 +358,7 @@ const styleObject = reactive({ color: 'red', fontSize: '13px' })
 
 ::
 
-Refer to the [Vue docs](https://vuejs.org/guide/essentials/class-and-style.html) for more information.
+Refer to the [Vue docs](https://vuejs.org/guide/essentials/class-and-style) for more information.
 
 ### Dynamic Styles With `v-bind`
 
@@ -445,7 +451,7 @@ SFC style blocks support preprocessor syntax. Vite comes with built-in support f
 
 ::
 
-You can refer to the [Vite CSS docs](https://vite.dev/guide/features.html#css) and the [@vitejs/plugin-vue docs](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue).
+You can refer to the [Vite CSS docs](https://vite.dev/guide/features#css) and the [@vitejs/plugin-vue docs](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue).
 For webpack users, refer to the [vue loader docs](https://vue-loader.vuejs.org).
 
 ## Using PostCSS
@@ -476,7 +482,7 @@ By default, Nuxt comes with the following plugins already pre-configured:
 - [postcss-import](https://github.com/postcss/postcss-import): Improves the `@import` rule
 - [postcss-url](https://github.com/postcss/postcss-url): Transforms `url()` statements
 - [autoprefixer](https://github.com/postcss/autoprefixer): Automatically adds vendor prefixes
-- [cssnano](https://cssnano.github.io/cssnano): Minification and purge
+- [cssnano](https://cssnano.github.io/cssnano/): Minification and purge
 
 ## Leveraging Layouts For Multiple Styles
 
@@ -498,7 +504,7 @@ Use different styles for different layouts.
 </style>
 ```
 
-:read-more{to="/docs/guide/directory-structure/layouts"}
+:read-more{to="/docs/3.x/directory-structure/layouts"}
 
 ## Third Party Libraries And Modules
 
@@ -515,7 +521,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/3.x/directory-structure/plugins) and/or [make your own module](/docs/3.x/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/3.x/directory-structure/plugins) and/or [make your own module](/docs/3.x/guide/modules). Share them with the [community](/modules) if you do!
 
 ### Easily Load Webfonts
 
@@ -529,11 +535,11 @@ 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/3.x/getting-started/transitions#view-transitions-api-experimental).
 
-:read-more{to="/docs/getting-started/transitions"}
+:read-more{to="/docs/3.x/getting-started/transitions"}
 
 ### Font Advanced Optimization
 
-We would recommend using [Fontaine](https://github.com/nuxt-modules/fontaine) to reduce your [CLS](https://web.dev/cls). If you need something more advanced, consider creating a Nuxt module to extend the build process or the Nuxt runtime.
+We would recommend using [Fontaine](https://github.com/nuxt-modules/fontaine) to reduce your [CLS](https://web.dev/articles/cls). If you need something more advanced, consider creating a Nuxt module to extend the build process or the Nuxt runtime.
 
 ::tip
 Always remember to take advantage of the various tools and techniques available in the Web ecosystem at large to make styling your application easier and more efficient. Whether you're using native CSS, a preprocessor, postcss, a UI library or a module, Nuxt has got you covered. Happy styling!
@@ -549,7 +555,7 @@ You can do the following to speed-up the download of your global CSS files:
 - Host your assets on the same domain (do not use a different subdomain)
 
 Most of these things should be done for you automatically if you're using modern platforms like Cloudflare, Netlify or Vercel.
-You can find an LCP optimization guide on [web.dev](https://web.dev/optimize-lcp).
+You can find an LCP optimization guide on [web.dev](https://web.dev/articles/optimize-lcp).
 
 If all of your CSS is inlined by Nuxt, you can (experimentally) completely stop external CSS files from being referenced in your rendered HTML.
 You can achieve that with a hook, that you can place in a module, or in your Nuxt configuration file.

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/pages"}
+:read-more{to="/docs/3.x/directory-structure/pages"}
 
 ## Navigation
 
@@ -65,7 +65,7 @@ When a [`<NuxtLink>`](/docs/3.x/api/components/nuxt-link) enters the viewport on
 </template>
 ```
 
-:read-more{to="/docs/api/components/nuxt-link"}
+:read-more{to="/docs/3.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/3.x/api/composables/use-route"}
 
 ## Route Middleware
 
@@ -129,13 +129,13 @@ definePageMeta({
 
 ::
 
-:read-more{to="/docs/guide/directory-structure/middleware"}
+:read-more{to="/docs/3.x/directory-structure/middleware"}
 
 ## Route Validation
 
 Nuxt offers route validation via the `validate` property in [`definePageMeta()`](/docs/3.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.
+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 `status`/`statusText` to customize the error returned.
 
 If you have a more complex use case, then you can use anonymous route middleware instead.
 
@@ -150,4 +150,4 @@ definePageMeta({
 </script>
 ```
 
-:read-more{to="/docs/api/utils/define-page-meta"}
+:read-more{to="/docs/3.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](#types).
+You can also provide any of the keys listed below in [Types](/docs/3.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/3.x/api/composables/use-seo-meta"}
 
 ## Components
 
@@ -134,6 +134,10 @@ const title = ref('Hello World')
 
 It's suggested to wrap your components in either a `<Head>` or `<Html>` components as tags will be deduped more intuitively.
 
+::warning
+If you need to duplicate tags across client-server boundaries, apply a `key` attribute on the `<Head>` component.
+::
+
 ## Types
 
 Below are the non-reactive types used for [`useHead`](/docs/3.x/api/composables/use-head), [`app.head`](/docs/3.x/api/nuxt-config#head) and components.
@@ -297,9 +301,9 @@ useHead({
 </script>
 ```
 
-:link-example{to="/docs/examples/features/meta-tags"}
+:link-example{to="/docs/3.x/examples/features/meta-tags"}
 
-:read-more{to="/docs/guide/directory-structure/pages/#page-metadata"}
+:read-more{to="/docs/3.x/directory-structure/pages/#page-metadata"}
 
 ### Dynamic Title
 

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

@@ -5,7 +5,7 @@ navigation.icon: i-lucide-toggle-right
 ---
 
 ::note
-Nuxt leverages Vue's [`<Transition>`](https://vuejs.org/guide/built-ins/transition.html#the-transition-component) component to apply transitions between pages and layouts.
+Nuxt leverages Vue's [`<Transition>`](https://vuejs.org/guide/built-ins/transition#the-transition-component) component to apply transitions between pages and layouts.
 ::
 
 ## Page Transitions
@@ -229,7 +229,7 @@ definePageMeta({
 
 You can customize these default transition names globally using `nuxt.config`.
 
-Both `pageTransition` and `layoutTransition` keys accept [`TransitionProps`](https://vuejs.org/api/built-in-components.html#transition) as JSON serializable values where you can pass the `name`, `mode` and other valid transition-props of the custom CSS transition.
+Both `pageTransition` and `layoutTransition` keys accept [`TransitionProps`](https://vuejs.org/api/built-in-components#transition) as JSON serializable values where you can pass the `name`, `mode` and other valid transition-props of the custom CSS transition.
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -310,7 +310,7 @@ definePageMeta({
 ```
 
 ::tip
-Learn more about additional [JavaScript hooks](https://vuejs.org/guide/built-ins/transition.html#javascript-hooks) available in the `Transition` component.
+Learn more about additional [JavaScript hooks](https://vuejs.org/guide/built-ins/transition#javascript-hooks) available in the `Transition` component.
 ::
 
 ## Dynamic Transitions
@@ -416,11 +416,11 @@ Remember, this page transition cannot be overridden with `definePageMeta` on ind
 
 ## View Transitions API (experimental)
 
-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.
+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_Transition_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({