@nuxt/docs-nightly 4.3.0-29356103.2f7957ac → 4.3.0-29430576.f48ea4c8

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

@@ -19,7 +19,7 @@ If you want to play around with Nuxt in your browser, you can [try it out in one
 
 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/4.x/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/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.

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.
@@ -30,12 +28,12 @@ Or follow the steps below to set up a new Nuxt project on your computer.
   :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://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.
+  - **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"}
 

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/4.x/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/directory-structure/nuxt-config) file can override or extend this default configuration.
 
 ## Nuxt Configuration
 
-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.
+The [`nuxt.config.ts`](/docs/4.x/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.
 
@@ -124,7 +124,7 @@ const appConfig = useAppConfig()
 </script>
 ```
 
-:read-more{to="/docs/4.x/guide/directory-structure/app-config"}
+:read-more{to="/docs/4.x/directory-structure/app/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/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.
+Nuxt uses [`nuxt.config.ts`](/docs/4.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/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`
+| Name                              | Config File             | How To Configure                                                          |
+|-----------------------------------|-------------------------|---------------------------------------------------------------------------|
+| [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/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)
-[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/4.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
 

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

@@ -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/4.x/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/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/4.x/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/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/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.
+To use pages, create an `app/pages/index.vue` file and add `<NuxtPage />` component to the [`app/app.vue`](/docs/4.x/directory-structure/app/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/directory-structure/app/pages) directory.
 
 ::code-group
 
@@ -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/4.x/guide/directory-structure/app) with [`<NuxtPage />`](/docs/4.x/api/components/nuxt-page) instead.
+If you only have a single layout in your application, we recommend using [`app/app.vue`](/docs/4.x/directory-structure/app/app) with [`<NuxtPage />`](/docs/4.x/api/components/nuxt-page) instead.
 ::
 
 ::code-group
@@ -137,7 +137,7 @@ 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/4.x/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/directory-structure/app/layouts).
 
 ## Advanced: Extending the HTML Template
 

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/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.
+- The [`public/`](/docs/4.x/directory-structure/public) directory content is served at the server root as-is.
+- The [`app/assets/`](/docs/4.x/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/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.
+The [`public/`](/docs/4.x/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/4.x/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/directory-structure/public) directory from your application's code or from a browser by the root URL `/`.
 
 ### Example
 
@@ -30,11 +30,11 @@ 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 [`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.
+By convention, Nuxt uses the [`app/assets/`](/docs/4.x/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/4.x/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/directory-structure/app/assets) directory by using the `~/assets/` path.
 
 ### Example
 
@@ -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 [`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.
+Nuxt won't serve files in the [`app/assets/`](/docs/4.x/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,12 +9,12 @@ 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/4.x/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/directory-structure/app/assets).
 
 ### 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 [app/pages/index.vue]
 <script>
@@ -37,7 +37,7 @@ 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/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.
+The natural place for your stylesheets is the [`app/assets/` directory](/docs/4.x/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({
@@ -163,7 +163,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
 
@@ -206,7 +206,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 `app/assets` directory:
 
@@ -258,11 +258,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`:
 
@@ -284,7 +284,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
 
@@ -354,7 +354,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`
 
@@ -447,7 +447,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
@@ -478,7 +478,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
 
@@ -500,7 +500,7 @@ Use different styles for different layouts.
 </style>
 ```
 
-:read-more{to="/docs/4.x/guide/directory-structure/app/layouts"}
+:read-more{to="/docs/4.x/directory-structure/app/layouts"}
 
 ## Third Party Libraries And Modules
 
@@ -517,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/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!
+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/directory-structure/app/plugins) and/or [make your own module](/docs/4.x/guide/modules). Share them with the [community](/modules) if you do!
 
 ### Easily Load Webfonts
 
@@ -535,7 +535,7 @@ Nuxt comes with the same `<Transition>` element that Vue has, and also has suppo
 
 ### 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!
@@ -551,7 +551,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

@@ -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/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.
+One core feature of Nuxt is the file system router. Every Vue file inside the [`app/pages/`](/docs/4.x/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/4.x/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/directory-structure/app/pages), based on their filename.
 
 This file system routing uses naming conventions to create dynamic and nested routes:
 
@@ -43,7 +43,7 @@ This file system routing uses naming conventions to create dynamic and nested ro
 
 ::
 
-:read-more{to="/docs/4.x/guide/directory-structure/app/pages"}
+:read-more{to="/docs/4.x/directory-structure/app/pages"}
 
 ## Navigation
 
@@ -90,11 +90,15 @@ Nuxt provides a customizable route middleware framework you can use throughout y
 Route middleware runs within the Vue part of your Nuxt app. Despite the similar name, they are completely different from server middleware, which are run in the Nitro server part of your app.
 ::
 
+::important
+Route middleware does **not** run for server routes (e.g. `/api/*`) or other server requests. To apply middleware to these requests, use [server middleware](/docs/4.x/directory-structure/server#server-middleware) instead.
+::
+
 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/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.
+2. Named route middleware, which are placed in the [`app/middleware/`](/docs/4.x/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/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:
 
@@ -125,7 +129,7 @@ definePageMeta({
 
 ::
 
-:read-more{to="/docs/4.x/guide/directory-structure/app/middleware"}
+:read-more{to="/docs/4.x/directory-structure/app/middleware"}
 
 ## Route Validation
 

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/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.
+Providing an [`app.head`](/docs/4.x/api/nuxt-config#head) property in your [`nuxt.config.ts`](/docs/4.x/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`.
@@ -273,7 +273,7 @@ useHead({
 
 ### With `definePageMeta`
 
-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.
+Within your [`app/pages/` directory](/docs/4.x/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):
 
@@ -299,7 +299,7 @@ useHead({
 
 :link-example{to="/docs/4.x/examples/features/meta-tags"}
 
-:read-more{to="/docs/4.x/guide/directory-structure/app/pages/#page-metadata"}
+:read-more{to="/docs/4.x/directory-structure/app/pages/#page-metadata"}
 
 ### Dynamic Title
 

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

@@ -5,12 +5,12 @@ 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
 
-You can enable page transitions to apply an automatic transition for all your [pages](/docs/4.x/guide/directory-structure/app/pages).
+You can enable page transitions to apply an automatic transition for all your [pages](/docs/4.x/directory-structure/app/pages).
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -24,7 +24,7 @@ export default defineNuxtConfig({
 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/4.x/guide/directory-structure/app):
+To start adding transition between your pages, add the following CSS to your [`app.vue`](/docs/4.x/directory-structure/app/app):
 
 ::code-group
 
@@ -115,7 +115,7 @@ 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/4.x/guide/directory-structure/app/layouts).
+You can enable layout transitions to apply an automatic transition for all your [layouts](/docs/4.x/directory-structure/app/layouts).
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -125,7 +125,7 @@ export default defineNuxtConfig({
 })
 ```
 
-To start adding transition between your pages and layouts, add the following CSS to your [`app.vue`](/docs/4.x/guide/directory-structure/app):
+To start adding transition between your pages and layouts, add the following CSS to your [`app.vue`](/docs/4.x/directory-structure/app/app):
 
 ::code-group
 
@@ -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,12 +310,12 @@ 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
 
-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`.
+To apply dynamic transitions using conditional logic, you can leverage inline [middleware](/docs/4.x/directory-structure/app/middleware) to assign a different transition name to `to.meta.pageTransition`.
 
 ::code-group
 
@@ -416,7 +416,7 @@ 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 StackBlitz](https://stackblitz.com/edit/nuxt-view-transitions).
 
@@ -434,7 +434,7 @@ 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/4.x/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/directory-structure/app/pages), but you can set a different global default.
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({

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

@@ -194,10 +194,10 @@ The `useAsyncData` composable is a great way to wrap and wait for multiple `$fet
 
 ```vue
 <script setup lang="ts">
-const { data: discounts, status } = await useAsyncData('cart-discount', async () => {
+const { data: discounts, status } = await useAsyncData('cart-discount', async (_nuxtApp, { signal }) => {
   const [coupons, offers] = await Promise.all([
-    $fetch('/cart/coupons'),
-    $fetch('/cart/offers'),
+    $fetch('/cart/coupons', { signal }),
+    $fetch('/cart/offers', { signal }),
   ])
 
   return { coupons, offers }
@@ -372,8 +372,8 @@ The following options **must be consistent** across all calls with the same key:
 
 ```ts
 // ❌ This will trigger a development warning
-const { data: users1 } = useAsyncData('users', () => $fetch('/api/users'), { deep: false })
-const { data: users2 } = useAsyncData('users', () => $fetch('/api/users'), { deep: true })
+const { data: users1 } = useAsyncData('users', (_nuxtApp, { signal }) => $fetch('/api/users', { signal }), { deep: false })
+const { data: users2 } = useAsyncData('users', (_nuxtApp, { signal }) => $fetch('/api/users', { signal }), { deep: true })
 ```
 
 The following options **can safely differ** without triggering warnings:
@@ -385,16 +385,16 @@ The following options **can safely differ** without triggering warnings:
 
 ```ts
 // ✅ This is allowed
-const { data: users1 } = useAsyncData('users', () => $fetch('/api/users'), { immediate: true })
-const { data: users2 } = useAsyncData('users', () => $fetch('/api/users'), { immediate: false })
+const { data: users1 } = useAsyncData('users', (_nuxtApp, { signal }) => $fetch('/api/users', { signal }), { immediate: true })
+const { data: users2 } = useAsyncData('users', (_nuxtApp, { signal }) => $fetch('/api/users', { signal }), { immediate: false })
 ```
 
 If you need independent instances, use different keys:
 
 ```ts
 // These are completely independent instances
-const { data: users1 } = useAsyncData('users-1', () => $fetch('/api/users'))
-const { data: users2 } = useAsyncData('users-2', () => $fetch('/api/users'))
+const { data: users1 } = useAsyncData('users-1', (_nuxtApp, { signal }) => $fetch('/api/users', { signal }))
+const { data: users2 } = useAsyncData('users-2', (_nuxtApp, { signal }) => $fetch('/api/users', { signal }))
 ```
 
 #### Reactive Keys
@@ -516,7 +516,7 @@ const { data, status } = useLazyFetch('/api/user', {
 </script>
 ```
 
-In the case of more complex URL construction, you may use a callback as a [computed getter](https://vuejs.org/guide/essentials/computed.html) that returns the URL string.
+In the case of more complex URL construction, you may use a callback as a [computed getter](https://vuejs.org/guide/essentials/computed) that returns the URL string.
 
 Every time a dependency changes, the data will be fetched using the newly constructed URL. Combine this with [not-immediate](/docs/4.x/getting-started/data-fetching#not-immediate), and you can wait until the reactive element changes before fetching.
 
@@ -661,7 +661,7 @@ Using `<script setup>` or `<script setup lang="ts">` are the recommended way of
 
 ## Serializing Data From Server to Client
 
-When using `useAsyncData` and `useLazyAsyncData` to transfer data fetched on server to the client (as well as anything else that utilizes [the Nuxt payload](/docs/4.x/api/composables/use-nuxt-app#payload)), the payload is serialized with [`devalue`](https://github.com/Rich-Harris/devalue). This allows us to transfer not just basic JSON but also to serialize and revive/deserialize more advanced kinds of data, such as regular expressions, Dates, Map and Set, `ref`, `reactive`, `shallowRef`, `shallowReactive` and `NuxtError` - and more.
+When using `useAsyncData` and `useLazyAsyncData` to transfer data fetched on server to the client (as well as anything else that utilizes [the Nuxt payload](/docs/4.x/api/composables/use-nuxt-app#payload)), the payload is serialized with [`devalue`](https://github.com/sveltejs/devalue). This allows us to transfer not just basic JSON but also to serialize and revive/deserialize more advanced kinds of data, such as regular expressions, Dates, Map and Set, `ref`, `reactive`, `shallowRef`, `shallowReactive` and `NuxtError` - and more.
 
 It is also possible to define your own serializer/deserializer for types that are not supported by Nuxt. You can read more in the [`useNuxtApp`](/docs/4.x/api/composables/use-nuxt-app#payload) docs.
 
@@ -733,7 +733,7 @@ const { data } = await useFetch('/api/bar')
 
 Nuxt does not currently support an alternative serializer to `JSON.stringify`. However, you can return your payload as a normal string and utilize the `toJSON` method to maintain type safety.
 
-In the example below, we use [superjson](https://github.com/blitz-js/superjson) as our serializer.
+In the example below, we use [superjson](https://github.com/flightcontrolhq/superjson) as our serializer.
 
 ```ts [server/api/superjson.ts]
 import superjson from 'superjson'
@@ -771,7 +771,7 @@ const { data } = await useFetch('/api/superjson', {
 ### Consuming SSE (Server-Sent Events) via POST request
 
 ::tip
-If you're consuming SSE via GET request, you can use [`EventSource`](https://developer.mozilla.org/en-US/docs/Web/API/EventSource) or VueUse composable [`useEventSource`](https://vueuse.org/core/useEventSource/).
+If you're consuming SSE via GET request, you can use [`EventSource`](https://developer.mozilla.org/en-US/docs/Web/API/EventSource) or VueUse composable [`useEventSource`](https://vueuse.org/core/useeventsource/).
 ::
 
 When consuming SSE via POST request, you need to handle the connection manually. Here's how you can do it:
@@ -804,10 +804,10 @@ while (true) {
 When requests don't rely on each other, you can make them in parallel with `Promise.all()` to boost performance.
 
 ```ts
-const { data } = await useAsyncData(() => {
+const { data } = await useAsyncData((_nuxtApp, { signal }) => {
   return Promise.all([
-    $fetch('/api/comments/'),
-    $fetch('/api/author/12'),
+    $fetch('/api/comments/', { signal }),
+    $fetch('/api/author/12', { signal }),
   ])
 })