@nuxt/docs 4.2.1 → 4.3.0

package/1.getting-started/14.layers.md

@@ -9,8 +9,8 @@ One of the core features of Nuxt is the layers and extending support. You can ex
 ## Use Cases
 
 - Share reusable configuration presets across projects using `nuxt.config` and `app.config`
-- Create a component library using [`app/components/`](/docs/4.x/guide/directory-structure/app/components) directory
-- Create utility and composable library using [`app/composables/`](/docs/4.x/guide/directory-structure/app/composables) and [`app/utils/`](/docs/4.x/guide/directory-structure/app/utils) directories
+- Create a component library using [`app/components/`](/docs/4.x/directory-structure/app/components) directory
+- Create utility and composable library using [`app/composables/`](/docs/4.x/directory-structure/app/composables) and [`app/utils/`](/docs/4.x/directory-structure/app/utils) directories
 - Create Nuxt module presets
 - Share standard setup across projects
 - Create Nuxt themes
@@ -30,7 +30,7 @@ In addition, named layer aliases to the `srcDir` of each of these layers will au
 Named layer aliases were introduced in Nuxt v3.16.0.
 ::
 
-In addition, you can extend from a layer by adding the [extends](/docs/4.x/api/nuxt-config#extends) property to your [`nuxt.config`](/docs/4.x/guide/directory-structure/nuxt-config) file.
+In addition, you can extend from a layer by adding the [extends](/docs/4.x/api/nuxt-config#extends) property to your [`nuxt.config`](/docs/4.x/directory-structure/nuxt-config) file.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -56,6 +56,10 @@ export default defineNuxtConfig({
 })
 ```
 
+::note
+If a branch is not specified, this will clone `main`.
+::
+
 ::tip
 You can override a layer's alias by specifying it in the options next to the layer source.
 
@@ -82,32 +86,60 @@ Nuxt uses [unjs/c12](https://github.com/unjs/c12) and [unjs/giget](https://githu
 
 When using multiple layers, it's important to understand the override order. Layers with **higher priority** override layers with lower priority when they define the same files or components.
 
-The priority order from highest to lowest is:
+### Priority Order
+
+From highest to lowest priority:
 
 1. **Your project files** - always have the highest priority
 2. **Auto-scanned layers** from `~~/layers` directory - sorted alphabetically (Z has higher priority than A)
 3. **Layers in `extends`** config - first entry has higher priority than second
 
-### When to Use Each
+### Practical Example
 
-- **`extends`** - Use for external dependencies (npm packages, remote repositories) or layers outside your project directory
-- **`~~/layers` directory** - Use for local layers that are part of your project
+Consider multiple layers defining the same component:
+
+```bash [Directory structure]
+layers/
+  1.base/
+    app/components/Button.vue    # Base button style
+  2.theme/
+    app/components/Button.vue    # Themed button (overrides base)
+app/
+  components/Button.vue          # Project button (overrides all layers)
+```
+
+In this case:
+- If only layers exist, `2.theme/Button.vue` is used (higher alphabetically)
+- If `app/components/Button.vue` exists in your project, it overrides all layers
+
+### Controlling Priority
+
+You can prefix layer directories with numbers to control the order:
+
+```bash [Directory structure]
+layers/
+  1.base/        # Lowest priority
+  2.features/    # Medium priority
+  3.admin/       # Highest priority (among layers)
+```
 
 ::tip
-If you need to control the order of auto-scanned layers, you can prefix them with numbers: `~/layers/1.z-layer`, `~/layers/2.a-layer`. This way `2.a-layer` will have higher priority than `1.z-layer`.
+This pattern is useful for creating base layers with defaults that can be progressively overridden by more specific layers.
 ::
 
-### Example
+### When to Use Each
+
+- **`~~/layers` directory** - Use for local layers that are part of your project
+- **`extends`** - Use for external dependencies (npm packages, remote repositories) or layers outside your project directory
+
+### Full Example with extends
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   extends: [
-    // Local layer outside the project
-    '../base',
-    // NPM package
-    '@my-themes/awesome',
-    // Remote repository
-    'github:my-themes/awesome#v1',
+    '../base', // Local layer outside project
+    '@my-themes/awesome', // NPM package
+    'github:my-themes/awesome#v1', // Remote repository
   ],
 })
 ```
