@nuxt/docs 4.2.2 → 4.3.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/02.installation.md +2 -5
- package/1.getting-started/03.configuration.md +5 -5
- package/1.getting-started/06.styling.md +6 -2
- package/1.getting-started/07.routing.md +1 -1
- package/1.getting-started/08.seo-meta.md +4 -0
- package/1.getting-started/12.error-handling.md +12 -6
- package/1.getting-started/14.layers.md +47 -13
- package/1.getting-started/15.prerendering.md +14 -0
- package/1.getting-started/16.deployment.md +1 -0
- package/1.getting-started/17.testing.md +12 -2
- package/1.getting-started/18.upgrade.md +14 -1
- package/2.directory-structure/1.app/1.components.md +4 -0
- package/2.directory-structure/1.app/1.layouts.md +32 -0
- package/2.directory-structure/1.app/1.pages.md +21 -0
- package/2.directory-structure/1.app/1.plugins.md +3 -0
- package/2.directory-structure/1.app/3.error.md +9 -5
- package/2.directory-structure/1.layers.md +87 -0
- package/2.directory-structure/1.modules.md +12 -2
- package/2.directory-structure/1.node_modules.md +1 -1
- package/2.directory-structure/1.server.md +31 -11
- package/2.directory-structure/2.nuxtrc.md +3 -0
- package/2.directory-structure/3.tsconfig.md +1 -0
- package/2.directory-structure/index.md +4 -0
- package/3.guide/0.index.md +8 -2
- package/3.guide/1.concepts/1.rendering.md +5 -0
- package/3.guide/1.concepts/2.nuxt-lifecycle.md +1 -1
- package/3.guide/1.concepts/5.modules.md +14 -1
- package/3.guide/1.concepts/8.typescript.md +6 -2
- package/3.guide/3.ai/1.mcp.md +22 -0
- package/3.guide/4.modules/.navigation.yml +3 -0
- package/3.guide/4.modules/1.getting-started.md +103 -0
- package/3.guide/4.modules/2.module-anatomy.md +138 -0
- package/3.guide/4.modules/3.recipes-basics.md +420 -0
- package/3.guide/4.modules/4.recipes-advanced.md +243 -0
- package/3.guide/4.modules/5.testing.md +76 -0
- package/3.guide/4.modules/6.best-practices.md +104 -0
- package/3.guide/4.modules/7.ecosystem.md +32 -0
- package/3.guide/4.modules/index.md +36 -0
- package/3.guide/{4.recipes → 5.recipes}/2.vite-plugin.md +4 -0
- package/3.guide/{4.recipes → 5.recipes}/3.custom-usefetch.md +1 -1
- package/3.guide/{4.recipes → 5.recipes}/4.sessions-and-authentication.md +2 -2
- package/3.guide/{5.going-further → 6.going-further}/1.experimental-features.md +15 -0
- package/3.guide/{5.going-further → 6.going-further}/1.internals.md +3 -3
- package/3.guide/{5.going-further → 6.going-further}/10.runtime-config.md +1 -1
- package/3.guide/{5.going-further → 6.going-further}/2.hooks.md +2 -2
- package/3.guide/{5.going-further → 6.going-further}/4.kit.md +1 -1
- package/3.guide/{5.going-further → 6.going-further}/7.layers.md +26 -0
- package/4.api/1.components/1.nuxt-client-fallback.md +4 -0
- package/4.api/1.components/3.nuxt-layout.md +2 -2
- package/4.api/1.components/8.nuxt-island.md +9 -2
- package/4.api/2.composables/use-async-data.md +3 -3
- package/4.api/2.composables/use-error.md +2 -2
- package/4.api/2.composables/use-fetch.md +2 -2
- package/4.api/2.composables/use-head.md +16 -1
- package/4.api/2.composables/use-nuxt-app.md +2 -0
- package/4.api/2.composables/use-route-announcer.md +1 -1
- package/4.api/2.composables/use-state.md +10 -0
- package/4.api/3.utils/create-error.md +6 -6
- package/4.api/3.utils/define-nuxt-route-middleware.md +1 -1
- package/4.api/3.utils/define-page-meta.md +8 -1
- package/4.api/3.utils/set-page-layout.md +36 -0
- package/4.api/3.utils/set-response-status.md +2 -2
- package/4.api/3.utils/show-error.md +3 -3
- package/4.api/4.commands/add.md +2 -2
- package/4.api/5.kit/1.modules.md +15 -2
- package/4.api/5.kit/11.nitro.md +6 -2
- package/4.api/5.kit/14.builder.md +14 -2
- package/4.api/5.kit/4.autoimports.md +5 -1
- package/4.api/6.nuxt-config.md +40 -23
- package/5.community/4.contribution.md +5 -5
- package/5.community/5.framework-contribution.md +1 -1
- package/5.community/6.roadmap.md +4 -4
- package/5.community/7.changelog.md +10 -0
- package/6.bridge/1.overview.md +8 -0
- package/6.bridge/4.plugins-and-middleware.md +1 -1
- package/6.bridge/8.nitro.md +4 -0
- package/7.migration/11.server.md +1 -1
- package/7.migration/2.configuration.md +2 -2
- package/7.migration/20.module-authors.md +2 -2
- package/7.migration/7.component-options.md +1 -1
- package/package.json +1 -1
- package/3.guide/5.going-further/3.modules.md +0 -968
- /package/3.guide/{4.recipes → 5.recipes}/.navigation.yml +0 -0
- /package/3.guide/{4.recipes → 5.recipes}/1.custom-routing.md +0 -0
- /package/3.guide/{5.going-further → 6.going-further}/.navigation.yml +0 -0
- /package/3.guide/{5.going-further → 6.going-further}/1.events.md +0 -0
- /package/3.guide/{5.going-further → 6.going-further}/1.features.md +0 -0
- /package/3.guide/{5.going-further → 6.going-further}/11.nightly-release-channel.md +0 -0
- /package/3.guide/{5.going-further → 6.going-further}/6.nuxt-app.md +0 -0
- /package/3.guide/{5.going-further → 6.going-further}/9.debugging.md +0 -0
- /package/3.guide/{5.going-further → 6.going-further}/index.md +0 -0
|
@@ -32,6 +32,7 @@ interface PageMeta {
|
|
|
32
32
|
path?: string
|
|
33
33
|
props?: RouteRecordRaw['props']
|
|
34
34
|
alias?: string | string[]
|
|
35
|
+
groups?: string[]
|
|
35
36
|
pageTransition?: boolean | TransitionProps
|
|
36
37
|
layoutTransition?: boolean | TransitionProps
|
|
37
38
|
viewTransition?: boolean | 'always'
|
|
@@ -76,6 +77,12 @@ interface PageMeta {
|
|
|
76
77
|
|
|
77
78
|
Aliases for the record. Allows defining extra paths that will behave like a copy of the record. Allows having paths shorthands like `/users/:id` and `/u/:id`. All `alias` and `path` values must share the same params.
|
|
78
79
|
|
|
80
|
+
**`groups`**
|
|
81
|
+
|
|
82
|
+
- **Type**: `string[]`
|
|
83
|
+
|
|
84
|
+
Route groups the page belongs to, based on the folder structure. Automatically populated for pages within [route groups](/docs/4.x/guide/directory-structure/app/pages#route-groups).
|
|
85
|
+
|
|
79
86
|
**`keepalive`**
|
|
80
87
|
|
|
81
88
|
- **Type**: `boolean` | [`KeepAliveProps`](https://vuejs.org/api/built-in-components#keepalive)
|
|
@@ -130,7 +137,7 @@ interface PageMeta {
|
|
|
130
137
|
|
|
131
138
|
- **Type**: `(route: RouteLocationNormalized) => boolean | Promise<boolean> | Partial<NuxtError> | Promise<Partial<NuxtError>>`
|
|
132
139
|
|
|
133
|
-
Validate whether a given route can validly be rendered with this page. Return true if it is valid, or false if not. If another match can't be found, this will mean a 404. You can also directly return an object with `
|
|
140
|
+
Validate whether a given route can validly be rendered with this page. Return true if it is valid, or false if not. If another match can't be found, this will mean a 404. You can also directly return an object with `status`/`statusText` to respond immediately with an error (other matches will not be checked).
|
|
134
141
|
|
|
135
142
|
**`scrollToTop`**
|
|
136
143
|
|
|
@@ -19,6 +19,42 @@ export default defineNuxtRouteMiddleware((to) => {
|
|
|
19
19
|
})
|
|
20
20
|
```
|
|
21
21
|
|
|
22
|
+
## Passing Props to Layouts
|
|
23
|
+
|
|
24
|
+
You can pass props to the layout by providing an object as the second argument:
|
|
25
|
+
|
|
26
|
+
```ts [app/middleware/admin-layout.ts]
|
|
27
|
+
export default defineNuxtRouteMiddleware((to) => {
|
|
28
|
+
setPageLayout('admin', {
|
|
29
|
+
sidebar: true,
|
|
30
|
+
title: 'Dashboard',
|
|
31
|
+
})
|
|
32
|
+
})
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
The layout can then receive these props:
|
|
36
|
+
|
|
37
|
+
```vue [app/layouts/admin.vue]
|
|
38
|
+
<script setup lang="ts">
|
|
39
|
+
const props = defineProps<{
|
|
40
|
+
sidebar?: boolean
|
|
41
|
+
title?: string
|
|
42
|
+
}>()
|
|
43
|
+
</script>
|
|
44
|
+
|
|
45
|
+
<template>
|
|
46
|
+
<div>
|
|
47
|
+
<aside v-if="sidebar">
|
|
48
|
+
Sidebar
|
|
49
|
+
</aside>
|
|
50
|
+
<main>
|
|
51
|
+
<h1>{{ title }}</h1>
|
|
52
|
+
<slot />
|
|
53
|
+
</main>
|
|
54
|
+
</div>
|
|
55
|
+
</template>
|
|
56
|
+
```
|
|
57
|
+
|
|
22
58
|
::note
|
|
23
59
|
If you choose to set the layout dynamically on the server side, you _must_ do so before the layout is rendered by Vue (that is, within a plugin or route middleware) to avoid a hydration mismatch.
|
|
24
60
|
::
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: 'setResponseStatus'
|
|
3
|
-
description: setResponseStatus sets the
|
|
3
|
+
description: setResponseStatus sets the status (and optionally the statusText) of the response.
|
|
4
4
|
links:
|
|
5
5
|
- label: Source
|
|
6
6
|
icon: i-simple-icons-github
|
|
@@ -10,7 +10,7 @@ links:
|
|
|
10
10
|
|
|
11
11
|
Nuxt provides composables and utilities for first-class server-side-rendering support.
|
|
12
12
|
|
|
13
|
-
`setResponseStatus` sets the
|
|
13
|
+
`setResponseStatus` sets the status (and optionally the statusText) of the response.
|
|
14
14
|
|
|
15
15
|
::important
|
|
16
16
|
`setResponseStatus` can only be called in the [Nuxt context](/docs/4.x/guide/going-further/nuxt-app#the-nuxt-context).
|
|
@@ -12,13 +12,13 @@ Within the [Nuxt context](/docs/4.x/guide/going-further/nuxt-app#the-nuxt-contex
|
|
|
12
12
|
|
|
13
13
|
**Parameters:**
|
|
14
14
|
|
|
15
|
-
- `error`: `string | Error | Partial<{ cause, data, message, name, stack,
|
|
15
|
+
- `error`: `string | Error | Partial<{ cause, data, message, name, stack, status, statusText }>`
|
|
16
16
|
|
|
17
17
|
```ts
|
|
18
18
|
showError('😱 Oh no, an error has been thrown.')
|
|
19
19
|
showError({
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
status: 404,
|
|
21
|
+
statusText: 'Page Not Found',
|
|
22
22
|
})
|
|
23
23
|
```
|
|
24
24
|
|
package/4.api/4.commands/add.md
CHANGED
|
@@ -4,7 +4,7 @@ description: "Scaffold an entity into your Nuxt application."
|
|
|
4
4
|
links:
|
|
5
5
|
- label: Source
|
|
6
6
|
icon: i-simple-icons-github
|
|
7
|
-
to: https://github.com/nuxt/cli/blob/main/packages/nuxi/src/commands/add.ts
|
|
7
|
+
to: https://github.com/nuxt/cli/blob/main/packages/nuxi/src/commands/add-template.ts
|
|
8
8
|
size: xs
|
|
9
9
|
---
|
|
10
10
|
|
|
@@ -23,7 +23,7 @@ npx nuxt add <TEMPLATE> <NAME> [--cwd=<directory>] [--logLevel=<silent|info|verb
|
|
|
23
23
|
| `NAME` | Specify name of the generated file |
|
|
24
24
|
<!--/add-args-->
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
## Options
|
|
27
27
|
|
|
28
28
|
<!--add-opts-->
|
|
29
29
|
| Option | Default | Description |
|
package/4.api/5.kit/1.modules.md
CHANGED
|
@@ -64,7 +64,7 @@ export function defineNuxtModule<TOptions extends ModuleOptions> (): {
|
|
|
64
64
|
| `hooks` | `Partial<NuxtHooks>`{lang="ts"} | `false` | Hooks to be installed for the module. If provided, the module will install the hooks. |
|
|
65
65
|
| `moduleDependencies` | `Record<string, ModuleDependency> \| ((nuxt: Nuxt) => Record<string, ModuleDependency>)`{lang="ts"} | `false` | Dependencies on other modules with version constraints and configuration. Can be an object or a function that receives the Nuxt instance. See [example](/docs/4.x/api/kit/modules#specifying-module-dependencies). |
|
|
66
66
|
| `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. |
|
|
67
|
-
| `onUpgrade` | `(
|
|
67
|
+
| `onUpgrade` | `(nuxt: Nuxt, options: T, 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. |
|
|
68
68
|
| `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. |
|
|
69
69
|
|
|
70
70
|
### Examples
|
|
@@ -103,6 +103,19 @@ export default defineNuxtConfig({
|
|
|
103
103
|
})
|
|
104
104
|
```
|
|
105
105
|
|
|
106
|
+
Users can also completely disable a module by setting the config key to `false`. This prevents the module's setup function from running while still generating types for module options.
|
|
107
|
+
|
|
108
|
+
```ts
|
|
109
|
+
export default defineNuxtConfig({
|
|
110
|
+
// Disable the module entirely
|
|
111
|
+
myModule: false,
|
|
112
|
+
})
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
::tip
|
|
116
|
+
This is particularly useful when you want to disable modules inherited from [Nuxt layers](/docs/4.x/guide/going-further/layers#disabling-modules-from-layers).
|
|
117
|
+
::
|
|
118
|
+
|
|
106
119
|
#### Defining Module Compatibility Requirements
|
|
107
120
|
|
|
108
121
|
If you're developing a Nuxt module and using APIs that are only supported in specific Nuxt versions, it's highly recommended to include `compatibility.nuxt`.
|
|
@@ -216,7 +229,7 @@ export default defineNuxtModule({
|
|
|
216
229
|
// - Perform initial data migration
|
|
217
230
|
},
|
|
218
231
|
|
|
219
|
-
onUpgrade (
|
|
232
|
+
onUpgrade (nuxt, options, previousVersion) {
|
|
220
233
|
// This runs when the module is upgraded to a newer version
|
|
221
234
|
console.log(`Upgrading my-awesome-module from ${previousVersion} to 1.2.0`)
|
|
222
235
|
|
package/4.api/5.kit/11.nitro.md
CHANGED
|
@@ -301,6 +301,10 @@ function addPrerenderRoutes (routes: string | string[]): void
|
|
|
301
301
|
|
|
302
302
|
Add imports to the server. It makes your imports available in Nitro without the need to import them manually.
|
|
303
303
|
|
|
304
|
+
::warning
|
|
305
|
+
If you want to provide a utility that works in both server and client contexts and is usable in the [`shared/`](/docs/4.x/directory-structure/shared) directory, the function must be imported from the same source file for both [`addImports`](/docs/4.x/api/kit/autoimports#addimports) and `addServerImports` and should have identical signature. That source file should not import anything context-specific (i.e., Nitro context, Nuxt app context) or else it might cause errors during type-checking.
|
|
306
|
+
::
|
|
307
|
+
|
|
304
308
|
### Usage
|
|
305
309
|
|
|
306
310
|
```ts twoslash
|
|
@@ -422,10 +426,10 @@ export default defineEventHandler(() => {
|
|
|
422
426
|
## `addServerScanDir`
|
|
423
427
|
|
|
424
428
|
Add directories to be scanned by Nitro. It will check for subdirectories, which will be registered
|
|
425
|
-
just like the
|
|
429
|
+
just like the `~~/server` folder is.
|
|
426
430
|
|
|
427
431
|
::note
|
|
428
|
-
Only
|
|
432
|
+
Only `~~/server/api`, `~~/server/routes`, `~~/server/middleware`, and `~~/server/utils` are scanned.
|
|
429
433
|
::
|
|
430
434
|
|
|
431
435
|
### Usage
|
|
@@ -207,7 +207,19 @@ See [Vite website](https://vite.dev/guide/api-plugin) for more information about
|
|
|
207
207
|
|
|
208
208
|
### Parameters
|
|
209
209
|
|
|
210
|
-
**`pluginOrGetter`**: A Vite plugin instance or an array of Vite plugin instances. If a function is provided, it must return a Vite plugin instance or an array of Vite plugin instances.
|
|
210
|
+
**`pluginOrGetter`**: A Vite plugin instance or an array of Vite plugin instances. If a function is provided, it must return a Vite plugin instance or an array of Vite plugin instances. The function can also be async or return a Promise, which is useful for lazy-loading plugins:
|
|
211
|
+
|
|
212
|
+
```ts twoslash
|
|
213
|
+
// @errors: 2307
|
|
214
|
+
import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
|
|
215
|
+
|
|
216
|
+
export default defineNuxtModule({
|
|
217
|
+
setup () {
|
|
218
|
+
// Lazy load the plugin - only imported when the build actually runs
|
|
219
|
+
addVitePlugin(() => import('my-vite-plugin').then(r => r.default()))
|
|
220
|
+
},
|
|
221
|
+
})
|
|
222
|
+
```
|
|
211
223
|
|
|
212
224
|
**`options`**: Options to pass to the callback function. This object can have the following properties:
|
|
213
225
|
|
|
@@ -266,7 +278,7 @@ See [webpack website](https://webpack.js.org/concepts/plugins/) for more informa
|
|
|
266
278
|
|
|
267
279
|
### Parameters
|
|
268
280
|
|
|
269
|
-
**`pluginOrGetter`**: A webpack plugin instance or an array of webpack plugin instances. If a function is provided, it must return a webpack plugin instance or an array of webpack plugin instances.
|
|
281
|
+
**`pluginOrGetter`**: A webpack plugin instance or an array of webpack plugin instances. If a function is provided, it must return a webpack plugin instance or an array of webpack plugin instances. The function can also be async or return a Promise, enabling lazy-loading of plugins.
|
|
270
282
|
|
|
271
283
|
**`options`**: Options to pass to the callback function. This object can have the following properties:
|
|
272
284
|
|
|
@@ -24,7 +24,11 @@ Watch Vue School video about Auto-imports Nuxt Kit utilities.
|
|
|
24
24
|
|
|
25
25
|
## `addImports`
|
|
26
26
|
|
|
27
|
-
Add imports to the Nuxt application. It makes your imports available in the Nuxt
|
|
27
|
+
Add imports to the Nuxt application. It makes your imports available in the Nuxt app context without the need to import them manually.
|
|
28
|
+
|
|
29
|
+
::tip
|
|
30
|
+
To add imports for the Nitro server context, refer to the [`addServerImports`](/docs/4.x/api/kit/nitro#addserverimports) function.
|
|
31
|
+
::
|
|
28
32
|
|
|
29
33
|
### Usage
|
|
30
34
|
|
package/4.api/6.nuxt-config.md
CHANGED
|
@@ -13,12 +13,13 @@ You can improve your DX by defining additional aliases to access custom director
|
|
|
13
13
|
- **Default**
|
|
14
14
|
```json
|
|
15
15
|
{
|
|
16
|
-
"~": "/<
|
|
17
|
-
"@": "/<
|
|
16
|
+
"~": "/<rootDir>/app",
|
|
17
|
+
"@": "/<rootDir>/app",
|
|
18
18
|
"~~": "/<rootDir>",
|
|
19
19
|
"@@": "/<rootDir>",
|
|
20
20
|
"#shared": "/<rootDir>/shared",
|
|
21
|
-
"
|
|
21
|
+
"#server": "/<rootDir>/server",
|
|
22
|
+
"assets": "/<rootDir>/app/assets",
|
|
22
23
|
"public": "/<rootDir>/public",
|
|
23
24
|
"#build": "/<rootDir>/.nuxt",
|
|
24
25
|
"#internal/nuxt/paths": "/<rootDir>/.nuxt/paths.mjs"
|
|
@@ -210,7 +211,7 @@ Default values for layout transitions.
|
|
|
210
211
|
|
|
211
212
|
This can be overridden with `definePageMeta` on an individual page. Only JSON-serializable values are allowed.
|
|
212
213
|
|
|
213
|
-
- **Type**: `boolean`
|
|
214
|
+
- **Type**: `boolean | TransitionProps`
|
|
214
215
|
- **Default:** `false`
|
|
215
216
|
|
|
216
217
|
**See**: [Vue Transition docs](https://vuejs.org/api/built-in-components#transition)
|
|
@@ -221,7 +222,7 @@ Default values for page transitions.
|
|
|
221
222
|
|
|
222
223
|
This can be overridden with `definePageMeta` on an individual page. Only JSON-serializable values are allowed.
|
|
223
224
|
|
|
224
|
-
- **Type**: `boolean`
|
|
225
|
+
- **Type**: `boolean | TransitionProps`
|
|
225
226
|
- **Default:** `false`
|
|
226
227
|
|
|
227
228
|
**See**: [Vue Transition docs](https://vuejs.org/api/built-in-components#transition)
|
|
@@ -372,7 +373,7 @@ export default defineNuxtConfig({
|
|
|
372
373
|
build: {
|
|
373
374
|
templates: [
|
|
374
375
|
{
|
|
375
|
-
src: '
|
|
376
|
+
src: '~~/modules/support/plugin.js', // `src` can be absolute or relative
|
|
376
377
|
dst: 'support.js', // `dst` is relative to project `.nuxt` dir
|
|
377
378
|
},
|
|
378
379
|
],
|
|
@@ -880,7 +881,7 @@ Defaults to 'silent' when running in CI or when a TTY is not available. This opt
|
|
|
880
881
|
Modules are Nuxt extensions which can extend its core functionality and add endless integrations.
|
|
881
882
|
|
|
882
883
|
Each module is either a string (which can refer to a package, or be a path to a file), a tuple with the module as first string and the options as a second object, or an inline module function.
|
|
883
|
-
Nuxt tries to resolve each item in the modules array using node require path (in `node_modules`) and then will be resolved from project `
|
|
884
|
+
Nuxt tries to resolve each item in the modules array using node require path (in `node_modules`) and then will be resolved from project `rootDir` if `~~` alias is used.
|
|
884
885
|
|
|
885
886
|
- **Type**: `array`
|
|
886
887
|
|
|
@@ -895,8 +896,8 @@ export default defineNuxtConfig({
|
|
|
895
896
|
modules: [
|
|
896
897
|
// Using package name
|
|
897
898
|
'@nuxt/scripts',
|
|
898
|
-
// Relative to your project
|
|
899
|
-
'
|
|
899
|
+
// Relative to your project rootDir
|
|
900
|
+
'~~/custom-modules/awesome.js',
|
|
900
901
|
// Providing options
|
|
901
902
|
['@nuxtjs/google-analytics', { ua: 'X1234567' }],
|
|
902
903
|
// Inline definition
|
|
@@ -1013,8 +1014,12 @@ Options passed directly to the transformer from `unctx` that preserves async con
|
|
|
1013
1014
|
|
|
1014
1015
|
Functions to inject a key for.
|
|
1015
1016
|
|
|
1016
|
-
As long as the number of arguments passed to the function is less than `argumentLength`, an additional magic string will be injected
|
|
1017
|
-
The key
|
|
1017
|
+
As long as the number of arguments passed to the function is less than `argumentLength`, an additional magic string will be injected as the last argument. This key is stable between SSR and client-side hydration. You will need to take steps to handle this additional key.
|
|
1018
|
+
The key is unique based on the location of the function being invoked within the file.
|
|
1019
|
+
|
|
1020
|
+
::read-more{to="/docs/4.x/guide/modules/recipes-basics#add-keyed-functions"}
|
|
1021
|
+
Learn more about keyed functions.
|
|
1022
|
+
::
|
|
1018
1023
|
|
|
1019
1024
|
- **Type**: `array`
|
|
1020
1025
|
- **Default**
|
|
@@ -1022,31 +1027,38 @@ The key will be unique based on the location of the function being invoked withi
|
|
|
1022
1027
|
[
|
|
1023
1028
|
{
|
|
1024
1029
|
"name": "callOnce",
|
|
1025
|
-
"argumentLength": 3
|
|
1030
|
+
"argumentLength": 3,
|
|
1031
|
+
"source": "#app/composables/once"
|
|
1026
1032
|
},
|
|
1027
1033
|
{
|
|
1028
1034
|
"name": "defineNuxtComponent",
|
|
1029
|
-
"argumentLength": 2
|
|
1035
|
+
"argumentLength": 2,
|
|
1036
|
+
"source": "#app/composables/component"
|
|
1030
1037
|
},
|
|
1031
1038
|
{
|
|
1032
1039
|
"name": "useState",
|
|
1033
|
-
"argumentLength": 2
|
|
1040
|
+
"argumentLength": 2,
|
|
1041
|
+
"source": "#app/composables/state"
|
|
1034
1042
|
},
|
|
1035
1043
|
{
|
|
1036
1044
|
"name": "useFetch",
|
|
1037
|
-
"argumentLength": 3
|
|
1045
|
+
"argumentLength": 3,
|
|
1046
|
+
"source": "#app/composables/fetch"
|
|
1038
1047
|
},
|
|
1039
1048
|
{
|
|
1040
1049
|
"name": "useAsyncData",
|
|
1041
|
-
"argumentLength": 3
|
|
1050
|
+
"argumentLength": 3,
|
|
1051
|
+
"source": "#app/composables/asyncData"
|
|
1042
1052
|
},
|
|
1043
1053
|
{
|
|
1044
1054
|
"name": "useLazyAsyncData",
|
|
1045
|
-
"argumentLength": 3
|
|
1055
|
+
"argumentLength": 3,
|
|
1056
|
+
"source": "#app/composables/asyncData"
|
|
1046
1057
|
},
|
|
1047
1058
|
{
|
|
1048
1059
|
"name": "useLazyFetch",
|
|
1049
|
-
"argumentLength": 3
|
|
1060
|
+
"argumentLength": 3,
|
|
1061
|
+
"source": "#app/composables/fetch"
|
|
1050
1062
|
}
|
|
1051
1063
|
]
|
|
1052
1064
|
```
|
|
@@ -1297,7 +1309,7 @@ Define the server directory of your Nuxt application, where Nitro routes, middle
|
|
|
1297
1309
|
If a relative path is specified, it will be relative to your `rootDir`.
|
|
1298
1310
|
|
|
1299
1311
|
- **Type**: `string`
|
|
1300
|
-
- **Default:** `"/<
|
|
1312
|
+
- **Default:** `"/<rootDir>/server"`
|
|
1301
1313
|
|
|
1302
1314
|
## serverHandlers
|
|
1303
1315
|
|
|
@@ -1318,7 +1330,7 @@ Each handler accepts the following options:
|
|
|
1318
1330
|
```ts
|
|
1319
1331
|
export default defineNuxtConfig({
|
|
1320
1332
|
serverHandlers: [
|
|
1321
|
-
{ route: '/path/foo/**:name', handler: '
|
|
1333
|
+
{ route: '/path/foo/**:name', handler: '#server/foohandler.ts' },
|
|
1322
1334
|
],
|
|
1323
1335
|
})
|
|
1324
1336
|
```
|
|
@@ -1408,22 +1420,27 @@ export default defineNuxtConfig({
|
|
|
1408
1420
|
srcDir: 'app/',
|
|
1409
1421
|
})
|
|
1410
1422
|
```
|
|
1423
|
+
|
|
1411
1424
|
This expects the following folder structure:
|
|
1412
1425
|
```bash
|
|
1413
1426
|
-| app/
|
|
1414
1427
|
---| assets/
|
|
1415
1428
|
---| components/
|
|
1429
|
+
---| composables/
|
|
1416
1430
|
---| layouts/
|
|
1417
1431
|
---| middleware/
|
|
1418
1432
|
---| pages/
|
|
1419
1433
|
---| plugins/
|
|
1434
|
+
---| utils/
|
|
1420
1435
|
---| app.config.ts
|
|
1421
1436
|
---| app.vue
|
|
1422
1437
|
---| error.vue
|
|
1423
1438
|
-| server/
|
|
1439
|
+
-| shared/
|
|
1424
1440
|
-| public/
|
|
1425
1441
|
-| modules/
|
|
1426
|
-
-|
|
|
1442
|
+
-| layers/
|
|
1443
|
+
-| nuxt.config.ts
|
|
1427
1444
|
-| package.json
|
|
1428
1445
|
```
|
|
1429
1446
|
|
|
@@ -1692,7 +1709,7 @@ Please note that not all vite options are supported in Nuxt.
|
|
|
1692
1709
|
### `root`
|
|
1693
1710
|
|
|
1694
1711
|
- **Type**: `string`
|
|
1695
|
-
- **Default:** `"/<
|
|
1712
|
+
- **Default:** `"/<rootDir>"`
|
|
1696
1713
|
|
|
1697
1714
|
### `server`
|
|
1698
1715
|
|
|
@@ -1705,7 +1722,7 @@ Please note that not all vite options are supported in Nuxt.
|
|
|
1705
1722
|
```json
|
|
1706
1723
|
[
|
|
1707
1724
|
"/<rootDir>/.nuxt",
|
|
1708
|
-
"/<
|
|
1725
|
+
"/<rootDir>/app",
|
|
1709
1726
|
"/<rootDir>",
|
|
1710
1727
|
"/<workspaceDir>"
|
|
1711
1728
|
]
|
|
@@ -11,7 +11,7 @@ There is a range of different ways you might be able to contribute to the Nuxt e
|
|
|
11
11
|
The Nuxt ecosystem includes many different projects and organizations:
|
|
12
12
|
|
|
13
13
|
* [nuxt/](https://github.com/nuxt) - core repositories for the Nuxt framework itself. [**nuxt/nuxt**](https://github.com/nuxt/nuxt) contains the Nuxt framework (both versions 2 and 3).
|
|
14
|
-
* [nuxt-modules/](https://github.com/nuxt-modules) - community-contributed and maintained modules and libraries. There is a [process to migrate a module](/docs/4.x/guide/
|
|
14
|
+
* [nuxt-modules/](https://github.com/nuxt-modules) - community-contributed and maintained modules and libraries. There is a [process to migrate a module](/docs/4.x/guide/modules/ecosystem) to `nuxt-modules`. While these modules have individual maintainers, they are not dependent on a single person.
|
|
15
15
|
* [unjs/](https://github.com/unjs) - many of these libraries are used throughout the Nuxt ecosystem. They are designed to be universal libraries that are framework- and environment-agnostic. We welcome contributions and usage by other frameworks and projects.
|
|
16
16
|
|
|
17
17
|
## How To Contribute
|
|
@@ -100,7 +100,7 @@ Our aim is ensuring quality and maintaining the joy of collaborating and communi
|
|
|
100
100
|
|
|
101
101
|
### Create a Module
|
|
102
102
|
|
|
103
|
-
If you've built something with Nuxt that's cool, why not [extract it into a module](/docs/4.x/guide/
|
|
103
|
+
If you've built something with Nuxt that's cool, why not [extract it into a module](/docs/4.x/guide/modules), so it can be shared with others? We have [many excellent modules already](/modules), but there's always room for more.
|
|
104
104
|
|
|
105
105
|
If you need help while building it, feel free to [check in with us](/docs/4.x/community/getting-help).
|
|
106
106
|
|
|
@@ -126,7 +126,7 @@ The following conventions are _required_ within the `nuxt/` organization and rec
|
|
|
126
126
|
|
|
127
127
|
#### Module Conventions
|
|
128
128
|
|
|
129
|
-
Modules should follow the [Nuxt module template](https://github.com/nuxt/starter/tree/module). See [module guide](/docs/4.x/guide/
|
|
129
|
+
Modules should follow the [Nuxt module template](https://github.com/nuxt/starter/tree/module). See [module guide](/docs/4.x/guide/modules) for more information.
|
|
130
130
|
|
|
131
131
|
#### Use Core `unjs/` Libraries
|
|
132
132
|
|
|
@@ -134,7 +134,7 @@ We recommend the following libraries which are used throughout the ecosystem:
|
|
|
134
134
|
|
|
135
135
|
* [pathe](https://github.com/unjs/pathe) - universal path utilities (replacement for node `path`)
|
|
136
136
|
* [ufo](https://github.com/unjs/ufo) - URL parsing and joining utilities
|
|
137
|
-
* [
|
|
137
|
+
* [obuild](https://github.com/unjs/obuild) - rolldown-powered build system
|
|
138
138
|
* ... check out the rest of the [unjs/](https://github.com/unjs) organization for many more!
|
|
139
139
|
|
|
140
140
|
#### Use ESM Syntax and Default to `type: module`
|
|
@@ -172,7 +172,7 @@ We recommend using [VS Code](https://code.visualstudio.com) along with the [ESLi
|
|
|
172
172
|
|
|
173
173
|
#### No Prettier
|
|
174
174
|
|
|
175
|
-
Since ESLint is already configured to format the code, there is no need to duplicate the functionality with Prettier. To format the code, you can run `yarn lint --fix`, `pnpm lint --fix`, or `
|
|
175
|
+
Since ESLint is already configured to format the code, there is no need to duplicate the functionality with Prettier. To format the code, you can run `yarn lint --fix`, `pnpm lint --fix`, `bun run lint --fix`, or `deno run lint --fix` or referring the [ESLint section](/docs/4.x/community/contribution#use-eslint) for IDE Setup.
|
|
176
176
|
|
|
177
177
|
If you have Prettier installed in your editor, we recommend you disable it when working on the project to avoid conflict.
|
|
178
178
|
|
|
@@ -8,7 +8,7 @@ Once you've read the [general contribution guide](/docs/4.x/community/contributi
|
|
|
8
8
|
|
|
9
9
|
## Monorepo Guide
|
|
10
10
|
|
|
11
|
-
- `packages/kit`: Toolkit for authoring Nuxt
|
|
11
|
+
- `packages/kit`: Toolkit for authoring Nuxt modules, published as [`@nuxt/kit`](https://www.npmjs.com/package/@nuxt/kit).
|
|
12
12
|
- `packages/nuxt`: The core of Nuxt, published as [`nuxt`](https://www.npmjs.com/package/nuxt).
|
|
13
13
|
- `packages/schema`: Cross-version Nuxt typedefs and defaults, published as [`@nuxt/schema`](https://www.npmjs.com/package/@nuxt/schema).
|
|
14
14
|
- `packages/rspack`: The [Rspack](https://rspack.rs) bundler for Nuxt, published as [`@nuxt/rspack-builder`](https://www.npmjs.com/package/@nuxt/rspack-builder).
|
package/5.community/6.roadmap.md
CHANGED
|
@@ -42,7 +42,7 @@ In addition to the Nuxt framework, there are modules that are vital for the ecos
|
|
|
42
42
|
|----------------------------------------|--------------|--------------|-------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
43
43
|
| [Scripts](https://scripts.nuxt.com) | Public Beta | 3.x, 4.x | [nuxt/scripts](https://github.com/nuxt/scripts) | Easy 3rd party script management. |
|
|
44
44
|
| Auth Utils | Planned | 4.x, 5.x | `nuxt/auth-utils` to be announced | The temporary repository [atinux/nuxt-auth-utils](https://github.com/atinux/nuxt-auth-utils) is available while awaiting its official integration into Nuxt via RFC. |
|
|
45
|
-
|
|
|
45
|
+
| [a11y](https://github.com/nuxt/a11y) | Public Alpha | 3.x, 4.x | [nuxt/a11y](https://github.com/nuxt/a11y). | Real-time accessibility feedback and automated testing in your browser during development (see [nuxt/nuxt#23255](https://github.com/nuxt/nuxt/issues/23255)). |
|
|
46
46
|
| [Hints](https://github.com/nuxt/hints) | Public Alpha | 4.x, 5.x | [nuxt/hints](https://github.com/nuxt/hints) | Guidance and suggestions for enhancing development practices. |
|
|
47
47
|
|
|
48
48
|
## Release Cycle
|
|
@@ -61,15 +61,15 @@ We commit to support each major version of Nuxt for a minimum of six months afte
|
|
|
61
61
|
|
|
62
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 3 will continue to receive maintenance updates (
|
|
64
|
+
Nuxt 3 will continue to receive maintenance updates (bug fixes and security patches) until the end of July 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/4.x/guide/going-further/nightly-release-channel).
|
|
67
67
|
|
|
68
68
|
| Release | | Initial release | End Of Life | Docs |
|
|
69
69
|
|-----------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------|----------------------------|-------------------------------------------------------------------|
|
|
70
|
-
| **5.x** (scheduled) | |
|
|
70
|
+
| **5.x** (scheduled) | | Q1 2026 (estimated) | TBA | |
|
|
71
71
|
| **4.x** (stable) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt latest version" src="https://img.shields.io/npm/v/nuxt.svg?logo=nuxt&label=&style=flat&colorA=18181B&colorB=28CF8D" class="not-prose h-5 w-auto" :zoom="false"></a> | 2025-07-16 | 6 months after 5.x release | [nuxt.com](/docs/4.x/getting-started/introduction) |
|
|
72
|
-
| **3.x** (maintenance) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 3.x version" src="https://img.shields.io/npm/v/nuxt/3x.svg?logo=nuxt&label=&style=flat&colorA=18181B&colorB=28CF8D" class="not-prose h-5 w-auto" :zoom="false"></a> | 2022-11-16 | 2026-
|
|
72
|
+
| **3.x** (maintenance) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 3.x version" src="https://img.shields.io/npm/v/nuxt/3x.svg?logo=nuxt&label=&style=flat&colorA=18181B&colorB=28CF8D" class="not-prose h-5 w-auto" :zoom="false"></a> | 2022-11-16 | 2026-07-31 | [nuxt.com](/docs/3.x/getting-started/introduction) |
|
|
73
73
|
| **2.x** (unsupported) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 2.x version" src="https://img.shields.io/npm/v/nuxt/2x.svg?logo=nuxt&label=&style=flat&colorA=18181B&colorB=28CF8D" class="not-prose h-5 w-auto" :zoom="false"></a> | 2018-09-21 | 2024-06-30 | [v2.nuxt.com](https://v2.nuxt.com/docs/get-started/installation/) |
|
|
74
74
|
| **1.x** (unsupported) | <a href="https://www.npmjs.com/package/nuxt?activeTab=versions"><img alt="Nuxt 1.x version" src="https://img.shields.io/npm/v/nuxt/1x.svg?logo=nuxt&label=&style=flat&colorA=18181B&colorB=28CF8D" class="not-prose h-5 w-auto" :zoom="false"></a> | 2018-01-08 | 2019-09-21 | |
|
|
75
75
|
|
|
@@ -28,6 +28,16 @@ navigation.icon: i-lucide-bell-dot
|
|
|
28
28
|
::card
|
|
29
29
|
---
|
|
30
30
|
icon: i-simple-icons-github
|
|
31
|
+
title: nuxt/a11y
|
|
32
|
+
to: https://github.com/nuxt/a11y/releases
|
|
33
|
+
target: _blank
|
|
34
|
+
ui.icon.base: text-black dark:text-white
|
|
35
|
+
---
|
|
36
|
+
Nuxt A11y releases.
|
|
37
|
+
::
|
|
38
|
+
::card
|
|
39
|
+
---
|
|
40
|
+
icon: i-simple-icons-github
|
|
31
41
|
title: nuxt/content
|
|
32
42
|
to: https://github.com/nuxt/content/releases
|
|
33
43
|
target: _blank
|
package/6.bridge/1.overview.md
CHANGED
|
@@ -46,6 +46,10 @@ pnpm install
|
|
|
46
46
|
bun install
|
|
47
47
|
```
|
|
48
48
|
|
|
49
|
+
```bash [deno]
|
|
50
|
+
deno install
|
|
51
|
+
```
|
|
52
|
+
|
|
49
53
|
::
|
|
50
54
|
|
|
51
55
|
::note
|
|
@@ -74,6 +78,10 @@ pnpm add -D @nuxt/bridge nuxi
|
|
|
74
78
|
bun add -D @nuxt/bridge nuxi
|
|
75
79
|
```
|
|
76
80
|
|
|
81
|
+
```bash [deno]
|
|
82
|
+
deno add -D npm:@nuxt/bridge npm:nuxi
|
|
83
|
+
```
|
|
84
|
+
|
|
77
85
|
::
|
|
78
86
|
|
|
79
87
|
### Update `nuxt.config`
|
|
@@ -46,7 +46,7 @@ Use of `defineNuxtRouteMiddleware` is not supported outside of the `app/middlewa
|
|
|
46
46
|
|
|
47
47
|
You can also use [`definePageMeta`](/docs/4.x/api/utils/define-page-meta) in Nuxt Bridge.
|
|
48
48
|
|
|
49
|
-
|
|
49
|
+
It can be enabled with the `macros.pageMeta` option in your configuration file
|
|
50
50
|
|
|
51
51
|
```ts [nuxt.config.ts]
|
|
52
52
|
import { defineNuxtConfig } from '@nuxt/bridge'
|
package/6.bridge/8.nitro.md
CHANGED
package/7.migration/11.server.md
CHANGED
|
@@ -10,7 +10,7 @@ In a built Nuxt 3 application, there is no runtime Nuxt dependency. That means y
|
|
|
10
10
|
## Steps
|
|
11
11
|
|
|
12
12
|
1. Remove the `render` key in your `nuxt.config`.
|
|
13
|
-
2. Any files in
|
|
13
|
+
2. Any files in `~~/server/api` and `~~/server/middleware` will be automatically registered; you can remove them from your `serverMiddleware` array.
|
|
14
14
|
3. Update any other items in your `serverMiddleware` array to point to files or npm packages directly, rather than using inline functions.
|
|
15
15
|
|
|
16
16
|
:read-more{to="/docs/4.x/directory-structure/server"}
|
|
@@ -115,7 +115,7 @@ Nuxt has built-in support for loading `.env` files. Avoid directly importing it
|
|
|
115
115
|
|
|
116
116
|
## Modules
|
|
117
117
|
|
|
118
|
-
Nuxt and Nuxt
|
|
118
|
+
Nuxt and Nuxt modules are now build-time-only.
|
|
119
119
|
|
|
120
120
|
### Migration
|
|
121
121
|
|
|
@@ -133,7 +133,7 @@ Nuxt and Nuxt Modules are now build-time-only.
|
|
|
133
133
|
```
|
|
134
134
|
|
|
135
135
|
::tip
|
|
136
|
-
If you are a module author, you can check out [more information about module compatibility](/docs/4.x/migration/module-authors) and [our module author guide](/docs/4.x/guide/
|
|
136
|
+
If you are a module author, you can check out [more information about module compatibility](/docs/4.x/migration/module-authors) and [our module author guide](/docs/4.x/guide/modules).
|
|
137
137
|
::
|
|
138
138
|
|
|
139
139
|
## Directory Changes
|
|
@@ -7,7 +7,7 @@ description: 'Learn how to migrate from Nuxt 2 to Nuxt 3 modules.'
|
|
|
7
7
|
|
|
8
8
|
Nuxt 3 has a basic backward compatibility layer for Nuxt 2 modules using `@nuxt/kit` auto wrappers. But there are usually steps to follow to make modules compatible with Nuxt 3 and sometimes, using Nuxt Bridge is required for cross-version compatibility.
|
|
9
9
|
|
|
10
|
-
We have prepared a [Dedicated Guide](/docs/4.x/guide/
|
|
10
|
+
We have prepared a [Dedicated Guide](/docs/4.x/guide/modules) for authoring Nuxt 3 ready modules using `@nuxt/kit`. Currently best migration path is to follow it and rewrite your modules. Rest of this guide includes preparation steps if you prefer to avoid a full rewrite yet making modules compatible with Nuxt 3.
|
|
11
11
|
|
|
12
12
|
::tip{icon="i-lucide-puzzle" to="/modules"}
|
|
13
13
|
Explore Nuxt 3 compatible modules.
|
|
@@ -78,7 +78,7 @@ Your module should work even if it's only added to [`buildModules`](/docs/4.x/ap
|
|
|
78
78
|
(*) Unless it is for `nuxt dev` purpose only and guarded with `if (nuxt.options.dev) { }`.
|
|
79
79
|
|
|
80
80
|
::tip
|
|
81
|
-
Continue reading about Nuxt 3 modules in the [Modules Author Guide](/docs/4.x/guide/
|
|
81
|
+
Continue reading about Nuxt 3 modules in the [Modules Author Guide](/docs/4.x/guide/modules).
|
|
82
82
|
::
|
|
83
83
|
|
|
84
84
|
### Use TypeScript (Optional)
|
|
@@ -124,7 +124,7 @@ Similar to `key`, specify it within the [`definePageMeta`](/docs/4.x/api/utils/d
|
|
|
124
124
|
|
|
125
125
|
## `validate`
|
|
126
126
|
|
|
127
|
-
The validate hook in Nuxt 3 only accepts a single argument, the `route`. Just as in Nuxt 2, you can return a boolean value. If you return false and another match can't be found, this will mean a 404. You can also directly return an object with `
|
|
127
|
+
The validate hook in Nuxt 3 only accepts a single argument, the `route`. Just as in Nuxt 2, you can return a boolean value. If you return false and another match can't be found, this will mean a 404. You can also directly return an object with `status`/`statusText` to respond immediately with an error (other matches will not be checked).
|
|
128
128
|
|
|
129
129
|
```diff [app/pages/users/[id\\].vue]
|
|
130
130
|
- <script>
|