@nuxt/docs 3.20.1 → 3.21.0

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

@@ -163,7 +163,7 @@ Read more about the options for `hydrate-on-visible`.
 ::
 
 ::note
-Under the hood, this uses Vue's built-in [`hydrateOnVisible` strategy](https://vuejs.org/guide/components/async.html#hydrate-on-visible).
+Under the hood, this uses Vue's built-in [`hydrateOnVisible` strategy](https://vuejs.org/guide/components/async#hydrate-on-visible).
 ::
 
 #### `hydrate-on-idle`
@@ -181,7 +181,7 @@ You can also pass a number which serves as a max timeout.
 ```
 
 ::note
-Under the hood, this uses Vue's built-in [`hydrateOnIdle` strategy](https://vuejs.org/guide/components/async.html#hydrate-on-idle).
+Under the hood, this uses Vue's built-in [`hydrateOnIdle` strategy](https://vuejs.org/guide/components/async#hydrate-on-idle).
 ::
 
 #### `hydrate-on-interaction`
@@ -199,7 +199,7 @@ Hydrates the component after a specified interaction (e.g., click, mouseover).
 If you do not pass an event or list of events, it defaults to hydrating on `pointerenter`, `click` and `focus`.
 
 ::note
-Under the hood, this uses Vue's built-in [`hydrateOnInteraction` strategy](https://vuejs.org/guide/components/async.html#hydrate-on-interaction).
+Under the hood, this uses Vue's built-in [`hydrateOnInteraction` strategy](https://vuejs.org/guide/components/async#hydrate-on-interaction).
 ::
 
 #### `hydrate-on-media-query`
@@ -215,7 +215,7 @@ Hydrates the component when the window matches a media query.
 ```
 
 ::note
-Under the hood, this uses Vue's built-in [`hydrateOnMediaQuery` strategy](https://vuejs.org/guide/components/async.html#hydrate-on-media-query).
+Under the hood, this uses Vue's built-in [`hydrateOnMediaQuery` strategy](https://vuejs.org/guide/components/async#hydrate-on-media-query).
 ::
 
 #### `hydrate-after`
@@ -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/3.x/api/kit/components#addcomponent) in a [local module](/docs/3.x/guide/directory-structure/modules) to register them.
+If you want to auto-import components from an npm package, you can use [`addComponent`](/docs/3.x/api/kit/components#addcomponent) in a [local module](/docs/3.x/directory-structure/modules) to register them.
 
 ::code-group
 
@@ -430,7 +430,7 @@ This feature only works with Nuxt auto-imports and `#components` imports. Explic
 `.client` components are rendered only after being mounted. To access the rendered template using `onMounted()`, add `await nextTick()` in the callback of the `onMounted()` hook.
 ::
 
-::read-more{to="/docs/api/components/client-only"}
+::read-more{to="/docs/3.x/api/components/client-only"}
 You can also achieve a similar result with the `<ClientOnly>` component.
 ::
 
@@ -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](#paired-with-a-client-component).
+Server components can either be used on their own or paired with a [client component](/docs/3.x/directory-structure/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
@@ -564,7 +568,7 @@ In this case, the `.server` + `.client` components are two 'halves' of a compone
 
 There are a number of components that Nuxt provides, including `<ClientOnly>` and `<DevOnly>`. You can read more about them in the API documentation.
 
-::read-more{to="/docs/api"}
+::read-more{to="/docs/3.x/api"}
 ::
 
 ## Library Authors
@@ -626,4 +630,4 @@ export default defineNuxtConfig({
 
 It will automatically import the components only if used and also support HMR when updating your components in `node_modules/awesome-ui/components/`.
 
-:link-example{to="/docs/examples/features/auto-imports"}
+:link-example{to="/docs/3.x/examples/features/auto-imports"}

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

@@ -42,9 +42,9 @@ const foo = useFoo()
 The `composables/` directory in Nuxt does not provide any additional reactivity capabilities to your code. Instead, any reactivity within composables is achieved using Vue's Composition API mechanisms, such as ref and reactive. Note that reactive code is also not limited to the boundaries of the `composables/` directory. You are free to employ reactivity features wherever they're needed in your application.
 ::
 
-: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"}
 
 ## Types
 
@@ -71,7 +71,7 @@ export const useFoo = () => {
 
 ### Access plugin injections
 
-You can access [plugin injections](/docs/3.x/guide/directory-structure/plugins#providing-helpers) from composables:
+You can access [plugin injections](/docs/3.x/directory-structure/plugins#providing-helpers) from composables:
 
 ```ts [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 [`composables/` directory](/docs/3.x/guide/directory-structure/composables), e.g.:
+Nuxt only scans files at the top level of the [`composables/` directory](/docs/3.x/directory-structure/composables), e.g.:
 
 ```bash [Directory Structure]
 -| composables/

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

@@ -5,7 +5,7 @@ description: Use the content/ directory to create a file-based CMS for your appl
 navigation.icon: i-vscode-icons-folder-type-log
 ---
 
-[Nuxt Content](https://content.nuxt.com) reads the [`content/` directory](/docs/3.x/guide/directory-structure/content) in your project and parses `.md`, `.yml`, `.csv` and `.json` files to create a file-based CMS for your application.
+[Nuxt Content](https://content.nuxt.com) reads the `content/` directory in your project and parses `.md`, `.yml`, `.csv` and `.json` files to create a file-based CMS for your application.
 
 - Render your content with built-in components.
 - Query your content with a MongoDB-like API.
@@ -36,7 +36,7 @@ The module automatically loads and parses them.
 
 ## Render Content
 
-To render content pages, add a [catch-all route](/docs/3.x/guide/directory-structure/pages/#catch-all-route) using the [`<ContentRenderer>`](https://content.nuxt.com/docs/components/content-renderer) component:
+To render content pages, add a [catch-all route](/docs/3.x/directory-structure/pages/#catch-all-route) using the [`<ContentRenderer>`](https://content.nuxt.com/docs/components/content-renderer) component:
 
 ```vue [pages/[...slug\\].vue]
 <script lang="ts" setup>

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

@@ -0,0 +1,87 @@
+---
+title: 'layers'
+head.title: 'layers/'
+description: Use the layers/ directory to organize and auto-register local layers within your application.
+navigation.icon: i-vscode-icons-folder-type-nuxt
+---
+
+The `layers/` directory allows you to organize and share reusable code, components, composables, and configurations across your Nuxt application. Any layers within your project in the `layers/` directory will be automatically registered.
+
+::note
+The `layers/` directory auto-registration is available in Nuxt v3.12.0+.
+::
+
+::tip{icon="i-lucide-lightbulb"}
+Layers are ideal for organizing large codebases with **Domain-Driven Design (DDD)**, creating reusable **UI libraries** or **themes**, sharing **configuration presets** across projects, and separating concerns like **admin panels** or **feature modules**.
+::
+
+## Structure
+
+Each subdirectory within `layers/` is treated as a separate layer. A layer can contain the same structure as a standard Nuxt application.
+
+::important
+Every layer **must have** a `nuxt.config.ts` file to be recognized as a valid layer, even if it's empty.
+::
+
+```bash [Directory structure]
+-| layers/
+---| base/
+-----| nuxt.config.ts
+-----| app/
+-------| components/
+---------| BaseButton.vue
+-------| composables/
+---------| useBase.ts
+-----| server/
+-------| api/
+---------| hello.ts
+---| admin/
+-----| nuxt.config.ts
+-----| app/
+-------| pages/
+---------| admin.vue
+-------| layouts/
+---------| admin.vue
+```
+
+## Automatic Aliases
+
+Named layer aliases to the `srcDir` of each layer are automatically created. You can access a layer using the `#layers/[name]` alias:
+
+```ts
+// Access the base layer
+import something from '#layers/base/path/to/file'
+
+// Access the admin layer
+import { useAdmin } from '#layers/admin/composables/useAdmin'
+```
+
+::note
+Named layer aliases were introduced in Nuxt v3.16.0.
+::
+
+## Layer Content
+
+Each layer can include:
+
+- [`nuxt.config.ts`](/docs/3.x/directory-structure/nuxt-config) - Layer-specific configuration that will be merged with the main config
+- [`app.config.ts`](/docs/3.x/directory-structure/app-config) - Reactive application configuration
+- [`components/`](/docs/3.x/directory-structure/components) - Vue components (auto-imported)
+- [`composables/`](/docs/3.x/directory-structure/composables) - Vue composables (auto-imported)
+- [`utils/`](/docs/3.x/directory-structure/utils) - Utility functions (auto-imported)
+- [`pages/`](/docs/3.x/directory-structure/pages) - Application pages
+- [`layouts/`](/docs/3.x/directory-structure/layouts) - Application layouts
+- [`middleware/`](/docs/3.x/directory-structure/middleware) - Route middleware
+- [`plugins/`](/docs/3.x/directory-structure/plugins) - Nuxt plugins
+- [`server/`](/docs/3.x/directory-structure/server) - Server routes, middleware, and utilities
+- [`shared/`](/docs/3.x/directory-structure/shared) - Shared code between app and server
+
+## Priority Order
+
+When multiple layers define the same resource (component, composable, page, etc.), the layer with **higher priority wins**. Layers are sorted alphabetically, with later letters having higher priority (Z > A).
+
+To control the order, prefix directories with numbers: `1.base/`, `2.features/`, `3.admin/`.
+
+:read-more{to="/docs/3.x/getting-started/layers#layer-priority"}
+
+:video-accordion{title="Watch a video from Learn Vue about Nuxt Layers" videoId="lnFCM7c9f7I"}

package/{2.guide/1.directory-structure → 2.directory-structure}/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/3.x/api/components/nuxt-layout) to your [`app.vue`](/docs/3.x/guide/directory-structure/app):
+Layouts are enabled by adding [`<NuxtLayout>`](/docs/3.x/api/components/nuxt-layout) to your [`app.vue`](/docs/3.x/directory-structure/app):
 
 ```vue [app.vue]
 <template>
@@ -24,6 +24,7 @@ Layouts are enabled by adding [`<NuxtLayout>`](/docs/3.x/api/components/nuxt-lay
 To use a layout:
 - Set a `layout` property in your page with [definePageMeta](/docs/3.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, `layouts/default.vue` will be used.
 ::
 
 ::important
-If you only have a single layout in your application, we recommend using [`app.vue`](/docs/3.x/guide/directory-structure/app) instead.
+If you only have a single layout in your application, we recommend using [`app.vue`](/docs/3.x/directory-structure/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/guide/directory-structure/pages#page-metadata"}
+::read-more{to="/docs/3.x/directory-structure/pages#page-metadata"}
 Learn more about `definePageMeta`.
 ::
 
@@ -109,7 +116,7 @@ File | Layout Name
 `~/layouts/desktop-base/DesktopBase.vue` | `desktop-base`
 `~/layouts/desktop/Desktop.vue` | `desktop`
 
-:link-example{to="/docs/examples/features/layouts"}
+:link-example{to="/docs/3.x/examples/features/layouts"}
 
 ## Changing the Layout Dynamically
 
@@ -117,6 +124,12 @@ You can also use the [`setPageLayout`](/docs/3.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,7 +147,26 @@ definePageMeta({
 </template>
 ```
 
-:link-example{to="/docs/examples/features/layouts"}
+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/3.x/examples/features/layouts"}
 
 ## Overriding a Layout on a Per-page Basis
 

package/{2.guide/1.directory-structure → 2.directory-structure}/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/3.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/3.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"}
@@ -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.guide/1.directory-structure → 2.directory-structure}/1.modules.md

@@ -2,7 +2,7 @@
 title: 'modules'
 head.title: 'modules/'
 description: Use the modules/ directory to automatically register local modules within your application.
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-nuxt
 ---
 
 It is a good place to place any local modules you develop while building your application.
@@ -11,14 +11,14 @@ The auto-registered files patterns are:
 - `modules/*/index.ts`
 - `modules/*.ts`
 
-You don't need to add those local modules to your [`nuxt.config.ts`](/docs/3.x/guide/directory-structure/nuxt-config) separately.
+You don't need to add those local modules to your [`nuxt.config.ts`](/docs/3.x/directory-structure/nuxt-config) separately.
 
 ::code-group
 
 ```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.guide/1.directory-structure → 2.directory-structure}/1.node_modules.md

@@ -5,8 +5,8 @@ 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/guide/directory-structure/gitignore) file to avoid pushing the dependencies to your repository.
+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.guide/1.directory-structure → 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/guide/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 () {
@@ -46,7 +46,7 @@ export default defineComponent({
 
 The `pages/index.vue` file will be mapped to the `/` route of your application.
 
-If you are using [`app.vue`](/docs/3.x/guide/directory-structure/app), make sure to use the [`<NuxtPage/>`](/docs/3.x/api/components/nuxt-page) component to display the current page:
+If you are using [`app.vue`](/docs/3.x/directory-structure/app), make sure to use the [`<NuxtPage/>`](/docs/3.x/api/components/nuxt-page) component to display the current page:
 
 ```vue [app.vue]
 <template>
@@ -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,33 +322,33 @@ 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`
 
-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/3.x/guide/directory-structure/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/3.x/directory-structure/layouts).
 
 #### `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/guide/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.
 ::
 
@@ -401,11 +422,11 @@ function navigate () {
 
 ## Client-Only Pages
 
-You can define a page as [client only](/docs/3.x/guide/directory-structure/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/3.x/directory-structure/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/3.x/guide/directory-structure/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/3.x/directory-structure/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.)
@@ -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.guide/1.directory-structure → 2.directory-structure}/1.plugins.md

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