@nuxt/docs 3.20.1 → 3.20.2

package/{2.guide/1.directory-structure → 2.directory-structure}/2.nuxtignore.md

@@ -7,7 +7,7 @@ navigation.icon: i-vscode-icons-file-type-nuxt
 
 The `.nuxtignore` file tells Nuxt to ignore files in your project’s root directory ([`rootDir`](/docs/3.x/api/nuxt-config#rootdir)) during the build phase.
 
-It is subject to the same specification as [`.gitignore`](/docs/3.x/guide/directory-structure/gitignore) and `.eslintignore` files, in which each line is a glob pattern indicating which files should be ignored.
+It is subject to the same specification as [`.gitignore`](/docs/3.x/directory-structure/gitignore) and `.eslintignore` files, in which each line is a glob pattern indicating which files should be ignored.
 
 ::tip
 You can also configure [`ignoreOptions`](/docs/3.x/api/nuxt-config#ignoreoptions), [`ignorePrefix`](/docs/3.x/api/nuxt-config#ignoreprefix) and [`ignore`](/docs/3.x/api/nuxt-config#ignore) in your `nuxt.config` file.

package/{2.guide/1.directory-structure → 2.directory-structure}/2.nuxtrc.md

@@ -8,7 +8,7 @@ navigation.icon: i-vscode-icons-file-type-nuxt
 The `.nuxtrc` file can be used to configure Nuxt with a flat syntax. It is based on [`unjs/rc9`](https://github.com/unjs/rc9).
 
 ::tip
-For more advanced configurations, use [`nuxt.config`](/docs/3.x/guide/directory-structure/nuxt-config).
+For more advanced configurations, use [`nuxt.config`](/docs/3.x/directory-structure/nuxt-config).
 ::
 
 ## Usage

package/{2.guide/1.directory-structure → 2.directory-structure}/3.app.md

@@ -13,7 +13,7 @@ If you have a `pages/` directory, the `app.vue` file is optional. Nuxt will auto
 
 ### Minimal Usage
 
-With Nuxt, the [`pages/`](/docs/3.x/guide/directory-structure/pages) directory is optional. If it is not present, Nuxt will not include the [vue-router](https://router.vuejs.org) dependency. This is useful when building a landing page or an application that does not require routing.
+With Nuxt, the [`pages/`](/docs/3.x/directory-structure/pages) directory is optional. If it is not present, Nuxt will not include the [vue-router](https://router.vuejs.org) dependency. This is useful when building a landing page or an application that does not require routing.
 
 ```vue [app.vue]
 <template>
@@ -25,7 +25,7 @@ With Nuxt, the [`pages/`](/docs/3.x/guide/directory-structure/pages) directory i
 
 ### Usage with Pages
 
-When you have a [`pages/`](/docs/3.x/guide/directory-structure/pages) directory, you need to use the [`<NuxtPage>`](/docs/3.x/api/components/nuxt-page) component to display the current page:
+When you have a [`pages/`](/docs/3.x/directory-structure/pages) directory, you need to use the [`<NuxtPage>`](/docs/3.x/api/components/nuxt-page) component to display the current page:
 
 ```vue [app.vue]
 <template>

package/{2.guide/1.directory-structure → 2.directory-structure}/3.error.md

@@ -11,9 +11,7 @@ During the lifespan of your application, some errors may appear unexpectedly at
 <script setup lang="ts">
 import type { NuxtError } from '#app'
 
-const props = defineProps({
-  error: Object as () => NuxtError,
-})
+const props = defineProps<{ error: NuxtError }>()
 </script>
 
 <template>

package/{2.guide/1.directory-structure → 2.directory-structure}/3.nuxt-config.md

@@ -31,4 +31,4 @@ export default defineNuxtConfig({
 Discover all the available options in the **Nuxt configuration** documentation.
 ::
 
-To ensure your configuration is up to date, Nuxt will make a full restart when detecting changes in the main configuration file, the [`.env`](/docs/3.x/guide/directory-structure/env), [`.nuxtignore`](/docs/3.x/guide/directory-structure/nuxtignore) and [`.nuxtrc`](/docs/3.x/guide/directory-structure/nuxtrc) dotfiles.
+To ensure your configuration is up to date, Nuxt will make a full restart when detecting changes in the main configuration file, the [`.env`](/docs/3.x/directory-structure/env), [`.nuxtignore`](/docs/3.x/directory-structure/nuxtignore) and [`.nuxtrc`](/docs/3.x/directory-structure/nuxtrc) dotfiles.

package/2.directory-structure/index.md

@@ -0,0 +1,61 @@
+---
+title: 'Nuxt Directory Structure'
+description: 'Learn about the directory structure of a Nuxt application and how to use it.'
+navigation: false
+---
+
+Nuxt applications have a specific directory structure that is used to organize the code. This structure is designed to be easy to understand and to be used in a consistent way.
+
+## Root Directory
+
+The root directory of a Nuxt application is the directory that contains the `nuxt.config.ts` file. This file is used to configure the Nuxt application.
+
+### App Directory & Files
+
+The following directories are related to the universal Nuxt application:
+- [`assets/`](/docs/3.x/directory-structure/assets): website's assets that the build tool (Vite or webpack) will process
+- [`components/`](/docs/3.x/directory-structure/components): Vue components of the application
+- [`composables/`](/docs/3.x/directory-structure/composables): add your Vue composables
+- [`layouts/`](/docs/3.x/directory-structure/layouts): Vue components that wrap around your pages and avoid re-rendering between pages
+- [`middleware/`](/docs/3.x/directory-structure/middleware): run code before navigating to a particular route
+- [`pages/`](/docs/3.x/directory-structure/pages): file-based routing to create routes within your web application
+- [`plugins/`](/docs/3.x/directory-structure/plugins): use Vue plugins and more at the creation of your Nuxt application
+- [`utils/`](/docs/3.x/directory-structure/utils): add functions throughout your application that can be used in your components, composables, and pages.
+
+This directory also includes specific files:
+- [`app.config.ts`](/docs/3.x/directory-structure/app-config): a reactive configuration within your application
+- [`app.vue`](/docs/3.x/directory-structure/app): the root component of your Nuxt application
+- [`error.vue`](/docs/3.x/directory-structure/error): the error page of your Nuxt application
+
+### Server Directory
+
+The [`server/`](/docs/3.x/directory-structure/server) directory is the directory that contains the server-side code of the Nuxt application. It contains the following subdirectories:
+- [`api/`](/docs/3.x/directory-structure/server#server-routes): contains the API routes of the application.
+- [`routes/`](/docs/3.x/directory-structure/server#server-routes): contains the server routes of the application (e.g. dynamic `/sitemap.xml`).
+- [`middleware/`](/docs/3.x/directory-structure/server#server-middleware): run code before a server route is processed
+- [`plugins/`](/docs/3.x/directory-structure/server#server-plugins): use plugins and more at the creation of the Nuxt server
+- [`utils/`](/docs/3.x/directory-structure/server#server-utilities): add functions throughout your application that can be used in your server  code.
+
+## Public Directory
+
+The [`public/`](/docs/3.x/directory-structure/public) directory is the directory that contains the public files of the Nuxt application. Files contained within this directory are served at the root and are not modified by the build process.
+
+This is suitable for files that have to keep their names (e.g. `robots.txt`) _or_ likely won't change (e.g. `favicon.ico`).
+
+## Shared Directory
+
+The [`shared/`](/docs/3.x/directory-structure/shared) directory is the directory that contains the shared code of the Nuxt application and Nuxt server. This code can be used in both the Vue app and the Nitro server.
+
+## Content Directory
+
+The [`content/`](/docs/3.x/directory-structure/content) directory is enabled by the [Nuxt Content](https://content.nuxt.com) module. It is used to create a file-based CMS for your application using Markdown files.
+
+## Modules Directory
+
+The [`modules/`](/docs/3.x/directory-structure/modules) directory is the directory that contains the local modules of the Nuxt application. Modules are used to extend the functionality of the Nuxt application.
+
+## Nuxt Files
+
+- [`nuxt.config.ts`](/docs/3.x/directory-structure/nuxt-config) file is the main configuration file for the Nuxt application.
+- [`.nuxtrc`](/docs/3.x/directory-structure/nuxtrc) file is another syntax for configuring the Nuxt application (useful for global configurations).
+- [`.nuxtignore`](/docs/3.x/directory-structure/nuxtignore) file is used to ignore files in the root directory during the build phase.

package/{2.guide → 3.guide}/0.index.md

@@ -7,19 +7,16 @@ surround: false
 ---
 
 ::card-group{class="sm:grid-cols-1"}
-  ::card{icon="i-lucide-folders" title="Directory Structure" to="/docs/guide/directory-structure"}
-  Learn about Nuxt directory structure and what benefits each directory or file offers.
-  ::
-  ::card{icon="i-lucide-medal" title="Key Concepts" to="/docs/guide/concepts"}
+  ::card{icon="i-lucide-medal" title="Key Concepts" to="/docs/3.x/guide/concepts"}
   Discover the main concepts behind Nuxt, from auto-import, hybrid rendering to its TypeScript support.
   ::
-  ::card{icon="i-lucide-star" title="Going Further" to="/docs/guide/going-further"}
-  Master Nuxt with advanced concepts like experimental features, hooks, modules, and more.
+  ::card{icon="i-lucide-square-check" title="Best Practices" to="/docs/3.x/guide/best-practices"}
+  Learn about best practices when developing with Nuxt
   ::
-  ::card{icon="i-lucide-book-open" title="Recipes" to="/docs/guide/recipes"}
+  ::card{icon="i-lucide-book-open" title="Recipes" to="/docs/3.x/guide/recipes"}
   Find solutions to common problems and learn how to implement them in your Nuxt project.
   ::
-  ::card{icon="i-lucide-square-check" title="Best Practices" to="/docs/guide/best-practices"}
-  Learn about best practices when developing with Nuxt
+  ::card{icon="i-lucide-star" title="Going Further" to="/docs/3.x/guide/going-further"}
+  Master Nuxt with advanced concepts like experimental features, hooks, modules, and more.
   ::
 ::

package/{2.guide/2.concepts → 3.guide/1.concepts}/1.auto-imports.md

@@ -11,7 +11,7 @@ const count = ref(1) // ref is auto-imported
 </script>
 ```
 
-Thanks to its opinionated directory structure, Nuxt can auto-import your [`components/`](/docs/3.x/guide/directory-structure/components), [`composables/`](/docs/3.x/guide/directory-structure/composables) and [`utils/`](/docs/3.x/guide/directory-structure/utils).
+Thanks to its opinionated directory structure, Nuxt can auto-import your [`components/`](/docs/3.x/directory-structure/components), [`composables/`](/docs/3.x/directory-structure/composables) and [`utils/`](/docs/3.x/directory-structure/utils).
 
 Contrary to a classic global declaration, Nuxt preserves typings, IDEs completions and hints, and **only includes what is used in your production code**.
 
@@ -20,7 +20,7 @@ In the docs, every function that is not explicitly imported is auto-imported by
 ::
 
 ::note
-In the [`server`](/docs/3.x/guide/directory-structure/server) directory, Nuxt auto-imports exported functions and variables from `server/utils/`.
+In the [`server`](/docs/3.x/directory-structure/server) directory, Nuxt auto-imports exported functions and variables from `server/utils/`.
 ::
 
 ::note
@@ -101,8 +101,8 @@ export const useMyComposable = () => {
 
 Nuxt directly auto-imports files created in defined directories:
 
-- `components/` for [Vue components](/docs/3.x/guide/directory-structure/components).
-- `composables/` for [Vue composables](/docs/3.x/guide/directory-structure/composables).
+- `components/` for [Vue components](/docs/3.x/directory-structure/components).
+- `composables/` for [Vue composables](/docs/3.x/directory-structure/composables).
 - `utils/` for helper functions and other utilities.
 
 :link-example{to="/docs/examples/features/auto-imports"}

package/{2.guide/2.concepts → 3.guide/1.concepts}/10.nuxt-lifecycle.md

@@ -40,7 +40,7 @@ The Vue and Nuxt instances are created first. Afterward, Nuxt executes its serve
 - Built-in plugins, such as Vue Router and `unhead`.
 - Custom plugins located in the `plugins/` directory, including those without a suffix (e.g., `myPlugin.ts`) and those with the `.server` suffix (e.g., `myServerPlugin.server.ts`).
 
-Plugins execute in a specific order and may have dependencies on one another. For more details, including execution order and parallelism, refer to the [Plugins documentation](/docs/3.x/guide/directory-structure/plugins).
+Plugins execute in a specific order and may have dependencies on one another. For more details, including execution order and parallelism, refer to the [Plugins documentation](/docs/3.x/directory-structure/plugins).
 
 ::callout{icon="i-lucide-lightbulb"}
 After this step, Nuxt calls the [`app:created`](/docs/3.x/api/advanced/hooks#app-hooks-runtime) hook, which can be used to execute additional logic.
@@ -70,7 +70,7 @@ In Nuxt, there are three types of middleware:
 
 Nuxt executes all global middleware on the initial page load (both on server and client) and then again before any client-side navigation. Named and anonymous middleware are executed only on the routes specified in the middleware property of the page(route) meta defined in the corresponding page components.
 
-For details about each type and examples, see the [Middleware documentation](/docs/3.x/guide/directory-structure/middleware).
+For details about each type and examples, see the [Middleware documentation](/docs/3.x/directory-structure/middleware).
 
 Any redirection on the server will result in a `Location:` header being sent to the browser; the browser then makes a fresh request to this new location. All application state will be reset when this happens, unless persisted in a cookie.
 
@@ -134,7 +134,7 @@ Nuxt middleware runs on both the server and the client. If you want certain code
 
 ### Step 4: Mount Vue Application and Hydration
 
-Calling `app.mount('#__nuxt')` mounts the Vue application to the DOM. If the application uses SSR or SSG mode, Vue performs a hydration step to make the client-side application interactive. During hydration, Vue recreates the application (excluding [Server Components](/docs/3.x/guide/directory-structure/components#server-components)), matches each component to its corresponding DOM nodes, and attaches DOM event listeners.
+Calling `app.mount('#__nuxt')` mounts the Vue application to the DOM. If the application uses SSR or SSG mode, Vue performs a hydration step to make the client-side application interactive. During hydration, Vue recreates the application (excluding [Server Components](/docs/3.x/directory-structure/components#server-components)), matches each component to its corresponding DOM nodes, and attaches DOM event listeners.
 
 To ensure proper hydration, it's important to maintain consistency between the data on the server and the client. For API requests, it is recommended to use `useAsyncData`, `useFetch`, or other SSR-friendly composables. These methods ensure that the data fetched on the server side is reused during hydration, avoiding repeated requests. Any new requests should only be triggered after hydration, preventing hydration errors.
 

package/{2.guide/2.concepts → 3.guide/1.concepts}/2.vuejs-development.md

@@ -25,13 +25,13 @@ We chose to build Nuxt on top of Vue for these reasons:
 
 ### Auto-imports
 
-Every Vue component created in the [`components/`](/docs/3.x/guide/directory-structure/components) directory of a Nuxt project will be available in your project without having to import it. If a component is not used anywhere, your production’s code will not include it.
+Every Vue component created in the [`components/`](/docs/3.x/directory-structure/components) directory of a Nuxt project will be available in your project without having to import it. If a component is not used anywhere, your production’s code will not include it.
 
 :read-more{to="/docs/guide/concepts/auto-imports"}
 
 ### Vue Router
 
-Most applications need multiple pages and a way to navigate between them. This is called **routing**. Nuxt uses a [`pages/`](/docs/3.x/guide/directory-structure/pages) directory and naming conventions to directly create routes mapped to your files using the official [Vue Router library](https://router.vuejs.org).
+Most applications need multiple pages and a way to navigate between them. This is called **routing**. Nuxt uses a [`pages/`](/docs/3.x/directory-structure/pages) directory and naming conventions to directly create routes mapped to your files using the official [Vue Router library](https://router.vuejs.org).
 
 :read-more{to="/docs/getting-started/routing"}
 
@@ -92,7 +92,7 @@ const increment = () => count.value++
 The goal of Nuxt is to provide a great developer experience around the Composition API.
 
 - Use auto-imported [Reactivity functions](https://vuejs.org/api/reactivity-core.html) from Vue and Nuxt [built-in composables](/docs/3.x/api/composables/use-async-data).
-- Write your own auto-imported reusable functions in the [`composables/` directory](/docs/3.x/guide/directory-structure/composables).
+- Write your own auto-imported reusable functions in the [`composables/` directory](/docs/3.x/directory-structure/composables).
 
 ### TypeScript Support
 

package/{2.guide/2.concepts → 3.guide/1.concepts}/3.rendering.md

@@ -44,7 +44,7 @@ const handleClick = () => {
 
 On the initial request, the `counter` ref is initialized in the server since it is rendered inside the `<p>` tag. The contents of `handleClick` is never executed here. During hydration in the browser, the `counter` ref is re-initialized. The `handleClick` finally binds itself to the button; Therefore it is reasonable to deduce that the body of `handleClick` will always run in a browser environment.
 
-[Middlewares](/docs/3.x/guide/directory-structure/middleware) and [pages](/docs/3.x/guide/directory-structure/pages) run in the server and on the client during hydration. [Plugins](/docs/3.x/guide/directory-structure/plugins) can be rendered on the server or client or both. [Components](/docs/3.x/guide/directory-structure/components) can be forced to run on the client only as well. [Composables](/docs/3.x/guide/directory-structure/composables) and [utilities](/docs/3.x/guide/directory-structure/utils) are rendered based on the context of their usage.
+[Middlewares](/docs/3.x/directory-structure/middleware) and [pages](/docs/3.x/directory-structure/pages) run in the server and on the client during hydration. [Plugins](/docs/3.x/directory-structure/plugins) can be rendered on the server or client or both. [Components](/docs/3.x/directory-structure/components) can be forced to run on the client only as well. [Composables](/docs/3.x/directory-structure/composables) and [utilities](/docs/3.x/directory-structure/utils) are rendered based on the context of their usage.
 
 **Benefits of server-side rendering:**
 - **Performance**: Users can get immediate access to the page's content because browsers can display static content much faster than JavaScript-generated content. At the same time, Nuxt preserves the interactivity of a web application during the hydration process.

package/{2.guide/2.concepts → 3.guide/1.concepts}/4.server-engine.md

@@ -16,7 +16,7 @@ It is shipped with many features:
 
 ## API Layer
 
-Server [API endpoints](/docs/3.x/guide/directory-structure/server#api-routes) and [Middleware](/docs/3.x/guide/directory-structure/server#server-middleware) are added by Nitro that internally uses [h3](https://github.com/h3js/h3).
+Server [API endpoints](/docs/3.x/directory-structure/server#api-routes) and [Middleware](/docs/3.x/directory-structure/server#server-middleware) are added by Nitro that internally uses [h3](https://github.com/h3js/h3).
 
 Key features include:
 
@@ -53,7 +53,7 @@ Nitro produces a standalone server dist that is independent of `node_modules`.
 
 The server in Nuxt 2 is not standalone and requires part of Nuxt core to be involved by running `nuxt start` (with the [`nuxt-start`](https://www.npmjs.com/package/nuxt-start) or [`nuxt`](https://www.npmjs.com/package/nuxt) distributions) or custom programmatic usage, which is fragile and prone to breakage and not suitable for serverless and service worker environments.
 
-Nuxt generates this dist when running `nuxt build` into a [`.output`](/docs/3.x/guide/directory-structure/output) directory.
+Nuxt generates this dist when running `nuxt build` into a [`.output`](/docs/3.x/directory-structure/output) directory.
 
 The output contains runtime code to run your Nuxt server in any environment (including experimental browser service workers!) and serve your static files, making it a true hybrid framework for the JAMstack. In addition, Nuxt implements a native storage layer, supporting multi-source drivers and local assets.
 

package/{2.guide/2.concepts → 3.guide/1.concepts}/5.modules.md

@@ -17,7 +17,7 @@ Explore Nuxt Modules
 
 ## Add Nuxt Modules
 
-Once you have installed the modules you can add them to your [`nuxt.config.ts`](/docs/3.x/guide/directory-structure/nuxt-config) file under the `modules` property. Module developers usually provide additional steps and details for usage.
+Once you have installed the modules you can add them to your [`nuxt.config.ts`](/docs/3.x/directory-structure/nuxt-config) file under the `modules` property. Module developers usually provide additional steps and details for usage.
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({

package/{2.guide/2.concepts → 3.guide/1.concepts}/8.typescript.md

@@ -63,14 +63,14 @@ This file contains the recommended basic TypeScript configuration for your proje
 Consider using the `imports` section of [nuxt.config](/docs/3.x/api/nuxt-config#imports) to include directories beyond the default ones. This can be useful for auto-importing types which you're using across your app.
 ::
 
-[Read more about how to extend this configuration](/docs/3.x/guide/directory-structure/tsconfig).
+[Read more about how to extend this configuration](/docs/3.x/directory-structure/tsconfig).
 
 ::tip{icon="i-lucide-video" to="https://youtu.be/umLI7SlPygY" target="_blank"}
 Watch a video from Daniel Roe explaining built-in Nuxt aliases.
 ::
 
 ::note
-Nitro also [auto-generates types](/docs/3.x/guide/concepts/server-engine#typed-api-routes) for API routes. Plus, Nuxt also generates types for globally available components and [auto-imports from your composables](/docs/3.x/guide/directory-structure/composables), plus other core functionality.
+Nitro also [auto-generates types](/docs/3.x/guide/concepts/server-engine#typed-api-routes) for API routes. Plus, Nuxt also generates types for globally available components and [auto-imports from your composables](/docs/3.x/directory-structure/composables), plus other core functionality.
 ::
 
 ::note

package/{2.guide/4.recipes → 3.guide/3.recipes}/1.custom-routing.md

@@ -5,7 +5,7 @@ description: "In Nuxt, your routing is defined by the structure of your files in
 
 ## Adding custom routes
 
-In Nuxt, your routing is defined by the structure of your files inside the [pages directory](/docs/3.x/guide/directory-structure/pages). However, since it uses [vue-router](https://router.vuejs.org) under the hood, Nuxt offers you several ways to add custom routes in your project.
+In Nuxt, your routing is defined by the structure of your files inside the [pages directory](/docs/3.x/directory-structure/pages). However, since it uses [vue-router](https://router.vuejs.org) under the hood, Nuxt offers you several ways to add custom routes in your project.
 
 ### Router Config
 

package/{2.guide/4.recipes → 3.guide/3.recipes}/2.vite-plugin.md

@@ -28,7 +28,7 @@ First, we need to install the Vite plugin, for our example, we'll use `@rollup/p
 
 ::
 
-Next, we need to import and add it to our [`nuxt.config.ts`](/docs/3.x/guide/directory-structure/nuxt-config) file:
+Next, we need to import and add it to our [`nuxt.config.ts`](/docs/3.x/directory-structure/nuxt-config) file:
 
 ```ts [nuxt.config.ts]
 import yaml from '@rollup/plugin-yaml'

package/{2.guide/4.recipes → 3.guide/3.recipes}/3.custom-usefetch.md

@@ -12,7 +12,7 @@ However, Nuxt provides a way to create a custom fetcher for your API (or multipl
 
 ## Custom `$fetch`
 
-Let's create a custom `$fetch` instance with a [Nuxt plugin](/docs/3.x/guide/directory-structure/plugins).
+Let's create a custom `$fetch` instance with a [Nuxt plugin](/docs/3.x/directory-structure/plugins).
 
 ::note
 `$fetch` is a configured instance of [ofetch](https://github.com/unjs/ofetch) which supports adding the base URL of your Nuxt server as well as direct function calls during SSR (avoiding HTTP roundtrips).

package/{2.guide/3.going-further → 3.guide/4.going-further}/1.experimental-features.md

@@ -113,7 +113,7 @@ This feature is only recommended for **static builds** with payload extraction,
 
 Emits `app:chunkError` hook when there is an error loading vite/webpack chunks. Default behavior is to perform a reload of the new route on navigation to a new route when a chunk fails to load.
 
-If you set this to `'automatic-immediate'` Nuxt will reload the current route immediately, instead of waiting for a navigation. This is useful for chunk errors that are not triggered by navigation, e.g., when your Nuxt app fails to load a [lazy component](/docs/3.x/guide/directory-structure/components#dynamic-imports). A potential downside of this behavior is undesired reloads, e.g., when your app does not need the chunk that caused the error.
+If you set this to `'automatic-immediate'` Nuxt will reload the current route immediately, instead of waiting for a navigation. This is useful for chunk errors that are not triggered by navigation, e.g., when your Nuxt app fails to load a [lazy component](/docs/3.x/directory-structure/components#dynamic-imports). A potential downside of this behavior is undesired reloads, e.g., when your app does not need the chunk that caused the error.
 
 You can disable automatic handling by setting this to `false`, or handle chunk errors manually by setting it to `manual`.
 
@@ -513,7 +513,7 @@ export default defineNuxtConfig({
 })
 ```
 
-This allows modules to access additional metadata from the page metadata in the build context. If you are using this within a module, it's recommended also to [augment the `NuxtPage` types with your keys](/docs/3.x/guide/directory-structure/pages#typing-custom-metadata).
+This allows modules to access additional metadata from the page metadata in the build context. If you are using this within a module, it's recommended also to [augment the `NuxtPage` types with your keys](/docs/3.x/directory-structure/pages#typing-custom-metadata).
 
 ## normalizeComponentNames
 

package/{2.guide/3.going-further → 3.guide/4.going-further}/1.internals.md

@@ -30,7 +30,7 @@ Global usage is possible for the browser but not on the server, to avoid sharing
 
 Since [`useNuxtApp`](/docs/3.x/api/composables/use-nuxt-app) throws an exception if context is currently unavailable, if your composable does not always require `nuxtApp`, you can use [`tryUseNuxtApp`](/docs/3.x/api/composables/use-nuxt-app#tryusenuxtapp) instead, which will return `null` instead of throwing an exception.
 
-To extend the `nuxtApp` interface and hook into different stages or access contexts, we can use [Nuxt Plugins](/docs/3.x/guide/directory-structure/plugins).
+To extend the `nuxtApp` interface and hook into different stages or access contexts, we can use [Nuxt Plugins](/docs/3.x/directory-structure/plugins).
 
 Check [Nuxt App](/docs/3.x/api/composables/use-nuxt-app) for more information about this interface.
 
@@ -76,6 +76,6 @@ Nuxt builds and bundles project using Node.js but also has a runtime side.
 
 While both areas can be extended, that runtime context is isolated from build-time. Therefore, they are not supposed to share state, code, or context other than runtime configuration!
 
-`nuxt.config` and [Nuxt Modules](/docs/3.x/guide/going-further/modules) can be used to extend the build context, and [Nuxt Plugins](/docs/3.x/guide/directory-structure/plugins) can be used to extend runtime.
+`nuxt.config` and [Nuxt Modules](/docs/3.x/guide/going-further/modules) can be used to extend the build context, and [Nuxt Plugins](/docs/3.x/directory-structure/plugins) can be used to extend runtime.
 
 When building an application for production, `nuxt build` will generate a standalone build in the `.output` directory, independent of `nuxt.config` and [Nuxt modules](/docs/3.x/guide/going-further/modules).

package/{2.guide/3.going-further → 3.guide/4.going-further}/10.runtime-config.md

@@ -5,7 +5,7 @@ description: "Nuxt provides a runtime config API to expose configuration and sec
 
 ## Exposing
 
-To expose config and environment variables to the rest of your app, you will need to define runtime configuration in your [`nuxt.config`](/docs/3.x/guide/directory-structure/nuxt-config) file, using the [`runtimeConfig`](/docs/3.x/api/nuxt-config#runtimeconfig) option.
+To expose config and environment variables to the rest of your app, you will need to define runtime configuration in your [`nuxt.config`](/docs/3.x/directory-structure/nuxt-config) file, using the [`runtimeConfig`](/docs/3.x/api/nuxt-config#runtimeconfig) option.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({

package/{2.guide/3.going-further → 3.guide/4.going-further}/2.hooks.md

@@ -39,7 +39,7 @@ Explore all available Nuxt hooks.
 
 ## App Hooks (Runtime)
 
-App hooks can be mainly used by [Nuxt Plugins](/docs/3.x/guide/directory-structure/plugins) to hook into rendering lifecycle but could also be used in Vue composables.
+App hooks can be mainly used by [Nuxt Plugins](/docs/3.x/directory-structure/plugins) to hook into rendering lifecycle but could also be used in Vue composables.
 
 ```ts [plugins/test.ts]
 export default defineNuxtPlugin((nuxtApp) => {
@@ -55,7 +55,7 @@ Explore all available App hooks.
 
 ## Server Hooks (Runtime)
 
-These hooks are available for [server plugins](/docs/3.x/guide/directory-structure/server#server-plugins) to hook into Nitro's runtime behavior.
+These hooks are available for [server plugins](/docs/3.x/directory-structure/server#server-plugins) to hook into Nitro's runtime behavior.
 
 ```ts [~/server/plugins/test.ts]
 export default defineNitroPlugin((nitroApp) => {

package/{2.guide/3.going-further → 3.guide/4.going-further}/3.modules.md

@@ -117,7 +117,7 @@ Nuxt Modules come with a variety of powerful APIs and patterns allowing them to
 We can consider two kinds of Nuxt Modules:
 
 - published modules are distributed on npm - you can see a list of some community modules on [the Nuxt website](/modules).
-- "local" modules, they exist within a Nuxt project itself, either [inlined in Nuxt config](/docs/3.x/api/nuxt-config#modules) or as part of [the `modules` directory](/docs/3.x/guide/directory-structure/modules).
+- "local" modules, they exist within a Nuxt project itself, either [inlined in Nuxt config](/docs/3.x/api/nuxt-config#modules) or as part of [the `modules` directory](/docs/3.x/directory-structure/modules).
 
 In either case, their anatomy is similar.
 
@@ -224,7 +224,7 @@ Modules, like everything in a Nuxt configuration, aren't included in your applic
 Inside the runtime directory, you can provide any kind of assets related to the Nuxt App:
 - Vue components
 - Composables
-- [Nuxt plugins](/docs/3.x/guide/directory-structure/plugins)
+- [Nuxt plugins](/docs/3.x/directory-structure/plugins)
 
 To the [server engine](/docs/3.x/guide/concepts/server-engine), Nitro:
 - API routes

package/{2.guide/3.going-further → 3.guide/4.going-further}/6.nuxt-app.md

@@ -23,7 +23,7 @@ Jump over the `NuxtApp` interface documentation.
 
 Many composables and utilities, both built-in and user-made, may require access to the Nuxt instance. This doesn't exist everywhere on your application, because a fresh instance is created on every request.
 
-Currently, the Nuxt context is only accessible in [plugins](/docs/3.x/guide/directory-structure/plugins), [Nuxt hooks](/docs/3.x/guide/going-further/hooks), [Nuxt middleware](/docs/3.x/guide/directory-structure/middleware) (if wrapped in `defineNuxtRouteMiddleware`), and [setup functions](https://vuejs.org/api/composition-api-setup.html) (in pages and components).
+Currently, the Nuxt context is only accessible in [plugins](/docs/3.x/directory-structure/plugins), [Nuxt hooks](/docs/3.x/guide/going-further/hooks), [Nuxt middleware](/docs/3.x/directory-structure/middleware) (if wrapped in `defineNuxtRouteMiddleware`), and [setup functions](https://vuejs.org/api/composition-api-setup.html) (in pages and components).
 
 If a composable is called without access to the context, you may get an error stating that 'A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function.' In that case, you can also explicitly call functions within this context by using [`nuxtApp.runWithContext`](/docs/3.x/api/composables/use-nuxt-app#runwithcontext).
 

package/{2.guide/3.going-further → 3.guide/4.going-further}/7.layers.md

@@ -7,7 +7,7 @@ Nuxt layers are a powerful feature that you can use to share and reuse partial N
 
 :read-more{to="/docs/getting-started/layers"}
 
-A minimal Nuxt layer directory should contain a [`nuxt.config.ts`](/docs/3.x/guide/directory-structure/nuxt-config) file to indicate it is a layer.
+A minimal Nuxt layer directory should contain a [`nuxt.config.ts`](/docs/3.x/directory-structure/nuxt-config) file to indicate it is a layer.
 
 ```ts [base/nuxt.config.ts]
 export default defineNuxtConfig({})
@@ -15,16 +15,16 @@ export default defineNuxtConfig({})
 
 Additionally, certain other files in the layer directory will be auto-scanned and used by Nuxt for the project extending this layer.
 
-- [`components/*`](/docs/3.x/guide/directory-structure/components)   - Extend the default components
-- [`composables/*`](/docs/3.x/guide/directory-structure/composables)  - Extend the default composables
-- [`layouts/*`](/docs/3.x/guide/directory-structure/layouts)  - Extend the default layouts
-- [`middleware/*`](/docs/3.x/guide/directory-structure/middleware)  - Extend the default middleware
-- [`pages/*`](/docs/3.x/guide/directory-structure/pages)        - Extend the default pages
-- [`plugins/*`](/docs/3.x/guide/directory-structure/plugins)        - Extend the default plugins
-- [`server/*`](/docs/3.x/guide/directory-structure/server)       - Extend the default server endpoints & middleware
-- [`utils/*`](/docs/3.x/guide/directory-structure/utils)   - Extend the default utils
-- [`nuxt.config.ts`](/docs/3.x/guide/directory-structure/nuxt-config)- Extend the default nuxt config
-- [`app.config.ts`](/docs/3.x/guide/directory-structure/app-config)  - Extend the default app config
+- [`components/*`](/docs/3.x/directory-structure/components)   - Extend the default components
+- [`composables/*`](/docs/3.x/directory-structure/composables)  - Extend the default composables
+- [`layouts/*`](/docs/3.x/directory-structure/layouts)  - Extend the default layouts
+- [`middleware/*`](/docs/3.x/directory-structure/middleware)  - Extend the default middleware
+- [`pages/*`](/docs/3.x/directory-structure/pages)        - Extend the default pages
+- [`plugins/*`](/docs/3.x/directory-structure/plugins)        - Extend the default plugins
+- [`server/*`](/docs/3.x/directory-structure/server)       - Extend the default server endpoints & middleware
+- [`utils/*`](/docs/3.x/directory-structure/utils)   - Extend the default utils
+- [`nuxt.config.ts`](/docs/3.x/directory-structure/nuxt-config)- Extend the default nuxt config
+- [`app.config.ts`](/docs/3.x/directory-structure/app-config)  - Extend the default app config
 
 ## Basic Example
 

package/{3.api → 4.api}/1.components/12.nuxt-route-announcer.md

@@ -16,7 +16,7 @@ This component is available in Nuxt v3.12+.
 
 ## Usage
 
-Add `<NuxtRouteAnnouncer/>` in your [`app.vue`](/docs/3.x/guide/directory-structure/app) or [`layouts/`](/docs/3.x/guide/directory-structure/layouts) to enhance accessibility by informing assistive technologies about page title changes. This ensures that navigational changes are announced to users relying on screen readers.
+Add `<NuxtRouteAnnouncer/>` in your [`app.vue`](/docs/3.x/directory-structure/app) or [`layouts/`](/docs/3.x/directory-structure/layouts) to enhance accessibility by informing assistive technologies about page title changes. This ensures that navigational changes are announced to users relying on screen readers.
 
 ```vue [app.vue]
 <template>

package/{3.api → 4.api}/1.components/2.nuxt-page.md

@@ -8,7 +8,7 @@ links:
     size: xs
 ---
 
-`<NuxtPage>` is a built-in component that comes with Nuxt. It lets you display top-level or nested pages located in the [`pages/`](/docs/3.x/guide/directory-structure/pages) directory.
+`<NuxtPage>` is a built-in component that comes with Nuxt. It lets you display top-level or nested pages located in the [`pages/`](/docs/3.x/directory-structure/pages) directory.
 
 ::note
 `<NuxtPage>` is a wrapper around [`<RouterView>`](https://router.vuejs.org/api/interfaces/RouterViewProps.html#interface-routerviewprops) from Vue Router. It should be used instead of `<RouterView>` because the former takes additional care of internal states. Otherwise, `useRoute()` may return incorrect paths.

package/{3.api → 4.api}/1.components/3.nuxt-layout.md

@@ -22,7 +22,7 @@ You can use `<NuxtLayout />` component to activate the `default` layout on `app.
 
 ## Props
 
-- `name`: Specify a layout name to be rendered, can be a string, reactive reference or a computed property. It **must** match the name of the corresponding layout file in the [`layouts/`](/docs/3.x/guide/directory-structure/layouts) directory.
+- `name`: Specify a layout name to be rendered, can be a string, reactive reference or a computed property. It **must** match the name of the corresponding layout file in the [`layouts/`](/docs/3.x/directory-structure/layouts) directory.
   - **type**: `string`
   - **default**: `default`
 
@@ -55,7 +55,7 @@ Please note the layout name is normalized to kebab-case, so if your layout file
 Read more about dynamic layouts.
 ::
 
-- `fallback`: If an invalid layout is passed to the `name` prop, no layout will be rendered. Specify a `fallback` layout to be rendered in this scenario. It **must** match the name of the corresponding layout file in the [`layouts/`](/docs/3.x/guide/directory-structure/layouts) directory.
+- `fallback`: If an invalid layout is passed to the `name` prop, no layout will be rendered. Specify a `fallback` layout to be rendered in this scenario. It **must** match the name of the corresponding layout file in the [`layouts/`](/docs/3.x/directory-structure/layouts) directory.
   - **type**: `string`
   - **default**: `null`
 

package/{3.api → 4.api}/1.components/5.nuxt-loading-indicator.md

@@ -10,7 +10,7 @@ links:
 
 ## Usage
 
-Add `<NuxtLoadingIndicator/>` in your [`app.vue`](/docs/3.x/guide/directory-structure/app) or [`layouts/`](/docs/3.x/guide/directory-structure/layouts).
+Add `<NuxtLoadingIndicator/>` in your [`app.vue`](/docs/3.x/directory-structure/app) or [`layouts/`](/docs/3.x/directory-structure/layouts).
 
 ```vue [app.vue]
 <template>

package/{3.api → 4.api}/2.composables/use-nuxt-app.md

@@ -30,7 +30,7 @@ By default, the shared runtime context of Nuxt is namespaced under the [`buildId
 
 ### `provide (name, value)`
 
-`nuxtApp` is a runtime context that you can extend using [Nuxt plugins](/docs/3.x/guide/directory-structure/plugins). Use the `provide` function to create Nuxt plugins to make values and helper methods available in your Nuxt application across all composables and components.
+`nuxtApp` is a runtime context that you can extend using [Nuxt plugins](/docs/3.x/directory-structure/plugins). Use the `provide` function to create Nuxt plugins to make values and helper methods available in your Nuxt application across all composables and components.
 
 `provide` function accepts `name` and `value` parameters.
 
@@ -46,7 +46,7 @@ As you can see in the example above, `$hello` has become the new and custom part
 
 ### `hook(name, cb)`
 
-Hooks available in `nuxtApp` allows you to customize the runtime aspects of your Nuxt application. You can use runtime hooks in Vue.js composables and [Nuxt plugins](/docs/3.x/guide/directory-structure/plugins) to hook into the rendering lifecycle.
+Hooks available in `nuxtApp` allows you to customize the runtime aspects of your Nuxt application. You can use runtime hooks in Vue.js composables and [Nuxt plugins](/docs/3.x/directory-structure/plugins) to hook into the rendering lifecycle.
 
 `hook` function is useful for adding custom logic by hooking into the rendering lifecycle at a specific point. `hook` function is mostly used when creating Nuxt plugins.
 
@@ -84,8 +84,8 @@ await nuxtApp.callHook('my-plugin:init')
 
 Some useful methods:
 - [`component()`](https://vuejs.org/api/application.html#app-component) - Registers a global component if passing both a name string and a component definition, or retrieves an already registered one if only the name is passed.
-- [`directive()`](https://vuejs.org/api/application.html#app-directive) - Registers a global custom directive if passing both a name string and a directive definition, or retrieves an already registered one if only the name is passed[(example)](/docs/3.x/guide/directory-structure/plugins#vue-directives).
-- [`use()`](https://vuejs.org/api/application.html#app-use) - Installs a **[Vue.js Plugin](https://vuejs.org/guide/reusability/plugins.html)** [(example)](/docs/3.x/guide/directory-structure/plugins#vue-plugins).
+- [`directive()`](https://vuejs.org/api/application.html#app-directive) - Registers a global custom directive if passing both a name string and a directive definition, or retrieves an already registered one if only the name is passed[(example)](/docs/3.x/directory-structure/plugins#vue-directives).
+- [`use()`](https://vuejs.org/api/application.html#app-use) - Installs a **[Vue.js Plugin](https://vuejs.org/guide/reusability/plugins.html)** [(example)](/docs/3.x/directory-structure/plugins#vue-plugins).
 
 :read-more{icon="i-simple-icons-vuedotjs" to="https://vuejs.org/api/application.html#application-api"}
 

package/{3.api → 4.api}/2.composables/use-response-header.md

@@ -37,7 +37,7 @@ header.value = 'my-value'
 </template>
 ```
 
-We can use `useResponseHeader` for example in Nuxt [middleware](/docs/3.x/guide/directory-structure/middleware) to set a response header for all pages.
+We can use `useResponseHeader` for example in Nuxt [middleware](/docs/3.x/directory-structure/middleware) to set a response header for all pages.
 
 ```ts [middleware/my-header-middleware.ts]
 export default defineNuxtRouteMiddleware((to, from) => {

package/{3.api → 4.api}/2.composables/use-route.md

@@ -76,7 +76,7 @@ The `useRoute()` composable should only be used in the setup function of a Vue c
 This applies to any composable that uses `useRoute()` internally too.
 ::
 
-::read-more{to="/docs/3.x/guide/directory-structure/app/middleware"}
+::read-more{to="/docs/3.x/directory-structure/app/middleware"}
 Read more about accessing the route in the middleware section.
 ::
 

package/{3.api → 4.api}/2.composables/use-router.md

@@ -49,7 +49,7 @@ router.resolve({ name: 'home' })
 ```
 
 ::note
-`router.addRoute()` adds route details into an array of routes and it is useful while building [Nuxt plugins](/docs/3.x/guide/directory-structure/plugins) while `router.push()` on the other hand, triggers a new navigation immediately and it is useful in pages, Vue components and composable.
+`router.addRoute()` adds route details into an array of routes and it is useful while building [Nuxt plugins](/docs/3.x/directory-structure/plugins) while `router.push()` on the other hand, triggers a new navigation immediately and it is useful in pages, Vue components and composable.
 ::
 
 ## Based on History API

package/{3.api → 4.api}/3.utils/$fetch.md

@@ -11,7 +11,7 @@ links:
 Nuxt uses [ofetch](https://github.com/unjs/ofetch) to expose globally the `$fetch` helper for making HTTP requests within your Vue app or API routes.
 
 ::tip{icon="i-lucide-rocket"}
-During server-side rendering, calling `$fetch` to fetch your internal [API routes](/docs/3.x/guide/directory-structure/server) will directly call the relevant function (emulating the request), **saving an additional API call**.
+During server-side rendering, calling `$fetch` to fetch your internal [API routes](/docs/3.x/directory-structure/server) will directly call the relevant function (emulating the request), **saving an additional API call**.
 ::
 
 ::note{color="blue" icon="i-lucide-info"}

package/{3.api → 4.api}/3.utils/abort-navigation.md

@@ -9,7 +9,7 @@ links:
 ---
 
 ::warning
-`abortNavigation` is only usable inside a [route middleware handler](/docs/3.x/guide/directory-structure/middleware).
+`abortNavigation` is only usable inside a [route middleware handler](/docs/3.x/directory-structure/middleware).
 ::
 
 ## Type