@nuxt/docs 3.20.2 → 3.21.1

package/2.directory-structure/1.middleware.md

@@ -48,21 +48,21 @@ Nuxt provides two globally available helpers that can be returned directly from
 1. [`navigateTo`](/docs/3.x/api/utils/navigate-to) - Redirects to the given route
 2. [`abortNavigation`](/docs/3.x/api/utils/abort-navigation) - Aborts the navigation, with an optional error message.
 
-Unlike [navigation guards](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards) from `vue-router`, a third `next()` argument is not passed, and **redirect or route cancellation is handled by returning a value from the middleware**.
+Unlike [navigation guards](https://router.vuejs.org/guide/advanced/navigation-guards#Global-Before-Guards) from `vue-router`, a third `next()` argument is not passed, and **redirect or route cancellation is handled by returning a value from the middleware**.
 
 Possible return values are:
 
 * nothing (a simple `return` or no return at all) - does not block navigation and will move to the next middleware function, if any, or complete the route navigation
-* `return navigateTo('/')` - redirects to the given path and will set the redirect code to [`302` Found](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/302) if the redirect happens on the server side
-* `return navigateTo('/', { redirectCode: 301 })` - redirects to the given path and will set the redirect code to [`301` Moved Permanently](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/301) if the redirect happens on the server side
+* `return navigateTo('/')` - redirects to the given path and will set the redirect code to [`302` Found](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/302) if the redirect happens on the server side
+* `return navigateTo('/', { redirectCode: 301 })` - redirects to the given path and will set the redirect code to [`301` Moved Permanently](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/301) if the redirect happens on the server side
 * `return abortNavigation()` - stops the current navigation
 * `return abortNavigation(error)` - rejects the current navigation with an error
 
-:read-more{to="/docs/api/utils/navigate-to"}
-:read-more{to="/docs/api/utils/abort-navigation"}
+:read-more{to="/docs/3.x/api/utils/navigate-to"}
+:read-more{to="/docs/3.x/api/utils/abort-navigation"}
 
 ::important
-We recommend using the helper functions above for performing redirects or stopping navigation. Other possible return values described in [the vue-router docs](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards) may work but there may be breaking changes in future.
+We recommend using the helper functions above for performing redirects or stopping navigation. Other possible return values described in [the vue-router docs](https://router.vuejs.org/guide/advanced/navigation-guards#Global-Before-Guards) may work but there may be breaking changes in future.
 ::
 
 ## Middleware Order
@@ -222,7 +222,7 @@ definePageMeta({
 
 Now, before navigation to that page can complete, the `auth` route middleware will be run.
 
-:link-example{to="/docs/examples/routing/middleware"}
+:link-example{to="/docs/3.x/examples/routing/middleware"}
 
 ## Setting Middleware at Build Time
 

package/2.directory-structure/1.modules.md

@@ -18,7 +18,7 @@ You don't need to add those local modules to your [`nuxt.config.ts`](/docs/3.x/d
 ```ts twoslash [modules/hello/index.ts]
 // `nuxt/kit` is a helper subpath import you can use when defining local modules
 // that means you do not need to add `@nuxt/kit` to your project's dependencies
-import { addServerHandler, createResolver, defineNuxtModule } from 'nuxt/kit'
+import { addComponentsDir, addServerHandler, createResolver, defineNuxtModule } from 'nuxt/kit'
 
 export default defineNuxtModule({
   meta: {
@@ -32,6 +32,12 @@ export default defineNuxtModule({
       route: '/api/hello',
       handler: resolver.resolve('./runtime/api-route'),
     })
+
+    // Add components
+    addComponentsDir({
+      path: resolver.resolve('./runtime/app/components'),
+      pathPrefix: true, // Prefix your exports to avoid conflicts with user code or other modules
+    })
   },
 })
 ```
@@ -59,7 +65,7 @@ modules/
   2.second-module.ts
 ```
 
-:read-more{to="/docs/guide/going-further/modules"}
+:read-more{to="/docs/3.x/guide/modules"}
 
 ::tip{icon="i-lucide-video" to="https://vueschool.io/lessons/creating-your-first-module-from-scratch?friend=nuxt" target="_blank"}
 Watch Vue School video about Nuxt private modules.

package/2.directory-structure/1.node_modules.md

@@ -5,7 +5,7 @@ head.title: "node_modules/"
 navigation.icon: i-vscode-icons-folder-type-node
 ---
 
-The package manager ([`npm`](https://docs.npmjs.com/cli/commands/npm/) or [`yarn`](https://yarnpkg.com) or [`pnpm`](https://pnpm.io/cli/install) or [`bun`](https://bun.com/package-manager)) creates this directory to store the dependencies of your project.
+The package manager ([`npm`](https://docs.npmjs.com/cli/commands/npm/) or [`yarn`](https://yarnpkg.com) or [`pnpm`](https://pnpm.io/cli/install) or [`bun`](https://bun.com/package-manager) or [`deno`](https://docs.deno.com/runtime/getting_started/installation/)) creates this directory to store the dependencies of your project.
 
 ::important
 This directory should be added to your [`.gitignore`](/docs/3.x/directory-structure/gitignore) file to avoid pushing the dependencies to your repository.

package/2.directory-structure/1.pages.md

@@ -6,12 +6,12 @@ navigation.icon: i-vscode-icons-folder-type-view
 ---
 
 ::note
-To reduce your application's bundle size, this directory is **optional**, meaning that [`vue-router`](https://router.vuejs.org) won't be included if you only use [`app.vue`](/docs/3.x/directory-structure/app). To force the pages system, set `pages: true` in `nuxt.config` or have a [`app/router.options.ts`](/docs/3.x/guide/recipes/custom-routing#using-approuteroptions).
+To reduce your application's bundle size, this directory is **optional**, meaning that [`vue-router`](https://router.vuejs.org) won't be included if you only use [`app.vue`](/docs/3.x/directory-structure/app). To force the pages system, set `pages: true` in `nuxt.config` or have a [`router.options.ts`](/docs/3.x/guide/recipes/custom-routing#using-routeroptions).
 ::
 
 ## Usage
 
-Pages are Vue components and can have any [valid extension](/docs/3.x/api/configuration/nuxt-config#extensions) that Nuxt supports (by default `.vue`, `.js`, `.jsx`, `.mjs`, `.ts` or `.tsx`).
+Pages are Vue components and can have any [valid extension](/docs/3.x/api/nuxt-config#extensions) that Nuxt supports (by default `.vue`, `.js`, `.jsx`, `.mjs`, `.ts` or `.tsx`).
 
 Nuxt will automatically create a route for every page in your `~/pages/` directory.
 
@@ -33,7 +33,7 @@ export default defineComponent({
 ```
 
 ```tsx twoslash [pages/index.tsx]
-// https://nuxt.com/docs/examples/advanced/jsx
+// https://nuxt.com/docs/3.x/examples/advanced/jsx
 // https://vuejs.org/guide/extras/render-function.html#jsx-tsx
 export default defineComponent({
   render () {
@@ -93,7 +93,7 @@ Here are some examples to illustrate what a page with a single root element look
 
 ## Dynamic Routes
 
-If you place anything within square brackets, it will be turned into a [dynamic route](https://router.vuejs.org/guide/essentials/dynamic-matching.html) parameter. You can mix and match multiple parameters and even non-dynamic text within a file name or directory.
+If you place anything within square brackets, it will be turned into a [dynamic route](https://router.vuejs.org/guide/essentials/dynamic-matching) parameter. You can mix and match multiple parameters and even non-dynamic text within a file name or directory.
 
 If you want a parameter to be _optional_, you must enclose it in double square brackets - for example, `~/pages/[[slug]]/index.vue` or `~/pages/[[slug]].vue` will match both `/` and `/test`.
 
@@ -154,7 +154,7 @@ Navigating to `/hello/world` would render:
 
 ## Nested Routes
 
-It is possible to display [nested routes](https://next.router.vuejs.org/guide/essentials/nested-routes.html) with `<NuxtPage>`.
+It is possible to display [nested routes](https://router.vuejs.org/guide/essentials/nested-routes) with `<NuxtPage>`.
 
 Example:
 
@@ -228,7 +228,7 @@ definePageMeta({
 </script>
 ```
 
-:link-example{to="/docs/examples/routing/pages"}
+:link-example{to="/docs/3.x/examples/routing/pages"}
 
 ## Route Groups
 
@@ -246,6 +246,27 @@ For example:
 
 This will produce `/`, `/about` and `/contact` pages in your app. The `marketing` group is ignored for purposes of your URL structure.
 
+### Accessing Route Groups
+
+Route groups are automatically available in the route metadata as `route.meta.groups`.
+This allows you to access the group information in your components for conditional logic, styling, or other purposes.
+
+```vue {}[pages/(marketing)/about.vue]
+<script setup lang="ts">
+const route = useRoute()
+
+console.log(route.meta.groups) // Output: ['marketing']
+</script>
+
+<template>
+  <div>
+    <p v-if="route.meta.groups?.includes('marketing')">
+      This is a marketing page
+    </p>
+  </div>
+</template>
+```
+
 ## Page Metadata
 
 You might want to define metadata for each route in your app. You can do this using the `definePageMeta` macro, which will work both in `<script>` and in `<script setup>`:
@@ -268,9 +289,9 @@ console.log(route.meta.title) // My home page
 </script>
 ```
 
-If you are using nested routes, the page metadata from all these routes will be merged into a single object. For more on route meta, see the [vue-router docs](https://router.vuejs.org/guide/advanced/meta.html#route-meta-fields).
+If you are using nested routes, the page metadata from all these routes will be merged into a single object. For more on route meta, see the [vue-router docs](https://router.vuejs.org/guide/advanced/meta).
 
-Much like `defineEmits` or `defineProps` (see [Vue docs](https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits)), `definePageMeta` is a **compiler macro**. It will be compiled away so you cannot reference it within your component. Instead, the metadata passed to it will be hoisted out of the component.
+Much like `defineEmits` or `defineProps` (see [Vue docs](https://vuejs.org/api/sfc-script-setup#defineprops-defineemits)), `definePageMeta` is a **compiler macro**. It will be compiled away so you cannot reference it within your component. Instead, the metadata passed to it will be hoisted out of the component.
 Therefore, the page meta object cannot reference the component. However, it can reference imported bindings, as well as locally defined **pure functions**.
 
 ::warning
@@ -301,19 +322,19 @@ Of course, you are welcome to define metadata for your own use throughout your a
 
 #### `alias`
 
-You can define page aliases. They allow you to access the same page from different paths. It can be either a string or an array of strings as defined [in the vue-router documentation](https://router.vuejs.org/guide/essentials/redirect-and-alias.html#Alias).
+You can define page aliases. They allow you to access the same page from different paths. It can be either a string or an array of strings as defined [in the vue-router documentation](https://router.vuejs.org/guide/essentials/redirect-and-alias#Alias).
 
 #### `keepalive`
 
-Nuxt will automatically wrap your page in [the Vue `<KeepAlive>` component](https://vuejs.org/guide/built-ins/keep-alive.html#keepalive) if you set `keepalive: true` in your `definePageMeta`. This might be useful to do, for example, in a parent route that has dynamic child routes, if you want to preserve page state across route changes.
+Nuxt will automatically wrap your page in [the Vue `<KeepAlive>` component](https://vuejs.org/guide/built-ins/keep-alive#keepalive) if you set `keepalive: true` in your `definePageMeta`. This might be useful to do, for example, in a parent route that has dynamic child routes, if you want to preserve page state across route changes.
 
-When your goal is to preserve state for parent routes use this syntax: `<NuxtPage keepalive />`. You can also set props to be passed to `<KeepAlive>` (see [a full list](https://vuejs.org/api/built-in-components.html#keepalive)).
+When your goal is to preserve state for parent routes use this syntax: `<NuxtPage keepalive />`. You can also set props to be passed to `<KeepAlive>` (see [a full list](https://vuejs.org/api/built-in-components#keepalive)).
 
 You can set a default value for this property [in your `nuxt.config`](/docs/3.x/api/nuxt-config#keepalive).
 
 #### `key`
 
-[See above](#child-route-keys).
+[See above](/docs/3.x/directory-structure/pages#child-route-keys).
 
 #### `layout`
 
@@ -321,13 +342,13 @@ You can define the layout used to render the route. This can be either false (to
 
 #### `layoutTransition` and `pageTransition`
 
-You can define transition properties for the `<transition>` component that wraps your pages and layouts, or pass `false` to disable the `<transition>` wrapper for that route. You can see [a list of options that can be passed](https://vuejs.org/api/built-in-components.html#transition) or read [more about how transitions work](https://vuejs.org/guide/built-ins/transition.html#transition).
+You can define transition properties for the `<transition>` component that wraps your pages and layouts, or pass `false` to disable the `<transition>` wrapper for that route. You can see [a list of options that can be passed](https://vuejs.org/api/built-in-components#transition) or read [more about how transitions work](https://vuejs.org/guide/built-ins/transition#transition).
 
 You can set default values for these properties [in your `nuxt.config`](/docs/3.x/api/nuxt-config#layouttransition).
 
 #### `middleware`
 
-You can define middleware to apply before loading this page. It will be merged with all the other middleware used in any matching parent/child routes. It can be a string, a function (an anonymous/inlined middleware function following [the global before guard pattern](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards)), or an array of strings/functions. [More about named middleware](/docs/3.x/directory-structure/middleware).
+You can define middleware to apply before loading this page. It will be merged with all the other middleware used in any matching parent/child routes. It can be a string, a function (an anonymous/inlined middleware function following [the global before guard pattern](https://router.vuejs.org/guide/advanced/navigation-guards#Global-Before-Guards)), or an array of strings/functions. [More about named middleware](/docs/3.x/directory-structure/middleware).
 
 #### `name`
 
@@ -335,7 +356,7 @@ You may define a name for this page's route.
 
 #### `path`
 
-You may define a path matcher, if you have a more complex pattern than can be expressed with the file name. See [the `vue-router` docs](https://router.vuejs.org/guide/essentials/route-matching-syntax.html#custom-regex-in-params) for more information.
+You may define a path matcher, if you have a more complex pattern than can be expressed with the file name. See [the `vue-router` docs](https://router.vuejs.org/guide/essentials/route-matching-syntax#Custom-regex-in-params) for more information.
 
 #### `props`
 
@@ -370,7 +391,7 @@ A simple link to the `index.vue` page in your `pages` folder:
 </template>
 ```
 
-::read-more{to="/docs/api/components/nuxt-link"}
+::read-more{to="/docs/3.x/api/components/nuxt-link"}
 Learn more about `<NuxtLink>` usage.
 ::
 
@@ -415,7 +436,7 @@ Server-only pages must have a single root element. (HTML comments are considered
 
 As your app gets bigger and more complex, your routing might require more flexibility. For this reason, Nuxt directly exposes the router, routes and router options for customization in different ways.
 
-:read-more{to="/docs/guide/recipes/custom-routing"}
+:read-more{to="/docs/3.x/guide/recipes/custom-routing"}
 
 ## Multiple Pages Directories
 
@@ -443,4 +464,4 @@ export default defineNuxtConfig({
 })
 ```
 
-:read-more{to="/docs/guide/going-further/layers"}
+:read-more{to="/docs/3.x/guide/going-further/layers"}

package/2.directory-structure/1.plugins.md

@@ -205,7 +205,7 @@ Note that we highly recommend using [`composables`](/docs/3.x/directory-structur
 
 ::warning
 **If your plugin provides a `ref` or `computed`, it will not be unwrapped in a component `<template>`.** :br
-This is due to how Vue works with refs that aren't top-level to the template. You can read more about it [in the Vue documentation](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#caveat-when-unwrapping-in-templates).
+This is due to how Vue works with refs that aren't top-level to the template. You can read more about it [in the Vue documentation](https://vuejs.org/guide/essentials/reactivity-fundamentals#caveat-when-unwrapping-in-templates).
 ::
 
 ## Typing Plugins
@@ -253,6 +253,9 @@ pnpm add -D vue-gtag-next
 ```bash [bun]
 bun add -D vue-gtag-next
 ```
+```bash [deno]
+deno add -D npm:vue-gtag-next
+```
 ::
 
 Then create a plugin file:

package/2.directory-structure/1.public.md

@@ -22,6 +22,6 @@ useSeoMeta({
 </script>
 ```
 
-::tip{to="https://v2.nuxt.com/docs/directory-structure/static" target="_blank"}
+::tip{to="https://v2.nuxt.com/docs/directory-structure/static/" target="_blank"}
 This is known as the [`static/`] directory in Nuxt 2.
 ::

package/2.directory-structure/1.server.md

@@ -112,8 +112,6 @@ For example, you can define a custom handler utility that wraps the original han
 **Example:**
 
 ```ts [server/utils/handler.ts]
-import type { EventHandler, EventHandlerRequest } from 'h3'
-
 export const defineWrappedResponseHandler = <T extends EventHandlerRequest, D> (
   handler: EventHandler<T, D>,
 ): EventHandler<T, D> =>
@@ -130,6 +128,28 @@ export const defineWrappedResponseHandler = <T extends EventHandlerRequest, D> (
   })
 ```
 
+```ts [server/api/hello.get.ts]
+export default defineWrappedResponseHandler(event => 'hello world')
+```
+
+## Server Alias
+
+You can use the `#server` alias to import files from anywhere within the `server/` directory, regardless of the importing file's location.
+
+```ts [server/api/users/[id]/profile.ts]
+// Instead of relative paths like this:
+// import { formatUser } from '../../../utils/formatUser'
+
+// Use the #server alias:
+import { formatUser } from '#server/utils/formatUser'
+```
+
+This alias ensures consistent imports across your server code, especially useful in deeply nested route handlers.
+
+::note
+The `#server` alias can only be used within the `server/` directory. Importing from `#server` in client code will result in an error.
+::
+
 ## Server Types
 
 ::tip
@@ -168,7 +188,7 @@ You can now universally call this API on `/api/hello/nuxt` and get `Hello, nuxt!
 
 ### Matching HTTP Method
 
-Handle file names can be suffixed with `.get`, `.post`, `.put`, `.delete`, ... to match request's [HTTP Method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods).
+Handle file names can be suffixed with `.get`, `.post`, `.put`, `.delete`, ... to match request's [HTTP Method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Methods).
 
 ```ts [server/api/test.get.ts]
 export default defineEventHandler(() => 'Test get handler')
@@ -236,7 +256,7 @@ export default defineEventHandler(async (event) => {
 })
 ```
 
-::tip{to="https://unjs.io/blog/2023-08-15-h3-towards-the-edge-of-the-web#runtime-type-safe-request-utils"}
+::tip{to="https://unjs.io/blog/2023-08-15-h3-towards-the-edge-of-the-web/#runtime-type-safe-request-utils"}
 Alternatively, use `readValidatedBody` with a schema validator such as Zod for runtime and type safety.
 ::
 
@@ -287,8 +307,8 @@ export default defineEventHandler((event) => {
 
   if (!Number.isInteger(id)) {
     throw createError({
-      statusCode: 400,
-      statusMessage: 'ID should be an integer',
+      status: 400,
+      statusText: 'ID should be an integer',
     })
   }
   return 'All good'
@@ -402,7 +422,7 @@ export default defineNuxtConfig({
 })
 ```
 
-:read-more{to="/docs/guide/concepts/server-engine"}
+:read-more{to="/docs/3.x/guide/concepts/server-engine"}
 
 ### Nested Router
 
@@ -464,7 +484,7 @@ Never combine `next()` callback with a legacy middleware that is `async` or retu
 
 ### Server Storage
 
-Nitro provides a cross-platform [storage layer](https://nitro.build/guide/storage). In order to configure additional storage mount points, you can use `nitro.storage`, or [server plugins](#server-plugins).
+Nitro provides a cross-platform [storage layer](https://nitro.build/guide/storage). In order to configure additional storage mount points, you can use `nitro.storage`, or [server plugins](/docs/3.x/directory-structure/server#server-plugins).
 
 **Example of adding a Redis storage:**
 

package/2.directory-structure/1.shared.md

@@ -41,7 +41,7 @@ export default function (input: string) {
 }
 ```
 
-You can now use [auto-imported](/docs/3.x/directory-structure/shared#auto-imports) utilities in your Nuxt app and `server/` directory.
+You can now use [auto-imported](/docs/3.x/directory-structure/shared) utilities in your Nuxt app and `server/` directory.
 
 ```vue [app.vue]
 <script setup lang="ts">
@@ -71,7 +71,7 @@ Only files in the `shared/utils/` and `shared/types/` directories will be auto-i
 The way `shared/utils` and `shared/types` auto-imports work and are scanned is identical to the [`composables/`](/docs/3.x/directory-structure/composables) and [`utils/`](/docs/3.x/directory-structure/utils) directories.
 ::
 
-:read-more{to="/docs/guide/directory-structure/composables#how-files-are-scanned"}
+:read-more{to="/docs/3.x/directory-structure/composables#how-files-are-scanned"}
 
 ```bash [Directory Structure]
 -| shared/
@@ -101,4 +101,4 @@ import upper from '#shared/utils/formatters/upper'
 
 This alias ensures consistent imports across your application, regardless of the importing file's location.
 
-:read-more{to="/docs/guide/concepts/auto-imports"}
+:read-more{to="/docs/3.x/guide/concepts/auto-imports"}

package/2.directory-structure/1.utils.md

@@ -35,9 +35,9 @@ You can now use auto imported utility functions in `.js`, `.ts` and `.vue` files
 </template>
 ```
 
-:read-more{to="/docs/guide/concepts/auto-imports"}
+:read-more{to="/docs/3.x/guide/concepts/auto-imports"}
 
-:link-example{to="/docs/examples/features/auto-imports"}
+:link-example{to="/docs/3.x/examples/features/auto-imports"}
 
 ::tip
 The way `utils/` auto-imports work and are scanned is identical to the [`composables/`](/docs/3.x/directory-structure/composables) directory.

package/2.directory-structure/2.env.md

@@ -56,7 +56,7 @@ Since `.env` files are not used in production, you must explicitly set environme
 * Many cloud service providers, such as Vercel, Netlify, and AWS, provide interfaces for setting environment variables via their dashboards, CLI tools or configuration files.
 
 ::important
-`runtimeConfig` [won't pick up environment variables that don't start with `NUXT_` in production] (https://nuxt.com/docs/guide/going-further/runtime-config#environment-variables).
+`runtimeConfig` [won't pick up environment variables that don't start with `NUXT_` in production] (https://nuxt.com/docs/3.x/guide/going-further/runtime-config#environment-variables).
 ::
 
 ## Production Preview
@@ -71,9 +71,9 @@ DATABASE_HOST=mydatabaseconnectionstring node .output/server/index.mjs
 
 Note that for a purely static site, it is not possible to set runtime configuration config after your project is prerendered.
 
-:read-more{to="/docs/guide/going-further/runtime-config"}
+:read-more{to="/docs/3.x/guide/going-further/runtime-config"}
 
 ::note
 If you want to use environment variables set at build time but do not care about updating these down the line (or only need to update them reactively _within_ your app) then `appConfig` may be a better choice. You can define `appConfig` both within your `nuxt.config` (using environment variables) and also within an `~/app.config.ts` file in your project.
-:read-more{to="/docs/guide/directory-structure/app-config"}
+:read-more{to="/docs/3.x/directory-structure/app-config"}
 ::

package/2.directory-structure/2.nuxtignore.md

@@ -3,6 +3,7 @@ title: .nuxtignore
 head.title: '.nuxtignore'
 description: The .nuxtignore file lets Nuxt ignore files in your project’s root directory during the build phase.
 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.

package/2.directory-structure/2.nuxtrc.md

@@ -2,7 +2,7 @@
 title: ".nuxtrc"
 description: "The .nuxtrc file allows you to define nuxt configurations in a flat syntax."
 head.title: ".nuxtrc"
-navigation.icon: i-vscode-icons-file-type-nuxt  
+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).
@@ -23,6 +23,9 @@ devtools.enabled=true
 # Add Nuxt modules
 modules[]=@nuxt/image
 modules[]=nuxt-security
+
+# Module setups (automatically added by Nuxt)
+setups.@nuxt/test-utils="3.23.0"
 ```
 
 If present, the properties in the `nuxt.config` file will overwrite the properties in `.nuxtrc` file.
@@ -31,7 +34,7 @@ If present, the properties in the `nuxt.config` file will overwrite the properti
 Nuxt automatically adds a `setups` section to track module installation and upgrade state. This is used internally for [module lifecycle hooks](/docs/3.x/api/kit/modules#using-lifecycle-hooks-for-module-installation-and-upgrade) and should not be modified manually.
 ::
 
-::read-more{to="/docs/api/configuration/nuxt-config"}
+::read-more{to="/docs/3.x/api/configuration/nuxt-config"}
 Discover all the available options in the **Nuxt configuration** documentation.
 ::
 

package/2.directory-structure/3.app-config.md

@@ -5,7 +5,7 @@ description: Expose reactive configuration within your application with the App
 navigation.icon: i-vscode-icons-file-type-light-config
 ---
 
-Nuxt provides an `app.config` config file to expose reactive configuration within your application with the ability to update it at runtime within lifecycle or using a nuxt plugin and editing it with HMR (hot-module-replacement).
+Nuxt provides an `app.config.ts` config file to expose reactive configuration within your application with the ability to update it at runtime within lifecycle or using a nuxt plugin and editing it with HMR (hot-module-replacement).
 
 You can easily provide runtime app configuration using `app.config.ts` file. It can have either of `.ts`, `.js`, or `.mjs` extensions.
 
@@ -59,7 +59,7 @@ console.log(appConfig) // { foo: 'baz' }
 </script>
 ```
 
-::read-more{to="/docs/api/utils/update-app-config"}
+::read-more{to="/docs/3.x/api/utils/update-app-config"}
 Read more about the `updateAppConfig` utility.
 ::
 

package/2.directory-structure/3.app.md

@@ -21,7 +21,7 @@ With Nuxt, the [`pages/`](/docs/3.x/directory-structure/pages) directory is opti
 </template>
 ```
 
-:link-example{to="/docs/examples/hello-world"}
+:link-example{to="/docs/3.x/examples/hello-world"}
 
 ### Usage with Pages
 
@@ -51,7 +51,7 @@ You can also define the common structure of your application directly in `app.vu
 Remember that `app.vue` acts as the main component of your Nuxt application. Anything you add to it (JS and CSS) will be global and included in every page.
 ::
 
-::read-more{to="/docs/guide/directory-structure/pages"}
+::read-more{to="/docs/3.x/directory-structure/pages"}
 Learn more about how to structure your pages using the `pages/` directory.
 ::
 
@@ -67,6 +67,6 @@ When your application requires different layouts for different pages, you can us
 </template>
 ```
 
-::read-more{to="/docs/guide/directory-structure/layouts"}
+::read-more{to="/docs/3.x/directory-structure/layouts"}
 Learn more about how to structure your layouts using the `layouts/` directory.
 ::

package/2.directory-structure/3.error.md

@@ -16,7 +16,7 @@ const props = defineProps<{ error: NuxtError }>()
 
 <template>
   <div>
-    <h1>{{ error.statusCode }}</h1>
+    <h1>{{ error.status }}</h1>
     <NuxtLink to="/">Go back home</NuxtLink>
   </div>
 </template>
@@ -31,12 +31,16 @@ The error page has a single prop - `error` which contains an error for you to ha
 The `error` object provides the following fields:
 ```ts
 interface NuxtError {
-  statusCode: number
+  status: number
   fatal: boolean
   unhandled: boolean
-  statusMessage?: string
+  statusText?: string
   data?: unknown
   cause?: unknown
+  // legacy/deprecated equivalent of `status`
+  statusCode: number
+  // legacy/deprecated equivalent of `statusText`
+  statusMessage?: string
 }
 ```
 
@@ -44,8 +48,8 @@ If you have an error with custom fields they will be lost; you should assign the
 
 ```ts
 throw createError({
-  statusCode: 404,
-  statusMessage: 'Page Not Found',
+  status: 404,
+  statusText: 'Page Not Found',
   data: {
     myCustomField: true,
   },

package/2.directory-structure/3.nuxt-config.md

@@ -27,7 +27,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::read-more{to="/docs/api/configuration/nuxt-config"}
+::read-more{to="/docs/3.x/api/configuration/nuxt-config"}
 Discover all the available options in the **Nuxt configuration** documentation.
 ::
 

package/2.directory-structure/3.package.md

@@ -27,6 +27,6 @@ The minimal `package.json` of your Nuxt application should looks like:
 }
 ```
 
-::read-more{icon="i-simple-icons-npm" to="https://docs.npmjs.com/cli/configuring-npm/package-json" target="_blank"}
+::read-more{icon="i-simple-icons-npm" to="https://docs.npmjs.com/cli/configuring-npm/package-json/" target="_blank"}
 Read more about the `package.json` file.
 ::

package/2.directory-structure/3.tsconfig.md

@@ -1,13 +1,13 @@
 ---
 title: "tsconfig.json"
-description: "Nuxt generates a .nuxt/tsconfig.json file with sensible defaults and your aliases."
+description: "Learn how Nuxt manages TypeScript configuration across different parts of your project."
 head.title: "tsconfig.json"
 navigation.icon: i-vscode-icons-file-type-tsconfig
 ---
 
 Nuxt [automatically generates](/docs/3.x/guide/concepts/typescript) a `.nuxt/tsconfig.json` file with the resolved aliases you are using in your Nuxt project, as well as with other sensible defaults.
 
-You can benefit from this by creating a `tsconfig.json` in the root of your project with the following content:
+Your Nuxt project should include the following `tsconfig.json` file at the root of the project:
 
 ```json [tsconfig.json]
 {
@@ -28,6 +28,7 @@ If you need to customize your `paths`, this will override the auto-generated pat
 You can customize the TypeScript configuration of your Nuxt project for each context (`app` and `server`) in the `nuxt.config.ts` file.
 <!-- @case-police-ignore tsConfig -->
 ```ts twoslash [nuxt.config.ts]
+// @errors: 2353
 export default defineNuxtConfig({
   typescript: {
     // customize tsconfig.app.json

package/2.directory-structure/index.md

@@ -10,7 +10,7 @@ Nuxt applications have a specific directory structure that is used to organize t
 
 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
+## App Directory
 
 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
@@ -27,7 +27,13 @@ This directory also includes specific files:
 - [`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
+## 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`).
+
+## 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.
@@ -36,12 +42,6 @@ The [`server/`](/docs/3.x/directory-structure/server) directory is the directory
 - [`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.
@@ -54,6 +54,10 @@ The [`content/`](/docs/3.x/directory-structure/content) directory is enabled by
 
 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.
 
+## Layers Directory
+
+The [`layers/`](/docs/3.x/directory-structure/layers) directory allows you to organize and share reusable code, components, composables, and configurations. Layers within this directory are automatically registered in your project.
+
 ## Nuxt Files
 
 - [`nuxt.config.ts`](/docs/3.x/directory-structure/nuxt-config) file is the main configuration file for the Nuxt application.