@nuxt/docs 4.0.3 → 4.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/1.getting-started/01.introduction.md +1 -1
- package/1.getting-started/03.configuration.md +2 -2
- package/1.getting-started/04.views.md +15 -15
- package/1.getting-started/05.assets.md +6 -6
- package/1.getting-started/06.styling.md +8 -8
- package/1.getting-started/07.routing.md +7 -7
- package/1.getting-started/08.seo-meta.md +9 -9
- package/1.getting-started/09.transitions.md +15 -15
- package/1.getting-started/10.data-fetching.md +9 -9
- package/1.getting-started/11.state-management.md +9 -9
- package/1.getting-started/12.error-handling.md +1 -1
- package/1.getting-started/14.layers.md +23 -2
- package/1.getting-started/15.prerendering.md +2 -2
- package/1.getting-started/17.testing.md +72 -19
- package/1.getting-started/18.upgrade.md +7 -7
- package/2.guide/1.concepts/1.auto-imports.md +6 -6
- package/2.guide/1.concepts/10.nuxt-lifecycle.md +6 -6
- package/2.guide/1.concepts/2.vuejs-development.md +3 -3
- package/2.guide/1.concepts/3.rendering.md +2 -2
- package/2.guide/1.concepts/8.typescript.md +1 -1
- package/2.guide/2.directory-structure/1.app/1.components.md +18 -18
- package/2.guide/2.directory-structure/1.app/1.composables.md +11 -11
- package/2.guide/2.directory-structure/1.app/1.layouts.md +7 -7
- package/2.guide/2.directory-structure/1.app/1.middleware.md +41 -3
- package/2.guide/2.directory-structure/1.app/1.pages.md +16 -16
- package/2.guide/2.directory-structure/1.app/1.plugins.md +7 -7
- package/2.guide/2.directory-structure/1.app/1.utils.md +3 -3
- package/2.guide/2.directory-structure/1.app/3.app-config.md +2 -2
- package/2.guide/2.directory-structure/1.app/3.app.md +12 -12
- package/2.guide/2.directory-structure/1.content.md +2 -2
- package/2.guide/2.directory-structure/1.public.md +1 -1
- package/2.guide/2.directory-structure/1.server.md +3 -3
- package/2.guide/2.directory-structure/1.shared.md +3 -3
- package/2.guide/2.directory-structure/2.nuxtrc.md +4 -0
- package/2.guide/3.going-further/1.experimental-features.md +38 -5
- package/2.guide/3.going-further/10.runtime-config.md +2 -2
- package/2.guide/3.going-further/2.hooks.md +1 -1
- package/2.guide/3.going-further/3.modules.md +50 -1
- package/2.guide/3.going-further/6.nuxt-app.md +2 -2
- package/2.guide/3.going-further/7.layers.md +34 -10
- package/2.guide/3.going-further/9.debugging.md +2 -1
- package/2.guide/4.recipes/1.custom-routing.md +1 -1
- package/2.guide/4.recipes/2.vite-plugin.md +1 -1
- package/2.guide/4.recipes/3.custom-usefetch.md +4 -4
- package/2.guide/4.recipes/4.sessions-and-authentication.md +4 -4
- package/2.guide/5.best-practices/performance.md +2 -2
- package/3.api/1.components/1.client-only.md +2 -2
- package/3.api/1.components/1.dev-only.md +1 -1
- package/3.api/1.components/1.nuxt-client-fallback.md +1 -1
- package/3.api/1.components/12.nuxt-route-announcer.md +2 -2
- package/3.api/1.components/2.nuxt-page.md +8 -8
- package/3.api/1.components/3.nuxt-layout.md +13 -13
- package/3.api/1.components/4.nuxt-link.md +9 -9
- package/3.api/1.components/5.nuxt-loading-indicator.md +2 -2
- package/3.api/1.components/7.nuxt-welcome.md +1 -1
- package/3.api/2.composables/on-prehydrate.md +1 -1
- package/3.api/2.composables/use-async-data.md +3 -3
- package/3.api/2.composables/use-cookie.md +1 -1
- package/3.api/2.composables/use-fetch.md +2 -2
- package/3.api/2.composables/use-lazy-async-data.md +1 -1
- package/3.api/2.composables/use-lazy-fetch.md +1 -1
- package/3.api/2.composables/use-nuxt-app.md +7 -7
- package/3.api/2.composables/use-nuxt-data.md +4 -4
- package/3.api/2.composables/use-preview-mode.md +1 -1
- package/3.api/2.composables/use-request-fetch.md +1 -1
- package/3.api/2.composables/use-request-header.md +1 -1
- package/3.api/2.composables/use-request-headers.md +1 -1
- package/3.api/2.composables/use-request-url.md +1 -1
- package/3.api/2.composables/use-response-header.md +3 -3
- package/3.api/2.composables/use-route-announcer.md +1 -1
- package/3.api/2.composables/use-route.md +37 -2
- package/3.api/2.composables/use-router.md +5 -5
- package/3.api/2.composables/use-runtime-config.md +1 -1
- package/3.api/2.composables/use-seo-meta.md +3 -3
- package/3.api/2.composables/use-server-seo-meta.md +1 -1
- package/3.api/3.utils/$fetch.md +4 -4
- package/3.api/3.utils/abort-navigation.md +4 -4
- package/3.api/3.utils/add-route-middleware.md +5 -5
- package/3.api/3.utils/call-once.md +2 -2
- package/3.api/3.utils/create-error.md +1 -1
- package/3.api/3.utils/define-nuxt-component.md +2 -2
- package/3.api/3.utils/define-nuxt-route-middleware.md +3 -3
- package/3.api/3.utils/define-page-meta.md +12 -12
- package/3.api/3.utils/define-route-rules.md +1 -1
- package/3.api/3.utils/navigate-to.md +1 -1
- package/3.api/3.utils/on-nuxt-ready.md +1 -1
- package/3.api/3.utils/refresh-cookie.md +1 -1
- package/3.api/3.utils/refresh-nuxt-data.md +2 -2
- package/3.api/3.utils/set-page-layout.md +1 -1
- package/3.api/4.commands/add.md +7 -7
- package/3.api/4.commands/init.md +2 -1
- package/3.api/5.kit/1.modules.md +68 -0
- package/3.api/5.kit/16.layers.md +220 -0
- package/3.api/5.kit/7.pages.md +1 -1
- package/3.api/5.kit/8.layout.md +1 -1
- package/3.api/5.kit/9.plugins.md +1 -1
- package/3.api/6.nuxt-config.md +22 -19
- package/5.community/6.roadmap.md +6 -6
- package/6.bridge/4.plugins-and-middleware.md +3 -3
- package/6.bridge/6.meta.md +1 -1
- package/7.migration/2.configuration.md +2 -2
- package/7.migration/3.auto-imports.md +1 -1
- package/7.migration/5.plugins-and-middleware.md +2 -2
- package/7.migration/6.pages-and-layouts.md +8 -8
- package/7.migration/7.component-options.md +4 -4
- package/7.migration/8.runtime-config.md +1 -1
- package/package.json +1 -1
|
@@ -68,7 +68,7 @@ export default defineNuxtRouteMiddleware((to, from) => {
|
|
|
68
68
|
|
|
69
69
|
In this case, `navigateTo` will be executed but not returned, which may lead to unexpected behavior.
|
|
70
70
|
|
|
71
|
-
:read-more{to="/docs/guide/directory-structure/middleware"}
|
|
71
|
+
:read-more{to="/docs/guide/directory-structure/app/middleware"}
|
|
72
72
|
|
|
73
73
|
### Navigating to an External URL
|
|
74
74
|
|
|
@@ -13,7 +13,7 @@ links:
|
|
|
13
13
|
It is ideal for running code that should not block the initial rendering of your app.
|
|
14
14
|
::
|
|
15
15
|
|
|
16
|
-
```ts [plugins/ready.client.ts]
|
|
16
|
+
```ts [app/plugins/ready.client.ts]
|
|
17
17
|
export default defineNuxtPlugin(() => {
|
|
18
18
|
onNuxtReady(async () => {
|
|
19
19
|
const myAnalyticsLibrary = await import('my-big-analytics-library')
|
|
@@ -34,7 +34,7 @@ refreshNuxtData(keys?: string | string[])
|
|
|
34
34
|
|
|
35
35
|
This example below refreshes all data being fetched using `useAsyncData` and `useFetch` in Nuxt application.
|
|
36
36
|
|
|
37
|
-
```vue [pages/some-page.vue]
|
|
37
|
+
```vue [app/pages/some-page.vue]
|
|
38
38
|
<script setup lang="ts">
|
|
39
39
|
const refreshing = ref(false)
|
|
40
40
|
|
|
@@ -61,7 +61,7 @@ async function refreshAll () {
|
|
|
61
61
|
|
|
62
62
|
This example below refreshes only data where the key matches to `count` and `user`.
|
|
63
63
|
|
|
64
|
-
```vue [pages/some-page.vue]
|
|
64
|
+
```vue [app/pages/some-page.vue]
|
|
65
65
|
<script setup lang="ts">
|
|
66
66
|
const refreshing = ref(false)
|
|
67
67
|
|
|
@@ -12,7 +12,7 @@ links:
|
|
|
12
12
|
`setPageLayout` allows you to dynamically change the layout of a page. It relies on access to the Nuxt context and therefore can only be called within the [Nuxt context](/docs/guide/going-further/nuxt-app#the-nuxt-context).
|
|
13
13
|
::
|
|
14
14
|
|
|
15
|
-
```ts [middleware/custom-layout.ts]
|
|
15
|
+
```ts [app/middleware/custom-layout.ts]
|
|
16
16
|
export default defineNuxtRouteMiddleware((to) => {
|
|
17
17
|
// Set the layout on the route you are navigating _to_
|
|
18
18
|
setPageLayout('other')
|
package/3.api/4.commands/add.md
CHANGED
|
@@ -47,21 +47,21 @@ npx nuxt add plugin sockets --client
|
|
|
47
47
|
* Modifier flags: `--mode client|server` or `--client` or `--server`
|
|
48
48
|
|
|
49
49
|
```bash [Terminal]
|
|
50
|
-
# Generates `components/TheHeader.vue`
|
|
50
|
+
# Generates `app/components/TheHeader.vue`
|
|
51
51
|
npx nuxt add component TheHeader
|
|
52
52
|
```
|
|
53
53
|
|
|
54
54
|
## `nuxt add composable`
|
|
55
55
|
|
|
56
56
|
```bash [Terminal]
|
|
57
|
-
# Generates `composables/foo.ts`
|
|
57
|
+
# Generates `app/composables/foo.ts`
|
|
58
58
|
npx nuxt add composable foo
|
|
59
59
|
```
|
|
60
60
|
|
|
61
61
|
## `nuxt add layout`
|
|
62
62
|
|
|
63
63
|
```bash [Terminal]
|
|
64
|
-
# Generates `layouts/custom.vue`
|
|
64
|
+
# Generates `app/layouts/custom.vue`
|
|
65
65
|
npx nuxt add layout custom
|
|
66
66
|
```
|
|
67
67
|
|
|
@@ -70,19 +70,19 @@ npx nuxt add layout custom
|
|
|
70
70
|
* Modifier flags: `--mode client|server` or `--client`or `--server`
|
|
71
71
|
|
|
72
72
|
```bash [Terminal]
|
|
73
|
-
# Generates `plugins/analytics.ts`
|
|
73
|
+
# Generates `app/plugins/analytics.ts`
|
|
74
74
|
npx nuxt add plugin analytics
|
|
75
75
|
```
|
|
76
76
|
|
|
77
77
|
## `nuxt add page`
|
|
78
78
|
|
|
79
79
|
```bash [Terminal]
|
|
80
|
-
# Generates `pages/about.vue`
|
|
80
|
+
# Generates `app/pages/about.vue`
|
|
81
81
|
npx nuxt add page about
|
|
82
82
|
```
|
|
83
83
|
|
|
84
84
|
```bash [Terminal]
|
|
85
|
-
# Generates `pages/category/[id].vue`
|
|
85
|
+
# Generates `app/pages/category/[id].vue`
|
|
86
86
|
npx nuxt add page "category/[id]"
|
|
87
87
|
```
|
|
88
88
|
|
|
@@ -91,7 +91,7 @@ npx nuxt add page "category/[id]"
|
|
|
91
91
|
* Modifier flags: `--global`
|
|
92
92
|
|
|
93
93
|
```bash [Terminal]
|
|
94
|
-
# Generates `middleware/auth.ts`
|
|
94
|
+
# Generates `app/middleware/auth.ts`
|
|
95
95
|
npx nuxt add middleware auth
|
|
96
96
|
```
|
|
97
97
|
|
package/3.api/4.commands/init.md
CHANGED
|
@@ -10,7 +10,7 @@ links:
|
|
|
10
10
|
|
|
11
11
|
<!--init-cmd-->
|
|
12
12
|
```bash [Terminal]
|
|
13
|
-
npm create nuxt@latest [DIR] [--cwd=<directory>] [-t, --template] [-f, --force] [--offline] [--preferOffline] [--no-install] [--gitInit] [--shell] [--packageManager]
|
|
13
|
+
npm create nuxt@latest [DIR] [--cwd=<directory>] [-t, --template] [-f, --force] [--offline] [--preferOffline] [--no-install] [--gitInit] [--shell] [--packageManager] [--nightly]
|
|
14
14
|
```
|
|
15
15
|
<!--/init-cmd-->
|
|
16
16
|
|
|
@@ -40,6 +40,7 @@ Option | Default | Description
|
|
|
40
40
|
`--packageManager` | | Package manager choice (npm, pnpm, yarn, bun)
|
|
41
41
|
`--modules` | | Nuxt modules to install (comma separated without spaces)
|
|
42
42
|
`--no-modules` | | Skip module installation prompt
|
|
43
|
+
`--nightly` | | Use Nuxt nightly release channel (3x or latest)
|
|
43
44
|
<!--/init-opts-->
|
|
44
45
|
|
|
45
46
|
## Environment variables
|
package/3.api/5.kit/1.modules.md
CHANGED
|
@@ -62,6 +62,8 @@ export function defineNuxtModule<TOptions extends ModuleOptions> (): {
|
|
|
62
62
|
| `defaults` | `T \| ((nuxt: Nuxt) => T)`{lang="ts"} | `false` | Default options for the module. If a function is provided, it will be called with the Nuxt instance as the first argument. |
|
|
63
63
|
| `schema` | `T` | `false` | Schema for the module options. If provided, options will be applied to the schema. |
|
|
64
64
|
| `hooks` | `Partial<NuxtHooks>`{lang="ts"} | `false` | Hooks to be installed for the module. If provided, the module will install the hooks. |
|
|
65
|
+
| `onInstall` | `(nuxt: Nuxt) => Awaitable<void>`{lang="ts"} | `false` | Lifecycle hook called when the module is first installed. Requires `meta.name` and `meta.version` to be defined. |
|
|
66
|
+
| `onUpgrade` | `(options: T, nuxt: Nuxt, previousVersion: string) => Awaitable<void>`{lang="ts"} | `false` | Lifecycle hook called when the module is upgraded to a newer version. Requires `meta.name` and `meta.version` to be defined. |
|
|
65
67
|
| `setup` | `(this: void, resolvedOptions: T, nuxt: Nuxt) => Awaitable<void \| false \| ModuleSetupInstallResult>`{lang="ts"} | `false` | Setup function for the module. If provided, the module will call the setup function. |
|
|
66
68
|
|
|
67
69
|
### Examples
|
|
@@ -171,6 +173,72 @@ export default defineNuxtModule<ModuleOptions>().with({
|
|
|
171
173
|
|
|
172
174
|
Without using `.with()`, the `resolvedOptions` parameter would be typed as the raw `ModuleOptions` interface, where `timeout` and `retries` could be `undefined` even when defaults are provided. The `.with()` method enables TypeScript to understand that default values make those properties non-optional in the resolved options.
|
|
173
175
|
|
|
176
|
+
#### Using Lifecycle Hooks for Module Installation and Upgrade
|
|
177
|
+
|
|
178
|
+
You can define lifecycle hooks that run when your module is first installed or upgraded to a new version. These hooks are useful for performing one-time setup tasks, database migrations, or cleanup operations.
|
|
179
|
+
|
|
180
|
+
::important
|
|
181
|
+
For lifecycle hooks to work, you **must** provide both `meta.name` and `meta.version` in your module definition. The hooks use these values to track the module's installation state in the project's `.nuxtrc` file.
|
|
182
|
+
::
|
|
183
|
+
|
|
184
|
+
Lifecycle hooks run before the main `setup` function, and if a hook throws an error, it's logged but doesn't stop the build process.
|
|
185
|
+
|
|
186
|
+
**`onInstall`** runs only once when the module is first added to a project.
|
|
187
|
+
|
|
188
|
+
**`onUpgrade`** runs each time the module version increases (using semver comparison) — but only once for each version bump.
|
|
189
|
+
|
|
190
|
+
##### Example
|
|
191
|
+
|
|
192
|
+
```ts
|
|
193
|
+
import { defineNuxtModule } from '@nuxt/kit'
|
|
194
|
+
import semver from 'semver'
|
|
195
|
+
|
|
196
|
+
export default defineNuxtModule({
|
|
197
|
+
meta: {
|
|
198
|
+
name: 'my-awesome-module',
|
|
199
|
+
version: '1.2.0', // Required for lifecycle hooks
|
|
200
|
+
configKey: 'myAwesomeModule'
|
|
201
|
+
},
|
|
202
|
+
defaults: {
|
|
203
|
+
apiKey: '',
|
|
204
|
+
enabled: true
|
|
205
|
+
},
|
|
206
|
+
|
|
207
|
+
onInstall(nuxt) {
|
|
208
|
+
// This runs only when the module is first installed
|
|
209
|
+
console.log('Setting up my-awesome-module for the first time!')
|
|
210
|
+
|
|
211
|
+
// You might want to:
|
|
212
|
+
// - Create initial configuration files
|
|
213
|
+
// - Set up database schemas
|
|
214
|
+
// - Display welcome messages
|
|
215
|
+
// - Perform initial data migration
|
|
216
|
+
},
|
|
217
|
+
|
|
218
|
+
onUpgrade(options, nuxt, previousVersion) {
|
|
219
|
+
// This runs when the module is upgraded to a newer version
|
|
220
|
+
console.log(`Upgrading my-awesome-module from ${previousVersion} to 1.2.0`)
|
|
221
|
+
|
|
222
|
+
// You might want to:
|
|
223
|
+
// - Migrate configuration files
|
|
224
|
+
// - Update database schemas
|
|
225
|
+
// - Clean up deprecated files
|
|
226
|
+
// - Display upgrade notes
|
|
227
|
+
|
|
228
|
+
if (semver.lt(previousVersion, '1.1.0')) {
|
|
229
|
+
console.log('⚠️ Breaking changes in 1.1.0 - please check the migration guide')
|
|
230
|
+
}
|
|
231
|
+
},
|
|
232
|
+
|
|
233
|
+
setup(options, nuxt) {
|
|
234
|
+
// Regular setup logic runs on every build
|
|
235
|
+
if (options.enabled) {
|
|
236
|
+
// Configure the module
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
})
|
|
240
|
+
```
|
|
241
|
+
|
|
174
242
|
## `installModule`
|
|
175
243
|
|
|
176
244
|
Install specified Nuxt module programmatically. This is helpful when your module depends on other modules. You can pass the module options as an object to `inlineOptions` and they will be passed to the module's `setup` function.
|
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: "Layers"
|
|
3
|
+
description: Nuxt Kit provides utilities to help you work with layers and their directory structures.
|
|
4
|
+
links:
|
|
5
|
+
- label: Source
|
|
6
|
+
icon: i-simple-icons-github
|
|
7
|
+
to: https://github.com/nuxt/nuxt/blob/main/packages/kit/src/layers.ts
|
|
8
|
+
size: xs
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
Nuxt layers provide a powerful way to share and extend functionality across projects. When working with layers in modules, you often need to access directory paths from each layer. Nuxt Kit provides the `getLayerDirectories` utility to access resolved directory paths for all layers in your Nuxt application.
|
|
12
|
+
|
|
13
|
+
## `getLayerDirectories`
|
|
14
|
+
|
|
15
|
+
Get the resolved directory paths for all layers in a Nuxt application. This function provides a structured way to access layer directories without directly accessing the private `nuxt.options._layers` property.
|
|
16
|
+
|
|
17
|
+
### Usage
|
|
18
|
+
|
|
19
|
+
```ts twoslash
|
|
20
|
+
import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit'
|
|
21
|
+
|
|
22
|
+
export default defineNuxtModule({
|
|
23
|
+
setup() {
|
|
24
|
+
const layerDirs = getLayerDirectories()
|
|
25
|
+
|
|
26
|
+
// Access directories from all layers
|
|
27
|
+
for (const [index, layer] of layerDirs.entries()) {
|
|
28
|
+
console.log(`Layer ${index}:`)
|
|
29
|
+
console.log(` Root: ${layer.root}`)
|
|
30
|
+
console.log(` App: ${layer.app}`)
|
|
31
|
+
console.log(` Server: ${layer.server}`)
|
|
32
|
+
console.log(` Pages: ${layer.appPages}`)
|
|
33
|
+
// ... other directories
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
})
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### Type
|
|
40
|
+
|
|
41
|
+
```ts twoslash
|
|
42
|
+
// @errors: 2391
|
|
43
|
+
import type { Nuxt } from '@nuxt/schema'
|
|
44
|
+
// ---cut---
|
|
45
|
+
function getLayerDirectories(nuxt?: Nuxt): LayerDirectories[]
|
|
46
|
+
|
|
47
|
+
interface LayerDirectories {
|
|
48
|
+
/** Nuxt rootDir (`/` by default) */
|
|
49
|
+
readonly root: string
|
|
50
|
+
/** Nitro source directory (`/server` by default) */
|
|
51
|
+
readonly server: string
|
|
52
|
+
/** Local modules directory (`/modules` by default) */
|
|
53
|
+
readonly modules: string
|
|
54
|
+
/** Shared directory (`/shared` by default) */
|
|
55
|
+
readonly shared: string
|
|
56
|
+
/** Public directory (`/public` by default) */
|
|
57
|
+
readonly public: string
|
|
58
|
+
/** Nuxt srcDir (`/app/` by default) */
|
|
59
|
+
readonly app: string
|
|
60
|
+
/** Layouts directory (`/app/layouts` by default) */
|
|
61
|
+
readonly appLayouts: string
|
|
62
|
+
/** Middleware directory (`/app/middleware` by default) */
|
|
63
|
+
readonly appMiddleware: string
|
|
64
|
+
/** Pages directory (`/app/pages` by default) */
|
|
65
|
+
readonly appPages: string
|
|
66
|
+
/** Plugins directory (`/app/plugins` by default) */
|
|
67
|
+
readonly appPlugins: string
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Parameters
|
|
72
|
+
|
|
73
|
+
**`nuxt`** (optional): The Nuxt instance to get layers from. If not provided, the function will use the current Nuxt context.
|
|
74
|
+
|
|
75
|
+
### Return Value
|
|
76
|
+
|
|
77
|
+
The `getLayerDirectories` function returns an array of `LayerDirectories` objects, one for each layer in the application.
|
|
78
|
+
|
|
79
|
+
**Layer Priority Ordering**: The layers are ordered by priority, where:
|
|
80
|
+
- The **first layer** is the user/project layer (highest priority)
|
|
81
|
+
- **Earlier layers override later layers** in the array
|
|
82
|
+
- **Base layers appear last** in the array (lowest priority)
|
|
83
|
+
|
|
84
|
+
This ordering matches Nuxt's layer resolution system, where user-defined configurations and files take precedence over those from base layers.
|
|
85
|
+
|
|
86
|
+
**`LayerDirectories`**: An object containing the resolved directory paths for a layer.
|
|
87
|
+
|
|
88
|
+
| Property | Type | Description |
|
|
89
|
+
| --------------- | -------- | ------------------------------------------------------------------------------ |
|
|
90
|
+
| `root` | `string` | The root directory of the layer (equivalent to `rootDir`) |
|
|
91
|
+
| `server` | `string` | The server directory for Nitro server-side code |
|
|
92
|
+
| `modules` | `string` | The local modules directory |
|
|
93
|
+
| `shared` | `string` | The shared directory for code used by both client and server |
|
|
94
|
+
| `app` | `string` | The source directory of the layer (equivalent to `srcDir`) |
|
|
95
|
+
| `public` | `string` | The public directory for static assets |
|
|
96
|
+
| `appLayouts` | `string` | The layouts directory for Vue layout components |
|
|
97
|
+
| `appMiddleware` | `string` | The middleware directory for route middleware |
|
|
98
|
+
| `appPages` | `string` | The pages directory for file-based routing |
|
|
99
|
+
| `appPlugins` | `string` | The plugins directory for Nuxt plugins |
|
|
100
|
+
|
|
101
|
+
### Examples
|
|
102
|
+
|
|
103
|
+
**Processing files from all layers:**
|
|
104
|
+
|
|
105
|
+
```ts twoslash
|
|
106
|
+
// @errors: 2307
|
|
107
|
+
// ---cut---
|
|
108
|
+
import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit'
|
|
109
|
+
import { resolve } from 'pathe'
|
|
110
|
+
import { globby } from 'globby'
|
|
111
|
+
|
|
112
|
+
export default defineNuxtModule({
|
|
113
|
+
async setup() {
|
|
114
|
+
const layerDirs = getLayerDirectories()
|
|
115
|
+
|
|
116
|
+
// Find all component files across layers
|
|
117
|
+
// Note: layerDirs[0] is the user layer (highest priority)
|
|
118
|
+
// Later layers in the array have lower priority
|
|
119
|
+
const componentFiles = []
|
|
120
|
+
for (const [index, layer] of layerDirs.entries()) {
|
|
121
|
+
const files = await globby('**/*.vue', {
|
|
122
|
+
cwd: resolve(layer.app, 'components'),
|
|
123
|
+
absolute: true
|
|
124
|
+
})
|
|
125
|
+
console.log(`Layer ${index} (${index === 0 ? 'user' : 'base'}):`, files.length, 'components')
|
|
126
|
+
componentFiles.push(...files)
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
})
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
**Adding templates from multiple layers:**
|
|
133
|
+
|
|
134
|
+
```ts twoslash
|
|
135
|
+
import { defineNuxtModule, getLayerDirectories, addTemplate } from '@nuxt/kit'
|
|
136
|
+
import { resolve, basename } from 'pathe'
|
|
137
|
+
import { existsSync } from 'fs'
|
|
138
|
+
|
|
139
|
+
export default defineNuxtModule({
|
|
140
|
+
async setup() {
|
|
141
|
+
const layerDirs = getLayerDirectories()
|
|
142
|
+
|
|
143
|
+
// Add a config file from each layer that has one
|
|
144
|
+
for (const dirs of layerDirs) {
|
|
145
|
+
const configPath = resolve(dirs.app, 'my-module.config.ts')
|
|
146
|
+
if (existsSync(configPath)) {
|
|
147
|
+
addTemplate({
|
|
148
|
+
filename: `my-module-${basename(dirs.root)}.config.ts`,
|
|
149
|
+
src: configPath
|
|
150
|
+
})
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
})
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
**Respecting layer priority:**
|
|
158
|
+
|
|
159
|
+
```ts twoslash
|
|
160
|
+
import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit'
|
|
161
|
+
import { resolve } from 'pathe'
|
|
162
|
+
import { existsSync, readFileSync } from 'fs'
|
|
163
|
+
|
|
164
|
+
export default defineNuxtModule({
|
|
165
|
+
setup() {
|
|
166
|
+
const layerDirs = getLayerDirectories()
|
|
167
|
+
|
|
168
|
+
// Find the first (highest priority) layer that has a specific config file
|
|
169
|
+
// This respects the layer priority system
|
|
170
|
+
let configContent = null
|
|
171
|
+
for (const dirs of layerDirs) {
|
|
172
|
+
const configPath = resolve(dirs.app, 'my-config.json')
|
|
173
|
+
if (existsSync(configPath)) {
|
|
174
|
+
configContent = readFileSync(configPath, 'utf-8')
|
|
175
|
+
console.log(`Using config from layer: ${dirs.root}`)
|
|
176
|
+
break // Use the first (highest priority) config found
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
// Alternative: Collect configs from all layers, with user layer taking precedence
|
|
181
|
+
const allConfigs = {}
|
|
182
|
+
for (const dirs of layerDirs.reverse()) { // Process from lowest to highest priority
|
|
183
|
+
const configPath = resolve(dirs.app, 'my-config.json')
|
|
184
|
+
if (existsSync(configPath)) {
|
|
185
|
+
const config = JSON.parse(readFileSync(configPath, 'utf-8'))
|
|
186
|
+
Object.assign(allConfigs, config) // Later assignments override earlier ones
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
})
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
**Checking for layer-specific directories:**
|
|
194
|
+
|
|
195
|
+
```ts twoslash
|
|
196
|
+
import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit'
|
|
197
|
+
import { existsSync } from 'fs'
|
|
198
|
+
import { resolve } from 'pathe'
|
|
199
|
+
|
|
200
|
+
export default defineNuxtModule({
|
|
201
|
+
setup() {
|
|
202
|
+
const layerDirs = getLayerDirectories()
|
|
203
|
+
|
|
204
|
+
// Find layers that have a specific custom directory
|
|
205
|
+
const layersWithAssets = layerDirs.filter(layer => {
|
|
206
|
+
return existsSync(resolve(layer.app, 'assets'))
|
|
207
|
+
})
|
|
208
|
+
|
|
209
|
+
console.log(`Found ${layersWithAssets.length} layers with assets directory`)
|
|
210
|
+
}
|
|
211
|
+
})
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
::note
|
|
215
|
+
The `getLayerDirectories` function includes caching via a WeakMap to avoid recomputing directory paths for the same layers repeatedly, improving performance when called multiple times.
|
|
216
|
+
::
|
|
217
|
+
|
|
218
|
+
::note
|
|
219
|
+
Directory paths returned by this function always include a trailing slash for consistency.
|
|
220
|
+
::
|
package/3.api/5.kit/7.pages.md
CHANGED
|
@@ -10,7 +10,7 @@ links:
|
|
|
10
10
|
|
|
11
11
|
## `extendPages`
|
|
12
12
|
|
|
13
|
-
In Nuxt, routes are automatically generated based on the structure of the files in the `pages` directory. However, there may be scenarios where you'd want to customize these routes. For instance, you might need to add a route for a dynamic page not generated by Nuxt, remove an existing route, or modify the configuration of a route. For such customizations, Nuxt offers the `extendPages` feature, which allows you to extend and alter the pages configuration.
|
|
13
|
+
In Nuxt, routes are automatically generated based on the structure of the files in the `app/pages` directory. However, there may be scenarios where you'd want to customize these routes. For instance, you might need to add a route for a dynamic page not generated by Nuxt, remove an existing route, or modify the configuration of a route. For such customizations, Nuxt offers the `extendPages` feature, which allows you to extend and alter the pages configuration.
|
|
14
14
|
|
|
15
15
|
::tip{icon="i-lucide-video" to="https://vueschool.io/lessons/extend-and-alter-nuxt-pages?friend=nuxt" target="_blank"}
|
|
16
16
|
Watch Vue School video about extendPages.
|
package/3.api/5.kit/8.layout.md
CHANGED
package/3.api/5.kit/9.plugins.md
CHANGED
|
@@ -8,7 +8,7 @@ links:
|
|
|
8
8
|
size: xs
|
|
9
9
|
---
|
|
10
10
|
|
|
11
|
-
Plugins are self-contained code that usually add app-level functionality to Vue. In Nuxt, plugins are automatically imported from the `plugins/` directory. However, if you need to ship a plugin with your module, Nuxt Kit provides the `addPlugin` and `addPluginTemplate` methods. These utils allow you to customize the plugin configuration to better suit your needs.
|
|
11
|
+
Plugins are self-contained code that usually add app-level functionality to Vue. In Nuxt, plugins are automatically imported from the `app/plugins/` directory. However, if you need to ship a plugin with your module, Nuxt Kit provides the `addPlugin` and `addPluginTemplate` methods. These utils allow you to customize the plugin configuration to better suit your needs.
|
|
12
12
|
|
|
13
13
|
## `addPlugin`
|
|
14
14
|
|
package/3.api/6.nuxt-config.md
CHANGED
|
@@ -252,7 +252,15 @@ Customize Nuxt root element tag.
|
|
|
252
252
|
|
|
253
253
|
### `spaLoaderAttrs`
|
|
254
254
|
|
|
255
|
-
Customize Nuxt
|
|
255
|
+
Customize Nuxt SPA loading template element attributes.
|
|
256
|
+
|
|
257
|
+
- **Type**: `object`
|
|
258
|
+
- **Default:**
|
|
259
|
+
```json
|
|
260
|
+
{
|
|
261
|
+
"id": "__nuxt-loader"
|
|
262
|
+
}
|
|
263
|
+
```
|
|
256
264
|
|
|
257
265
|
#### `id`
|
|
258
266
|
|
|
@@ -434,7 +442,7 @@ Any components in the directories configured here can be used throughout your pa
|
|
|
434
442
|
}
|
|
435
443
|
```
|
|
436
444
|
|
|
437
|
-
**See**: [`components/` directory documentation](https://nuxt.com/docs/guide/directory-structure/components)
|
|
445
|
+
**See**: [`app/components/` directory documentation](https://nuxt.com/docs/guide/directory-structure/app/components)
|
|
438
446
|
|
|
439
447
|
## css
|
|
440
448
|
|
|
@@ -568,21 +576,21 @@ It is better to stick with defaults unless needed.
|
|
|
568
576
|
The assets directory (aliased as `~assets` in your build).
|
|
569
577
|
|
|
570
578
|
- **Type**: `string`
|
|
571
|
-
- **Default:** `"assets"`
|
|
579
|
+
- **Default:** `"app/assets"`
|
|
572
580
|
|
|
573
581
|
### `layouts`
|
|
574
582
|
|
|
575
583
|
The layouts directory, each file of which will be auto-registered as a Nuxt layout.
|
|
576
584
|
|
|
577
585
|
- **Type**: `string`
|
|
578
|
-
- **Default:** `"layouts"`
|
|
586
|
+
- **Default:** `"app/layouts"`
|
|
579
587
|
|
|
580
588
|
### `middleware`
|
|
581
589
|
|
|
582
590
|
The middleware directory, each file of which will be auto-registered as a Nuxt middleware.
|
|
583
591
|
|
|
584
592
|
- **Type**: `string`
|
|
585
|
-
- **Default:** `"middleware"`
|
|
593
|
+
- **Default:** `"app/middleware"`
|
|
586
594
|
|
|
587
595
|
### `modules`
|
|
588
596
|
|
|
@@ -596,14 +604,14 @@ The modules directory, each file in which will be auto-registered as a Nuxt modu
|
|
|
596
604
|
The directory which will be processed to auto-generate your application page routes.
|
|
597
605
|
|
|
598
606
|
- **Type**: `string`
|
|
599
|
-
- **Default:** `"pages"`
|
|
607
|
+
- **Default:** `"app/pages"`
|
|
600
608
|
|
|
601
609
|
### `plugins`
|
|
602
610
|
|
|
603
611
|
The plugins directory, each file of which will be auto-registered as a Nuxt plugin.
|
|
604
612
|
|
|
605
613
|
- **Type**: `string`
|
|
606
|
-
- **Default:** `"plugins"`
|
|
614
|
+
- **Default:** `"app/plugins"`
|
|
607
615
|
|
|
608
616
|
### `public`
|
|
609
617
|
|
|
@@ -619,11 +627,6 @@ The shared directory. This directory is shared between the app and the server.
|
|
|
619
627
|
- **Type**: `string`
|
|
620
628
|
- **Default:** `"shared"`
|
|
621
629
|
|
|
622
|
-
### `static`
|
|
623
|
-
|
|
624
|
-
- **Type**: `string`
|
|
625
|
-
- **Default:** `"public"`
|
|
626
|
-
|
|
627
630
|
## esbuild
|
|
628
631
|
|
|
629
632
|
### `options`
|
|
@@ -1266,7 +1269,7 @@ Inline styles when rendering HTML (currently vite only).
|
|
|
1266
1269
|
You can also pass a function that receives the path of a Vue component and returns a boolean indicating whether to inline the styles for that component.
|
|
1267
1270
|
|
|
1268
1271
|
- **Type**: `boolean`
|
|
1269
|
-
- **Default:** `
|
|
1272
|
+
- **Default:** `(id) => id.includes('.vue')`
|
|
1270
1273
|
|
|
1271
1274
|
### `noScripts`
|
|
1272
1275
|
|
|
@@ -1368,7 +1371,7 @@ ignoreOptions: {
|
|
|
1368
1371
|
|
|
1369
1372
|
## ignorePrefix
|
|
1370
1373
|
|
|
1371
|
-
Any file in `pages/`, `layouts/`, `middleware/`, and `public/` directories will be ignored during the build process if its filename starts with the prefix specified by `ignorePrefix`. This is intended to prevent certain files from being processed or served in the built application. By default, the `ignorePrefix` is set to '-', ignoring any files starting with '-'.
|
|
1374
|
+
Any file in `app/pages/`, `app/layouts/`, `app/middleware/`, and `public/` directories will be ignored during the build process if its filename starts with the prefix specified by `ignorePrefix`. This is intended to prevent certain files from being processed or served in the built application. By default, the `ignorePrefix` is set to '-', ignoring any files starting with '-'.
|
|
1372
1375
|
|
|
1373
1376
|
- **Type**: `string`
|
|
1374
1377
|
- **Default:** `"-"`
|
|
@@ -1377,7 +1380,7 @@ Any file in `pages/`, `layouts/`, `middleware/`, and `public/` directories will
|
|
|
1377
1380
|
|
|
1378
1381
|
Configure how Nuxt auto-imports composables into your application.
|
|
1379
1382
|
|
|
1380
|
-
**See**: [Nuxt documentation](https://nuxt.com/docs/guide/directory-structure/composables)
|
|
1383
|
+
**See**: [Nuxt documentation](https://nuxt.com/docs/guide/directory-structure/app/composables)
|
|
1381
1384
|
|
|
1382
1385
|
### `dirs`
|
|
1383
1386
|
|
|
@@ -1400,7 +1403,7 @@ imports: {
|
|
|
1400
1403
|
|
|
1401
1404
|
### `scan`
|
|
1402
1405
|
|
|
1403
|
-
Whether to scan your `composables/` and `utils/` directories for composables to auto-import. Auto-imports registered by Nuxt or other modules, such as imports from `vue` or `nuxt`, will still be enabled.
|
|
1406
|
+
Whether to scan your `app/composables/` and `app/utils/` directories for composables to auto-import. Auto-imports registered by Nuxt or other modules, such as imports from `vue` or `nuxt`, will still be enabled.
|
|
1404
1407
|
|
|
1405
1408
|
- **Type**: `boolean`
|
|
1406
1409
|
- **Default:** `true`
|
|
@@ -1647,7 +1650,7 @@ treeShake: { client: { myPackage: ['useServerOnlyComposable'] } }
|
|
|
1647
1650
|
|
|
1648
1651
|
## pages
|
|
1649
1652
|
|
|
1650
|
-
Whether to use the vue-router integration in Nuxt 3. If you do not provide a value it will be enabled if you have a `pages/` directory in your source folder.
|
|
1653
|
+
Whether to use the vue-router integration in Nuxt 3. If you do not provide a value it will be enabled if you have a `app/pages/` directory in your source folder.
|
|
1651
1654
|
|
|
1652
1655
|
Additionally, you can provide a glob pattern or an array of patterns to scan only certain files for pages.
|
|
1653
1656
|
|
|
@@ -1673,7 +1676,7 @@ and these plugins do not need to be listed in `nuxt.config` unless you
|
|
|
1673
1676
|
need to customize their order. All plugins are deduplicated by their src path.
|
|
1674
1677
|
::
|
|
1675
1678
|
|
|
1676
|
-
**See**: [`plugins/` directory documentation](https://nuxt.com/docs/guide/directory-structure/plugins)
|
|
1679
|
+
**See**: [`app/plugins/` directory documentation](https://nuxt.com/docs/guide/directory-structure/plugins)
|
|
1677
1680
|
|
|
1678
1681
|
**Example**:
|
|
1679
1682
|
```js
|
|
@@ -1811,7 +1814,7 @@ If a relative path is specified, it will be relative to your `rootDir`.
|
|
|
1811
1814
|
Nitro server handlers.
|
|
1812
1815
|
|
|
1813
1816
|
Each handler accepts the following options:
|
|
1814
|
-
- handler: The path to the file defining the handler. - route: The route under which the handler is available. This follows the conventions of [rou3](https://github.com/
|
|
1817
|
+
- handler: The path to the file defining the handler. - route: The route under which the handler is available. This follows the conventions of [rou3](https://github.com/h3js/rou3). - method: The HTTP method of requests that should be handled. - middleware: Specifies whether it is a middleware handler. - lazy: Specifies whether to use lazy loading to import the handler.
|
|
1815
1818
|
|
|
1816
1819
|
- **Type**: `array`
|
|
1817
1820
|
|
package/5.community/6.roadmap.md
CHANGED
|
@@ -59,17 +59,17 @@ We commit to support each major version of Nuxt for a minimum of six months afte
|
|
|
59
59
|
|
|
60
60
|
### Current Packages
|
|
61
61
|
|
|
62
|
-
The current active version of [Nuxt](https://nuxt.com) is **
|
|
62
|
+
The current active version of [Nuxt](https://nuxt.com) is **v4** which is available as `nuxt` on npm with the `latest` tag.
|
|
63
63
|
|
|
64
|
-
Nuxt
|
|
64
|
+
Nuxt 3 will continue to receive maintenance updates (both bug fixes and backports of features from Nuxt 4) until the end of January 2026.
|
|
65
65
|
|
|
66
66
|
Each active version has its own nightly releases which are generated automatically. For more about enabling the Nuxt nightly release channel, see [the nightly release channel docs](/docs/guide/going-further/nightly-release-channel).
|
|
67
67
|
|
|
68
|
-
Release
|
|
69
|
-
|
|
68
|
+
Release | | Initial release | End Of Life | Docs
|
|
69
|
+
-------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ---------------------------- | ---------------------------------------
|
|
70
70
|
**5.x** (scheduled) | | Q4 2025 (estimated) | TBA |
|
|
71
|
-
**4.x** (
|
|
72
|
-
**3.x** (
|
|
71
|
+
**4.x** (stable) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt latest version" src="https://flat.badgen.net/npm/v/nuxt?label=" class="not-prose"></a> | 2025-07-16 | 6 months after 5.x release | [nuxt.com](/docs/4.x)
|
|
72
|
+
**3.x** (maintenance) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 3.x version" src="https://flat.badgen.net/npm/v/nuxt/3x?label=" class="not-prose"></a> | 2022-11-16 | 2026-01-31 | [nuxt.com](/docs/3.x)
|
|
73
73
|
**2.x** (unsupported) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 2.x version" src="https://flat.badgen.net/npm/v/nuxt/2x?label=" class="not-prose"></a> | 2018-09-21 | 2024-06-30 | [v2.nuxt.com](https://v2.nuxt.com/docs)
|
|
74
74
|
**1.x** (unsupported) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 1.x version" src="https://flat.badgen.net/npm/v/nuxt/1x?label=" class="not-prose"></a> | 2018-01-08 | 2019-09-21 |
|
|
75
75
|
|