@@ -119,7 +151,9 @@ If you also have `~~/layers/custom`, the priority order is:
 - `@my-themes/awesome`
 - `github:my-themes/awesome#v1` (lowest)
 
-This means your project files will override any layer, and `~~/layers/custom` will override anything in `extends`.
+::read-more{to="/docs/4.x/directory-structure/layers"}
+Learn about the **layers/ directory** to organize and share reusable code, components, composables, and configurations across your Nuxt application.
+::
 
 ::read-more{to="/docs/4.x/guide/going-further/layers"}
 Read more about layers in the **Layer Author Guide**.

package/1.getting-started/15.prerendering.md

@@ -32,6 +32,10 @@ pnpm nuxt generate
 bun x nuxt generate
 ```
 
+```bash [deno]
+deno x nuxt generate
+```
+
 ::
 
 You can now deploy the `.output/public` directory to any static hosting service or preview it locally with `npx serve .output/public`.
@@ -54,6 +58,7 @@ Read more about the `nuxt generate` command.
 You can manually specify routes that [Nitro](/docs/4.x/guide/concepts/server-engine) will fetch and pre-render during the build or ignore routes that you don't want to pre-render like `/dynamic` in the `nuxt.config` file:
 
 ```ts twoslash [nuxt.config.ts]
+// @errors: 2353
 export default defineNuxtConfig({
   nitro: {
     prerender: {
@@ -67,6 +72,7 @@ export default defineNuxtConfig({
 You can combine this with the `crawlLinks` option to pre-render a set of routes that the crawler can't discover like your `/sitemap.xml` or `/robots.txt`:
 
 ```ts twoslash [nuxt.config.ts]
+// @errors: 2353
 export default defineNuxtConfig({
   nitro: {
     prerender: {

package/1.getting-started/16.deployment.md

@@ -95,9 +95,10 @@ Nuxt can be deployed to several cloud providers with a minimal amount of configu
 
 In addition to Node.js servers and static hosting services, a Nuxt project can be deployed with several well-tested presets and minimal amount of configuration.
 
-You can explicitly set the desired preset in the [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config) file:
+You can explicitly set the desired preset in the [`nuxt.config.ts`](/docs/4.x/directory-structure/nuxt-config) file:
 
 ```ts twoslash [nuxt.config.ts]
+// @errors: 2353
 export default defineNuxtConfig({
   nitro: {
     preset: 'node-server',

package/1.getting-started/17.testing.md

@@ -5,7 +5,7 @@ navigation.icon: i-lucide-circle-check
 ---
 
 ::tip
-If you are a module author, you can find more specific information in the [Module Author's guide](/docs/4.x/guide/going-further/modules#testing).
+If you are a module author, you can find more specific information in the [Module Author's guide](/docs/4.x/guide/modules/testing).
 ::
 
 Nuxt offers first-class support for end-to-end and unit testing of your Nuxt application via `@nuxt/test-utils`, a library of test utilities and configuration that currently powers the [tests we use on Nuxt itself](https://github.com/nuxt/nuxt/tree/main/test) and tests throughout the module ecosystem.
@@ -63,7 +63,14 @@ We currently ship an environment for unit testing code that needs a [Nuxt](https
          {
            test: {
              name: 'unit',
-             include: ['test/{e2e,unit}/*.{test,spec}.ts'],
+             include: ['test/unit/*.{test,spec}.ts'],
+             environment: 'node',
+           },
+         },
+         {
+           test: {
+             name: 'e2e',
+             include: ['test/e2e/*.{test,spec}.ts'],
              environment: 'node',
            },
          },
@@ -151,6 +158,37 @@ test/
 
 You can of course opt for any test structure, but keeping the Nuxt runtime environment separated from Nuxt end-to-end tests is important for test stability.
 
+#### TypeScript Support in Tests
+
+By default, test files in `test/nuxt/` and `tests/nuxt/` directories are included in the [Nuxt app TypeScript context](/docs/4.x/guide/concepts/typescript#how-nuxt-uses-project-references). That means they will recognise Nuxt aliases (like `~/`, `@/`, `#imports`) and TypeScript will be aware of auto-imports that work in your Nuxt app.
+
+::tip
+This matches the recommended structure where only tests that need the Nuxt runtime environment are placed in these directories. Unit tests in other directories like `test/unit/` can be added manually if needed.
+::
+
+##### Adding other test directories
+
+If you have tests in other directories that you will be running in the Nuxt Vitest environment, you can include them in the Nuxt app TypeScript context by adding them to your configuration:
+
+<!-- @case-police-ignore tsConfig -->
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  typescript: {
+    tsConfig: {
+      include: [
+        // this path is relative to the generated .nuxt/tsconfig.json
+        '../test/other-nuxt-context/**/*',
+      ],
+    },
+  },
+})
+```
+
+::important
+Unit tests should not depend on Nuxt runtime features like auto-imports or composables. Only add TypeScript path alias support if your tests import from your source files (e.g., `~/utils/helpers`), not for Nuxt-specific features.
+::
+
 #### Running Tests
 
 With the project setup, you can run different test suites:
@@ -267,7 +305,7 @@ it('can also mount an app', async () => {
 
 This should be used together with utilities from Testing Library, e.g. `screen` and `fireEvent`. Install [@testing-library/vue](https://testing-library.com/docs/vue-testing-library/intro/) in your project to use these.
 
-Additionally, Testing Library also relies on testing globals for cleanup. You should turn these on in your [Vitest config](https://vitest.dev/config/#globals).
+Additionally, Testing Library also relies on testing globals for cleanup. You should turn these on in your [Vitest config](https://vitest.dev/config/globals).
 
 The passed in component will be rendered inside a `<div id="test-wrapper"></div>`.
 
@@ -730,6 +768,9 @@ pnpm add -D @playwright/test @nuxt/test-utils
 ```bash [bun]
 bun add --dev @playwright/test @nuxt/test-utils
 ```
+```bash [deno]
+deno add --dev npm:@playwright/test npm:@nuxt/test-utils
+```
 ::
 
 You can provide global Nuxt configuration, with the same configuration details as the `setup()` function mentioned earlier in this section.

package/1.getting-started/18.upgrade.md

@@ -28,6 +28,10 @@ pnpm nuxt upgrade
 bun x nuxt upgrade
 ```
 
+```bash [deno]
+deno x nuxt upgrade
+```
+
 ::
 
 ### Nightly Release Channel
@@ -198,6 +202,10 @@ pnpm add nuxt@^4.0.0
 bun add nuxt@^4.0.0
 ```
 
+```bash [deno]
+deno add npm:nuxt@^4.0.0
+```
+
 ::
 
 After upgrading, most Nuxt 4 behaviors are now the default. However, some features can still be configured if you need to maintain backward compatibility during your migration.
@@ -208,7 +216,7 @@ Breaking or significant changes are documented below along with migration steps
 
 ### Migrating Using Codemods
 
-To facilitate the upgrade process, we have collaborated with the [Codemod](https://github.com/codemod-com/codemod) team to automate many migration steps with some open-source codemods.
+To facilitate the upgrade process, we have collaborated with the [Codemod](https://github.com/codemod/codemod) team to automate many migration steps with some open-source codemods.
 
 ::note
 If you encounter any issues, please report them to the Codemod team with `npx codemod feedback` 🙏
@@ -221,25 +229,30 @@ You can run all the codemods mentioned in this guide using the following `codemo
 ::code-group
 
 ```bash [npm]
-# Using pinned version due to https://github.com/codemod-com/codemod/issues/1710
+# Using pinned version due to https://github.com/codemod/codemod/issues/1710
 npx codemod@0.18.7 nuxt/4/migration-recipe
 ```
 
 ```bash [yarn]
-# Using pinned version due to https://github.com/codemod-com/codemod/issues/1710
+# Using pinned version due to https://github.com/codemod/codemod/issues/1710
 yarn dlx codemod@0.18.7 nuxt/4/migration-recipe
 ```
 
 ```bash [pnpm]
-# Using pinned version due to https://github.com/codemod-com/codemod/issues/1710
+# Using pinned version due to https://github.com/codemod/codemod/issues/1710
 pnpm dlx codemod@0.18.7 nuxt/4/migration-recipe
 ```
 
 ```bash [bun]
-# Using pinned version due to https://github.com/codemod-com/codemod/issues/1710
+# Using pinned version due to https://github.com/codemod/codemod/issues/1710
 bun x codemod@0.18.7 nuxt/4/migration-recipe
 ```
 
+```bash [deno]
+# Using pinned version due to https://github.com/codemod/codemod/issues/1710
+deno x codemod@0.18.7 nuxt/4/migration-recipe
+```
+
 ::
 
 This command will execute all codemods in sequence, with the option to deselect any that you do not wish to run. Each codemod is also listed below alongside its respective change and can be executed independently.
@@ -463,7 +476,7 @@ export default defineNuxtConfig({
 // 4. project-module-2 (can override layer modules)
 ```
 
-If you encounter issues with module order dependencies due to needing to register a hook, consider using the [`modules:done` hook](/docs/4.x/guide/going-further/modules#custom-hooks) for modules that need to call a hook. This is run after all other modules have been loaded, which means it is safe to use.
+If you encounter issues with module order dependencies due to needing to register a hook, consider using the [`modules:done` hook](/docs/4.x/guide/modules/recipes-advanced) for modules that need to call a hook. This is run after all other modules have been loaded, which means it is safe to use.
 
 👉 See [PR #31507](https://github.com/nuxt/nuxt/pull/31507) and [issue #25719](https://github.com/nuxt/nuxt/issues/25719) for more details.
 
@@ -1053,7 +1066,7 @@ In Nuxt v3 we moved to a 'virtual' syntax with a `getContents()` function which
 
 In addition, `lodash/template` has had a succession of security issues. These do not really apply to Nuxt projects because it is being used at build-time, not runtime, and by trusted code. However, they still appear in security audits. Moreover, `lodash` is a hefty dependency and is unused by most projects.
 
-Finally, providing code serialization functions directly within Nuxt is not ideal. Instead, we maintain projects like [unjs/knitwork](http://github.com/unjs/knitwork) which can be dependencies of your project, and where security issues can be reported/resolved directly without requiring an upgrade of Nuxt itself.
+Finally, providing code serialization functions directly within Nuxt is not ideal. Instead, we maintain projects like [unjs/knitwork](https://github.com/unjs/knitwork) which can be dependencies of your project, and where security issues can be reported/resolved directly without requiring an upgrade of Nuxt itself.
 
 #### Migration Steps
 
@@ -1312,23 +1325,23 @@ Read more about Nitro's prerender configuration options.
 
 In the table below, there is a quick comparison between 3 versions of Nuxt:
 
-Feature / Version        | Nuxt 2          | Nuxt Bridge      | Nuxt 3+
--------------------------|-----------------|------------------|---------
-Vue                      | 2               | 2                | 3
-Stability                | 😊 Stable      | 😊 Stable         | 😊 Stable
-Performance              | 🏎 Fast        | ✈️ Faster          | 🚀 Fastest
-Nitro Engine             | ❌             | ✅                | ✅
-ESM support              | 🌙 Partial     | 👍 Better         | ✅
-TypeScript               | ☑️ Opt-in       | 🚧 Partial        | ✅
-Composition API          | ❌             | 🚧 Partial        | ✅
-Options API              | ✅             | ✅                | ✅
-Components Auto Import   | ✅             | ✅                | ✅
-`<script setup>` syntax  | ❌             | 🚧 Partial        | ✅
-Auto Imports             | ❌             | ✅                | ✅
-webpack                  | 4              | 4                 | 5
-Vite                     | ⚠️ Partial      | 🚧 Partial        | ✅
-Nuxt CLI                 | ❌ Old         | ✅ nuxt           | ✅ nuxt
-Static sites             | ✅             | ✅                | ✅
+| Feature / Version       | Nuxt 2     | Nuxt Bridge | Nuxt 3+    |
+|-------------------------|------------|-------------|------------|
+| Vue                     | 2          | 2           | 3          |
+| Stability               | 😊 Stable  | 😊 Stable   | 😊 Stable  |
+| Performance             | 🏎 Fast    | ✈️ Faster   | 🚀 Fastest |
+| Nitro Engine            | ❌          | ✅           | ✅          |
+| ESM support             | 🌙 Partial | 👍 Better   | ✅          |
+| TypeScript              | ☑️ Opt-in  | 🚧 Partial  | ✅          |
+| Composition API         | ❌          | 🚧 Partial  | ✅          |
+| Options API             | ✅          | ✅           | ✅          |
+| Components Auto Import  | ✅          | ✅           | ✅          |
+| `<script setup>` syntax | ❌          | 🚧 Partial  | ✅          |
+| Auto Imports            | ❌          | ✅           | ✅          |
+| webpack                 | 4          | 4           | 5          |
+| Vite                    | ⚠️ Partial | 🚧 Partial  | ✅          |
+| Nuxt CLI                | ❌ Old      | ✅ nuxt      | ✅ nuxt     |
+| Static sites            | ✅          | ✅           | ✅          |
 
 ## Nuxt 2 to Nuxt 3+
 

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

@@ -6,7 +6,7 @@ navigation.icon: i-vscode-icons-folder-type-temp
 ---
 
 ::important
-This directory should be added to your [`.gitignore`](/docs/4.x/guide/directory-structure/gitignore) file to avoid pushing the dev build output to your repository.
+This directory should be added to your [`.gitignore`](/docs/4.x/directory-structure/gitignore) file to avoid pushing the dev build output to your repository.
 ::
 
 This directory is interesting if you want to learn more about the files Nuxt generates based on your directory structure.

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

@@ -6,7 +6,7 @@ navigation.icon: i-vscode-icons-folder-type-package
 ---
 
 ::important
-This directory should be added to your [`.gitignore`](/docs/4.x/guide/directory-structure/gitignore) file to avoid pushing the build output to your repository.
+This directory should be added to your [`.gitignore`](/docs/4.x/directory-structure/gitignore) file to avoid pushing the build output to your repository.
 ::
 
 Use this directory to deploy your Nuxt application to production.

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

@@ -9,8 +9,8 @@ The directory usually contains the following types of files:
 
 - Stylesheets (CSS, SASS, etc.)
 - Fonts
-- Images that won't be served from the [`public/`](/docs/4.x/guide/directory-structure/public) directory.
+- Images that won't be served from the [`public/`](/docs/4.x/directory-structure/public) directory.
 
-If you want to serve assets from the server, we recommend taking a look at the [`public/`](/docs/4.x/guide/directory-structure/public) directory.
+If you want to serve assets from the server, we recommend taking a look at the [`public/`](/docs/4.x/directory-structure/public) directory.
 
 :read-more{to="/docs/4.x/getting-started/assets"}

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

@@ -358,7 +358,7 @@ Any nested directories need to be added first as they are scanned in order.
 
 ## npm Packages
 
-If you want to auto-import components from an npm package, you can use [`addComponent`](/docs/4.x/api/kit/components#addcomponent) in a [local module](/docs/4.x/guide/directory-structure/modules) to register them.
+If you want to auto-import components from an npm package, you can use [`addComponent`](/docs/4.x/api/kit/components#addcomponent) in a [local module](/docs/4.x/directory-structure/modules) to register them.
 
 ::code-group
 
@@ -438,7 +438,7 @@ You can also achieve a similar result with the `<ClientOnly>` component.
 
 Server components allow server-rendering individual components within your client-side apps. It's possible to use server components within Nuxt, even if you are generating a static site. That makes it possible to build complex sites that mix dynamic components, server-rendered HTML and even static chunks of markup.
 
-Server components can either be used on their own or paired with a [client component](/docs/4.x/guide/directory-structure/app/components#paired-with-a-client-component).
+Server components can either be used on their own or paired with a [client component](/docs/4.x/directory-structure/app/components#paired-with-a-client-component).
 
 :video-accordion{title="Watch Learn Vue video about Nuxt Server Components" videoId="u1yyXe86xJM"}
 
@@ -535,6 +535,10 @@ This means:
 * You can't access the 'island context' from the rest of your app and you can't access the context of the rest of your app from the island component. In other words, the server component or island is _isolated_ from the rest of your app.
 * Your plugins will run again when rendering the island, unless they have `env: { islands: false }` set (which you can do in an object-syntax plugin).
 
+::important
+Route middleware does not run when rendering island components. Middleware is a routing concept that applies to pages, not components, and is not designed to control component rendering.
+::
+
 Within an island component, you can access its island context through `nuxtApp.ssrContext.islandContext`. Note that while island components are still marked as experimental, the format of this context may change.
 
 ::note

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

@@ -71,7 +71,7 @@ export const useFoo = () => {
 
 ### Access plugin injections
 
-You can access [plugin injections](/docs/4.x/guide/directory-structure/app/plugins#providing-helpers) from composables:
+You can access [plugin injections](/docs/4.x/directory-structure/app/plugins#providing-helpers) from composables:
 
 ```ts [app/composables/test.ts]
 export const useHello = () => {
@@ -82,7 +82,7 @@ export const useHello = () => {
 
 ## How Files Are Scanned
 
-Nuxt only scans files at the top level of the [`app/composables/` directory](/docs/4.x/guide/directory-structure/app/composables), e.g.:
+Nuxt only scans files at the top level of the [`app/composables/` directory](/docs/4.x/directory-structure/app/composables), e.g.:
 
 ```bash [Directory Structure]
 -| composables/

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

@@ -11,7 +11,7 @@ For best performance, components placed in this directory will be automatically
 
 ## Enable Layouts
 
-Layouts are enabled by adding [`<NuxtLayout>`](/docs/4.x/api/components/nuxt-layout) to your [`app.vue`](/docs/4.x/guide/directory-structure/app/app):
+Layouts are enabled by adding [`<NuxtLayout>`](/docs/4.x/api/components/nuxt-layout) to your [`app.vue`](/docs/4.x/directory-structure/app/app):
 
 ```vue [app/app.vue]
 <template>
@@ -24,6 +24,7 @@ Layouts are enabled by adding [`<NuxtLayout>`](/docs/4.x/api/components/nuxt-lay
 To use a layout:
 - Set a `layout` property in your page with [definePageMeta](/docs/4.x/api/utils/define-page-meta).
 - Set the `name` prop of `<NuxtLayout>`.
+- Set the `appLayout` property in route rules.
 
 ::note
 The layout name is normalized to kebab-case, so `someLayout` becomes `some-layout`.
@@ -34,7 +35,7 @@ If no layout is specified, `app/layouts/default.vue` will be used.
 ::
 
 ::important
-If you only have a single layout in your application, we recommend using [`app.vue`](/docs/4.x/guide/directory-structure/app/app) instead.
+If you only have a single layout in your application, we recommend using [`app.vue`](/docs/4.x/directory-structure/app/app) instead.
 ::
 
 ::important
@@ -68,13 +69,19 @@ Then you can use the `custom` layout in your page:
 
 ```vue twoslash [pages/about.vue]
 <script setup lang="ts">
+declare module 'nuxt/app' {
+  interface NuxtLayouts {
+    'custom': unknown
+  }
+}
+// ---cut---
 definePageMeta({
   layout: 'custom',
 })
 </script>
 ```
 
-::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"}
 Learn more about `definePageMeta`.
 ::
 
@@ -117,6 +124,12 @@ You can also use the [`setPageLayout`](/docs/4.x/api/utils/set-page-layout) help
 
 ```vue twoslash
 <script setup lang="ts">
+declare module 'nuxt/app' {
+  interface NuxtLayouts {
+    'custom': unknown
+  }
+}
+// ---cut---
 function enableCustomLayout () {
   setPageLayout('custom')
 }
@@ -134,6 +147,25 @@ definePageMeta({
 </template>
 ```
 
+You can also set layouts for specific routes using the `appLayout` property in route rules:
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  routeRules: {
+    // Set layout for specific route
+    '/admin': { appLayout: 'admin' },
+    // Set layout for multiple routes
+    '/dashboard/**': { appLayout: 'dashboard' },
+    // Disable layout for a route
+    '/landing': { appLayout: false },
+  },
+})
+```
+
+::tip
+This is useful when you want to manage layouts centrally in your configuration rather than in each page file, or when you need to apply layouts to routes that don't have corresponding page components (such as catchall pages which might match many paths).
+::
+
 :link-example{to="/docs/4.x/examples/features/layouts"}
 
 ## Overriding a Layout on a Per-page Basis

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

@@ -20,7 +20,7 @@ Name of middleware are normalized to kebab-case: `myMiddleware` becomes `my-midd
 ::
 
 ::note
-Route middleware run within the Vue part of your Nuxt app. Despite the similar name, they are completely different from [server middleware](/docs/4.x/guide/directory-structure/server#server-middleware), which are run in the Nitro server part of your app.
+Route middleware run within the Vue part of your Nuxt app. Despite the similar name, they are completely different from [server middleware](/docs/4.x/directory-structure/server#server-middleware), which are run in the Nitro server part of your app.
 ::
 
 :video-accordion{title="Watch a video from Vue School on all 3 kinds of middleware" videoId="761471577" platform="vimeo"}

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

@@ -6,7 +6,7 @@ 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/4.x/guide/directory-structure/app/app). To force the pages system, set `pages: true` in `nuxt.config` or have a [`router.options.ts`](/docs/4.x/guide/recipes/custom-routing#using-routeroptions).
+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/4.x/directory-structure/app/app). To force the pages system, set `pages: true` in `nuxt.config` or have a [`router.options.ts`](/docs/4.x/guide/recipes/custom-routing#using-routeroptions).
 ::
 
 ## Usage
@@ -46,7 +46,7 @@ export default defineComponent({
 
 The `app/pages/index.vue` file will be mapped to the `/` route of your application.
 
-If you are using [`app.vue`](/docs/4.x/guide/directory-structure/app/app), make sure to use the [`<NuxtPage/>`](/docs/4.x/api/components/nuxt-page) component to display the current page:
+If you are using [`app.vue`](/docs/4.x/directory-structure/app/app), make sure to use the [`<NuxtPage/>`](/docs/4.x/api/components/nuxt-page) component to display the current page:
 
 ```vue [app/app.vue]
 <template>
@@ -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>`:
@@ -313,11 +334,11 @@ You can set a default value for this property [in your `nuxt.config`](/docs/4.x/
 
 #### `key`
 
-[See above](/docs/4.x/guide/directory-structure/app/pages#child-route-keys).
+[See above](/docs/4.x/directory-structure/app/pages#child-route-keys).
 
 #### `layout`
 
-You can define the layout used to render the route. This can be either false (to disable any layout), a string or a ref/computed, if you want to make it reactive in some way. [More about layouts](/docs/4.x/guide/directory-structure/app/layouts).
+You can define the layout used to render the route. This can be either false (to disable any layout), a string or a ref/computed, if you want to make it reactive in some way. [More about layouts](/docs/4.x/directory-structure/app/layouts).
 
 #### `layoutTransition` and `pageTransition`
 
@@ -327,7 +348,7 @@ You can set default values for these properties [in your `nuxt.config`](/docs/4.
 
 #### `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/4.x/guide/directory-structure/app/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/4.x/directory-structure/app/middleware).
 
 #### `name`
 
@@ -401,11 +422,11 @@ function navigate () {
 
 ## Client-Only Pages
 
-You can define a page as [client only](/docs/4.x/guide/directory-structure/app/components#client-components) by giving it a `.client.vue` suffix. None of the content of this page will be rendered on the server.
+You can define a page as [client only](/docs/4.x/directory-structure/app/components#client-components) by giving it a `.client.vue` suffix. None of the content of this page will be rendered on the server.
 
 ## Server-Only Pages
 
-You can define a page as [server only](/docs/4.x/guide/directory-structure/app/components#server-components) by giving it a `.server.vue` suffix. While you will be able to navigate to the page using client-side navigation, controlled by `vue-router`, it will be rendered with a server component automatically, meaning the code required to render the page will not be in your client-side bundle.
+You can define a page as [server only](/docs/4.x/directory-structure/app/components#server-components) by giving it a `.server.vue` suffix. While you will be able to navigate to the page using client-side navigation, controlled by `vue-router`, it will be rendered with a server component automatically, meaning the code required to render the page will not be in your client-side bundle.
 
 ::warning
 Server-only pages must have a single root element. (HTML comments are considered elements as well.)

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

@@ -134,7 +134,7 @@ export default defineNuxtPlugin({
 
 ## Using Composables
 
-You can use [composables](/docs/4.x/guide/directory-structure/app/composables) as well as [utils](/docs/4.x/guide/directory-structure/app/utils) within Nuxt plugins:
+You can use [composables](/docs/4.x/directory-structure/app/composables) as well as [utils](/docs/4.x/directory-structure/app/utils) within Nuxt plugins:
 
 ```ts [app/plugins/hello.ts]
 export default defineNuxtPlugin((nuxtApp) => {
@@ -200,7 +200,7 @@ const { $hello } = useNuxtApp()
 ```
 
 ::important
-Note that we highly recommend using [`composables`](/docs/4.x/guide/directory-structure/app/composables) instead of providing helpers to avoid polluting the global namespace and keep your main bundle entry small.
+Note that we highly recommend using [`composables`](/docs/4.x/directory-structure/app/composables) instead of providing helpers to avoid polluting the global namespace and keep your main bundle entry small.
 ::
 
 ::warning
@@ -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: