@nuxt/docs 4.2.2 → 4.3.0

package/1.getting-started/02.installation.md

@@ -17,9 +17,7 @@ Or follow the steps below to set up a new Nuxt project on your computer.
 
 ## New Project
 
-<!-- TODO: need to fix upstream in nuxt/nuxt.com -->
-<!-- markdownlint-disable-next-line MD001 -->
-#### Prerequisites
+### Prerequisites
 
 - **Node.js** - [`20.x`](https://nodejs.org/en) or newer (but we recommend the [active LTS release](https://github.com/nodejs/release#release-schedule))
 - **Text editor** - There is no IDE requirement, but we recommend [Visual Studio Code](https://code.visualstudio.com/) with the [official Vue extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously known as Volar) or [WebStorm](https://www.jetbrains.com/webstorm/), which, along with [other JetBrains IDEs](https://www.jetbrains.com/ides/), offers great Nuxt support right out-of-the-box.
@@ -29,7 +27,6 @@ Or follow the steps below to set up a new Nuxt project on your computer.
   ::details
   :summary[Additional notes for an optimal setup:]
   - **Node.js**: Make sure to use an even numbered version (20, 22, etc.)
-  - **Nuxtr**: Install the community-developed [Nuxtr extension](https://marketplace.visualstudio.com/items?itemName=Nuxtr.nuxtr-vscode)
   - **WSL**: If you are using Windows and experience slow HMR, you may want to try using [WSL (Windows Subsystem for Linux)](https://learn.microsoft.com/en-us/windows/wsl/install) which may solve some performance issues.
   - **Windows slow DNS resolution**: Instead of using `localhost:3000` for local dev server on Windows, use `127.0.0.1` for much faster loading experience on browsers.
   ::
@@ -44,7 +41,7 @@ npm create nuxt@latest <project-name>
 ```
 
 ```bash [yarn]
-yarn create nuxt@latest <project-name>
+yarn create nuxt <project-name>
 ```
 
 ```bash [pnpm]

package/1.getting-started/03.configuration.md

@@ -135,13 +135,13 @@ As stated above, `runtimeConfig` and `app.config` are both used to expose variab
 
 | Feature                   | `runtimeConfig` | `app.config` |
 |---------------------------|-----------------|--------------|
-| Client Side               | Hydrated        | Bundled      |
-| Environment Variables     | ✅ Yes           | ❌ No         |
+| Client-side               | Hydrated        | Bundled      |
+| Environment variables     | ✅ Yes           | ❌ No         |
 | Reactive                  | ✅ Yes           | ✅ Yes        |
 | Types support             | ✅ Partial       | ✅ Yes        |
-| Configuration per Request | ❌ No            | ✅ Yes        |
-| Hot Module Replacement    | ❌ No            | ✅ Yes        |
-| Non primitive JS types    | ❌ No            | ✅ Yes        |
+| Configuration per request | ❌ No            | ✅ Yes        |
+| Hot module replacement    | ❌ No            | ✅ Yes        |
+| Non-primitive JS types    | ❌ No            | ✅ Yes        |
 
 ## External Configuration Files
 

package/1.getting-started/06.styling.md

@@ -95,6 +95,10 @@ pnpm install animate.css
 bun install animate.css
 ```
 
+```bash [deno]
+deno install npm:animate.css
+```
+
 ::
 
 Then you can reference it directly in your pages, layouts and components:
@@ -517,7 +521,7 @@ Here are a few modules to help you get started:
 - [Nuxt UI](https://ui.nuxt.com): A UI Library for Modern Web Apps
 - [Panda CSS](https://panda-css.com/docs/installation/nuxt): CSS-in-JS engine that generates atomic CSS at build time
 
-Nuxt modules provide you with a good developer experience out of the box, but remember that if your favorite tool doesn't have a module, it doesn't mean that you can't use it with Nuxt! You can configure it yourself for your own project. Depending on the tool, you might need to use a [Nuxt plugin](/docs/4.x/directory-structure/app/plugins) and/or [make your own module](/docs/4.x/guide/going-further/modules). Share them with the [community](/modules) if you do!
+Nuxt modules provide you with a good developer experience out of the box, but remember that if your favorite tool doesn't have a module, it doesn't mean that you can't use it with Nuxt! You can configure it yourself for your own project. Depending on the tool, you might need to use a [Nuxt plugin](/docs/4.x/directory-structure/app/plugins) and/or [make your own module](/docs/4.x/guide/modules). Share them with the [community](/modules) if you do!
 
 ### Easily Load Webfonts
 

package/1.getting-started/07.routing.md

@@ -135,7 +135,7 @@ definePageMeta({
 
 Nuxt offers route validation via the `validate` property in [`definePageMeta()`](/docs/4.x/api/utils/define-page-meta) in each page you wish to validate.
 
-The `validate` property accepts the `route` as an argument. You can return a boolean value to determine whether or not this is a valid route to be rendered with this page. If you return `false`, this will cause a 404 error. You can also directly return an object with `statusCode`/`statusMessage` to customize the error returned.
+The `validate` property accepts the `route` as an argument. You can return a boolean value to determine whether or not this is a valid route to be rendered with this page. If you return `false`, this will cause a 404 error. You can also directly return an object with `status`/`statusText` to customize the error returned.
 
 If you have a more complex use case, then you can use anonymous route middleware instead.
 

package/1.getting-started/08.seo-meta.md

@@ -134,6 +134,10 @@ const title = ref('Hello World')
 
 It's suggested to wrap your components in either a `<Head>` or `<Html>` components as tags will be deduped more intuitively.
 
+::warning
+If you need to duplicate tags across client-server boundaries, apply a `key` attribute on the `<Head>` component.
+::
+
 ## Types
 
 Below are the non-reactive types used for [`useHead`](/docs/4.x/api/composables/use-head), [`app.head`](/docs/4.x/api/nuxt-config#head) and components.

package/1.getting-started/12.error-handling.md

@@ -99,7 +99,7 @@ const handleError = () => clearError({ redirect: '/' })
 
 <template>
   <div>
-    <h2>{{ error?.statusCode }}</h2>
+    <h2>{{ error?.status }}</h2>
     <button @click="handleError">
       Clear errors
     </button>
@@ -140,7 +140,7 @@ If you are running on Node 16 and you set any cookies when rendering your error
 ### `useError`
 
 ```ts [TS Signature]
-function useError (): Ref<Error | { url, statusCode, statusMessage, message, description, data }>
+function useError (): Ref<Error | { url, status, statusText, message, description, data }>
 ```
 
 This function will return the global Nuxt error that is being handled.
@@ -152,7 +152,7 @@ Read more about `useError` composable.
 ### `createError`
 
 ```ts [TS Signature]
-function createError (err: string | { cause, data, message, name, stack, statusCode, statusMessage, fatal }): Error
+function createError (err: string | { cause, data, message, name, stack, status, statusText, fatal }): Error
 ```
 
 Create an error object with additional metadata. You can pass a string to be set as the error `message` or an object containing error properties. It is usable in both the Vue and Server portions of your app, and is meant to be thrown.
@@ -168,13 +168,19 @@ const { data } = await useFetch(`/api/movies/${route.params.slug}`)
 
 if (!data.value) {
   throw createError({
-    statusCode: 404,
-    statusMessage: 'Page Not Found',
+    status: 404,
+    statusText: 'Page Not Found',
   })
 }
 </script>
 ```
 
+::tip
+The `statusText` property is intended for short, HTTP-compliant status texts (e.g., "Not Found"). It should only contain horizontal tabs, spaces, and visible ASCII characters (`[\t\u0020-\u007E]`).
+
+For any detailed descriptions, multi-line messages, or content with non-ASCII characters, you should always use the `message` property instead.
+::
+
 ::read-more{to="/docs/4.x/api/utils/create-error"}
 Read more about `createError` util.
 ::
@@ -182,7 +188,7 @@ Read more about `createError` util.
 ### `showError`
 
 ```ts [TS Signature]
-function showError (err: string | Error | { statusCode, statusMessage }): Error
+function showError (err: string | Error | { status, statusText }): Error
 ```
 
 You can call this function at any point on client-side, or (on server side) directly within middleware, plugins or `setup()` functions. It will trigger a full-screen error page which you can clear with [`clearError`](/docs/4.x/getting-started/error-handling#clearerror).

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

@@ -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

@@ -98,6 +98,7 @@ In addition to Node.js servers and static hosting services, a Nuxt project can b
 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',
            },
          },
@@ -761,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.
@@ -240,6 +248,11 @@ pnpm dlx codemod@0.18.7 nuxt/4/migration-recipe
 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.
 

package/2.directory-structure/1.app/1.components.md

@@ -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.directory-structure/1.app/1.layouts.md

@@ -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`.
@@ -68,6 +69,12 @@ 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',
 })
@@ -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.directory-structure/1.app/1.pages.md

@@ -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>`:

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

@@ -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.app/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/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/4.x/directory-structure/nuxt-config) - Layer-specific configuration that will be merged with the main config
+- [`app.config.ts`](/docs/4.x/directory-structure/app/app-config) - Reactive application configuration
+- [`app/components/`](/docs/4.x/directory-structure/app/components) - Vue components (auto-imported)
+- [`app/composables/`](/docs/4.x/directory-structure/app/composables) - Vue composables (auto-imported)
+- [`app/utils/`](/docs/4.x/directory-structure/app/utils) - Utility functions (auto-imported)
+- [`app/pages/`](/docs/4.x/directory-structure/app/pages) - Application pages
+- [`app/layouts/`](/docs/4.x/directory-structure/app/layouts) - Application layouts
+- [`app/middleware/`](/docs/4.x/directory-structure/app/middleware) - Route middleware
+- [`app/plugins/`](/docs/4.x/directory-structure/app/plugins) - Nuxt plugins
+- [`server/`](/docs/4.x/directory-structure/server) - Server routes, middleware, and utilities
+- [`shared/`](/docs/4.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/4.x/getting-started/layers#layer-priority"}
+
+:video-accordion{title="Watch a video from Learn Vue about Nuxt Layers" videoId="lnFCM7c9f7I"}

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/4.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
+    })
   },
 })
 ```
@@ -46,6 +52,10 @@ export default defineEventHandler(() => {
 
 When starting Nuxt, the `hello` module will be registered and the `/api/hello` route will be available.
 
+::note
+Note that all components, pages, composables and other files that would be normally placed in your `app/` directory need to be in `modules/your-module/runtime/app/`. This ensures they can be type-checked properly.
+::
+
 Modules are executed in the following sequence:
 - First, the modules defined in [`nuxt.config.ts`](/docs/4.x/api/nuxt-config#modules-1) are loaded.
 - Then, modules found in the `modules/` directory are executed, and they load in alphabetical order.
@@ -59,7 +69,7 @@ modules/
   2.second-module.ts
 ```
 
-:read-more{to="/docs/4.x/guide/going-further/modules"}
+:read-more{to="/docs/4.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/4.x/directory-structure/gitignore) file to avoid pushing the dependencies to your repository.