@nuxt/docs-nightly 4.1.3-29313386.edc02e27 → 4.1.3-29316215.910d159d
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 +4 -4
- package/1.getting-started/02.installation.md +1 -1
- package/1.getting-started/03.configuration.md +25 -25
- package/1.getting-started/04.views.md +3 -3
- package/1.getting-started/05.assets.md +9 -3
- package/1.getting-started/06.styling.md +53 -43
- package/1.getting-started/07.routing.md +9 -9
- package/1.getting-started/08.seo-meta.md +50 -37
- package/1.getting-started/09.transitions.md +38 -33
- package/1.getting-started/10.data-fetching.md +61 -53
- package/1.getting-started/11.state-management.md +19 -12
- package/1.getting-started/12.error-handling.md +17 -15
- package/1.getting-started/13.server.md +8 -8
- package/1.getting-started/14.layers.md +19 -13
- package/1.getting-started/15.prerendering.md +28 -28
- package/1.getting-started/16.deployment.md +8 -8
- package/1.getting-started/17.testing.md +42 -42
- package/1.getting-started/18.upgrade.md +50 -68
- package/2.guide/0.index.md +5 -5
- package/2.guide/1.directory-structure/0.output.md +1 -1
- package/2.guide/1.directory-structure/1.app/1.assets.md +1 -1
- package/2.guide/1.directory-structure/1.app/1.components.md +40 -23
- package/2.guide/1.directory-structure/1.app/1.composables.md +9 -9
- package/2.guide/1.directory-structure/1.app/1.layouts.md +12 -8
- package/2.guide/1.directory-structure/1.app/1.middleware.md +23 -17
- package/2.guide/1.directory-structure/1.app/1.pages.md +25 -23
- package/2.guide/1.directory-structure/1.app/1.plugins.md +17 -17
- package/2.guide/1.directory-structure/1.app/1.utils.md +3 -3
- package/2.guide/1.directory-structure/1.app/3.app-config.md +7 -7
- package/2.guide/1.directory-structure/1.app/3.app.md +3 -3
- package/2.guide/1.directory-structure/1.app/3.error.md +4 -4
- package/2.guide/1.directory-structure/1.content.md +4 -1
- package/2.guide/1.directory-structure/1.modules.md +5 -5
- package/2.guide/1.directory-structure/1.public.md +1 -1
- package/2.guide/1.directory-structure/1.server.md +30 -30
- package/2.guide/1.directory-structure/1.shared.md +3 -3
- package/2.guide/1.directory-structure/2.env.md +3 -3
- package/2.guide/1.directory-structure/2.nuxtrc.md +1 -1
- package/2.guide/1.directory-structure/3.nuxt-config.md +1 -1
- package/2.guide/2.concepts/1.auto-imports.md +15 -15
- package/2.guide/2.concepts/10.nuxt-lifecycle.md +7 -7
- package/2.guide/2.concepts/2.vuejs-development.md +9 -9
- package/2.guide/2.concepts/3.rendering.md +17 -15
- package/2.guide/2.concepts/4.server-engine.md +1 -1
- package/2.guide/2.concepts/5.modules.md +3 -3
- package/2.guide/2.concepts/7.esm.md +16 -14
- package/2.guide/2.concepts/8.typescript.md +4 -4
- package/2.guide/3.going-further/1.events.md +3 -3
- package/2.guide/3.going-further/1.experimental-features.md +238 -77
- package/2.guide/3.going-further/1.features.md +44 -9
- package/2.guide/3.going-further/1.internals.md +15 -15
- package/2.guide/3.going-further/10.runtime-config.md +8 -8
- package/2.guide/3.going-further/11.nightly-release-channel.md +1 -1
- package/2.guide/3.going-further/2.hooks.md +11 -11
- package/2.guide/3.going-further/3.modules.md +83 -81
- package/2.guide/3.going-further/4.kit.md +5 -5
- package/2.guide/3.going-further/6.nuxt-app.md +4 -4
- package/2.guide/3.going-further/7.layers.md +51 -42
- package/2.guide/3.going-further/9.debugging.md +2 -2
- package/2.guide/4.recipes/1.custom-routing.md +19 -19
- package/2.guide/4.recipes/2.vite-plugin.md +3 -3
- package/2.guide/4.recipes/3.custom-usefetch.md +10 -10
- package/2.guide/4.recipes/4.sessions-and-authentication.md +34 -20
- package/2.guide/5.best-practices/performance.md +13 -13
- package/3.api/1.components/1.client-only.md +6 -3
- package/3.api/1.components/1.nuxt-client-fallback.md +10 -7
- package/3.api/1.components/11.teleports.md +5 -2
- package/3.api/1.components/12.nuxt-route-announcer.md +7 -7
- package/3.api/1.components/13.nuxt-time.md +44 -17
- package/3.api/1.components/2.nuxt-page.md +4 -4
- package/3.api/1.components/3.nuxt-layout.md +13 -8
- package/3.api/1.components/4.nuxt-link.md +40 -20
- package/3.api/1.components/5.nuxt-loading-indicator.md +1 -1
- package/3.api/1.components/6.nuxt-error-boundary.md +12 -10
- package/3.api/2.composables/on-prehydrate.md +2 -2
- package/3.api/2.composables/use-app-config.md +1 -1
- package/3.api/2.composables/use-async-data.md +14 -14
- package/3.api/2.composables/use-cookie.md +27 -19
- package/3.api/2.composables/use-error.md +2 -2
- package/3.api/2.composables/use-fetch.md +17 -17
- package/3.api/2.composables/use-head-safe.md +5 -5
- package/3.api/2.composables/use-head.md +3 -3
- package/3.api/2.composables/use-hydration.md +5 -5
- package/3.api/2.composables/use-lazy-async-data.md +2 -2
- package/3.api/2.composables/use-lazy-fetch.md +2 -2
- package/3.api/2.composables/use-loading-indicator.md +10 -10
- package/3.api/2.composables/use-nuxt-app.md +10 -10
- package/3.api/2.composables/use-nuxt-data.md +7 -7
- package/3.api/2.composables/use-preview-mode.md +12 -15
- package/3.api/2.composables/use-request-fetch.md +1 -1
- package/3.api/2.composables/use-request-headers.md +3 -3
- package/3.api/2.composables/use-response-header.md +7 -8
- package/3.api/2.composables/use-route-announcer.md +3 -3
- package/3.api/2.composables/use-router.md +6 -4
- package/3.api/2.composables/use-runtime-config.md +11 -11
- package/3.api/2.composables/use-runtime-hook.md +1 -1
- package/3.api/2.composables/use-seo-meta.md +3 -3
- package/3.api/2.composables/use-server-seo-meta.md +3 -3
- package/3.api/2.composables/use-state.md +4 -4
- package/3.api/3.utils/$fetch.md +6 -4
- package/3.api/3.utils/abort-navigation.md +2 -2
- package/3.api/3.utils/add-route-middleware.md +3 -3
- package/3.api/3.utils/call-once.md +5 -5
- package/3.api/3.utils/clear-error.md +2 -2
- package/3.api/3.utils/clear-nuxt-data.md +2 -2
- package/3.api/3.utils/clear-nuxt-state.md +2 -2
- package/3.api/3.utils/create-error.md +2 -2
- package/3.api/3.utils/define-lazy-hydration-component.md +13 -13
- package/3.api/3.utils/define-nuxt-component.md +5 -5
- package/3.api/3.utils/define-nuxt-plugin.md +12 -12
- package/3.api/3.utils/define-nuxt-route-middleware.md +2 -2
- package/3.api/3.utils/define-page-meta.md +16 -16
- package/3.api/3.utils/define-route-rules.md +5 -5
- package/3.api/3.utils/navigate-to.md +10 -10
- package/3.api/3.utils/preload-components.md +1 -1
- package/3.api/3.utils/preload-route-components.md +2 -2
- package/3.api/3.utils/prerender-routes.md +2 -2
- package/3.api/3.utils/refresh-cookie.md +4 -4
- package/3.api/3.utils/refresh-nuxt-data.md +10 -5
- package/3.api/3.utils/reload-nuxt-app.md +3 -3
- package/3.api/3.utils/set-response-status.md +2 -2
- package/3.api/3.utils/show-error.md +3 -3
- package/3.api/3.utils/update-app-config.md +3 -2
- package/3.api/4.commands/generate.md +1 -1
- package/3.api/4.commands/prepare.md +4 -0
- package/3.api/4.commands/typecheck.md +1 -1
- package/3.api/5.kit/1.modules.md +36 -36
- package/3.api/5.kit/10.templates.md +8 -6
- package/3.api/5.kit/11.nitro.md +62 -62
- package/3.api/5.kit/12.resolving.md +2 -2
- package/3.api/5.kit/14.builder.md +1 -0
- package/3.api/5.kit/15.examples.md +2 -2
- package/3.api/5.kit/16.layers.md +26 -26
- package/3.api/5.kit/3.compatibility.md +12 -12
- package/3.api/5.kit/4.autoimports.md +12 -12
- package/3.api/5.kit/5.components.md +5 -5
- package/3.api/5.kit/6.context.md +3 -3
- package/3.api/5.kit/7.pages.md +4 -4
- package/3.api/5.kit/8.layout.md +1 -1
- package/3.api/5.kit/9.plugins.md +5 -4
- package/3.api/6.advanced/1.hooks.md +1 -1
- package/3.api/6.advanced/2.import-meta.md +3 -3
- package/3.api/6.nuxt-config.md +299 -864
- package/3.api/index.md +7 -7
- package/5.community/4.contribution.md +5 -5
- package/5.community/5.framework-contribution.md +1 -1
- package/6.bridge/1.overview.md +1 -1
- package/6.bridge/10.configuration.md +2 -1
- package/6.bridge/2.typescript.md +2 -2
- package/6.bridge/3.bridge-composition-api.md +4 -4
- package/6.bridge/4.plugins-and-middleware.md +5 -5
- package/6.bridge/5.nuxt3-compatible-api.md +12 -9
- package/6.bridge/6.meta.md +15 -14
- package/6.bridge/8.nitro.md +2 -2
- package/6.bridge/9.vite.md +3 -3
- package/7.migration/10.bundling.md +1 -1
- package/7.migration/11.server.md +3 -3
- package/7.migration/2.configuration.md +18 -16
- package/7.migration/20.module-authors.md +1 -1
- package/7.migration/4.meta.md +18 -15
- package/7.migration/5.plugins-and-middleware.md +8 -8
- package/7.migration/6.pages-and-layouts.md +20 -16
- package/7.migration/7.component-options.md +7 -7
- package/7.migration/8.runtime-config.md +4 -4
- package/package.json +1 -1
|
@@ -7,29 +7,51 @@ Some features of Nuxt are available on an opt-in basis, or can be disabled based
|
|
|
7
7
|
|
|
8
8
|
## `features`
|
|
9
9
|
|
|
10
|
+
### devLogs
|
|
11
|
+
|
|
12
|
+
Stream server logs to the client as you are developing. These logs can be handled in the `dev:ssr-logs` hook.
|
|
13
|
+
|
|
14
|
+
By default, this is enabled in development (when test mode is not active).
|
|
15
|
+
|
|
16
|
+
If set to `silent`, the logs will not be printed to the browser console.
|
|
17
|
+
|
|
18
|
+
```ts [nuxt.config.ts]
|
|
19
|
+
export default defineNuxtConfig({
|
|
20
|
+
features: {
|
|
21
|
+
devLogs: true,
|
|
22
|
+
},
|
|
23
|
+
})
|
|
24
|
+
```
|
|
25
|
+
|
|
10
26
|
### inlineStyles
|
|
11
27
|
|
|
12
28
|
Inlines styles when rendering HTML. This is currently available only when using Vite.
|
|
13
29
|
|
|
14
30
|
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.
|
|
15
31
|
|
|
32
|
+
It defaults to `(id) => id.includes('.vue')`.
|
|
33
|
+
|
|
16
34
|
```ts [nuxt.config.ts]
|
|
17
35
|
export default defineNuxtConfig({
|
|
18
36
|
features: {
|
|
19
|
-
inlineStyles: false // or a function to determine inlining
|
|
20
|
-
}
|
|
37
|
+
inlineStyles: false, // or a function to determine inlining
|
|
38
|
+
},
|
|
21
39
|
})
|
|
22
40
|
```
|
|
23
41
|
|
|
24
42
|
### noScripts
|
|
25
43
|
|
|
26
|
-
|
|
44
|
+
Turn off rendering of Nuxt scripts and JavaScript resource hints. Can also be configured granularly within `routeRules`.
|
|
45
|
+
|
|
46
|
+
You can also disable scripts more granularly within `routeRules`.
|
|
47
|
+
|
|
48
|
+
If set to 'production' or `true`, JavaScript will be disabled in production mode only. If set to 'all', JavaScript will be disabled in both development and production modes.
|
|
27
49
|
|
|
28
50
|
```ts [nuxt.config.ts]
|
|
29
51
|
export default defineNuxtConfig({
|
|
30
52
|
features: {
|
|
31
|
-
noScripts: true
|
|
32
|
-
}
|
|
53
|
+
noScripts: true, // or 'production' | 'all' | false
|
|
54
|
+
},
|
|
33
55
|
})
|
|
34
56
|
```
|
|
35
57
|
|
|
@@ -43,19 +65,32 @@ This is used for enabling early access to Nuxt features or flags.
|
|
|
43
65
|
|
|
44
66
|
It is not configurable yet in Nuxt 4, but once we begin merging breaking changes for v5, it will be possible to enable it.
|
|
45
67
|
|
|
68
|
+
### multiApp
|
|
69
|
+
|
|
70
|
+
This enables early access to the experimental multi-app support. You can follow the [tracker issue #21635](https://github.com/nuxt/nuxt/issues/21635) to see the progress of multi-app support in Nuxt.
|
|
71
|
+
|
|
72
|
+
```ts [nuxt.config.ts]
|
|
73
|
+
export default defineNuxtConfig({
|
|
74
|
+
future: {
|
|
75
|
+
multiApp: true,
|
|
76
|
+
},
|
|
77
|
+
})
|
|
78
|
+
```
|
|
79
|
+
|
|
46
80
|
### typescriptBundlerResolution
|
|
47
81
|
|
|
48
|
-
This enables 'Bundler' module resolution mode for TypeScript, which is the recommended setting
|
|
49
|
-
for frameworks like Nuxt and [Vite](https://vite.dev/guide/performance.html#reduce-resolve-operations).
|
|
82
|
+
This enables 'Bundler' module resolution mode for TypeScript, which is the recommended setting for frameworks like Nuxt and [Vite](https://vite.dev/guide/performance.html#reduce-resolve-operations).
|
|
50
83
|
|
|
51
84
|
It improves type support when using modern libraries with `exports`.
|
|
52
85
|
|
|
53
86
|
See [the original TypeScript pull request](https://github.com/microsoft/TypeScript/pull/51669).
|
|
54
87
|
|
|
88
|
+
You can set it to false to use the legacy 'Node' mode, which is the default for TypeScript.
|
|
89
|
+
|
|
55
90
|
```ts [nuxt.config.ts]
|
|
56
91
|
export default defineNuxtConfig({
|
|
57
92
|
future: {
|
|
58
|
-
typescriptBundlerResolution:
|
|
59
|
-
}
|
|
93
|
+
typescriptBundlerResolution: false,
|
|
94
|
+
},
|
|
60
95
|
})
|
|
61
96
|
```
|
|
@@ -36,31 +36,31 @@ Check [Nuxt App](/docs/4.x/api/composables/use-nuxt-app) for more information ab
|
|
|
36
36
|
|
|
37
37
|
`nuxtApp` has the following properties:
|
|
38
38
|
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
vueApp
|
|
39
|
+
```ts
|
|
40
|
+
interface NuxtApp {
|
|
41
|
+
vueApp // the global Vue application: https://vuejs.org/api/application.html#application-api
|
|
42
42
|
|
|
43
|
-
versions
|
|
43
|
+
versions // an object containing Nuxt and Vue versions
|
|
44
44
|
|
|
45
45
|
// These let you call and add runtime NuxtApp hooks
|
|
46
46
|
// https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/nuxt.ts#L18
|
|
47
|
-
hooks
|
|
48
|
-
hook
|
|
49
|
-
callHook
|
|
47
|
+
hooks
|
|
48
|
+
hook
|
|
49
|
+
callHook
|
|
50
50
|
|
|
51
51
|
// Only accessible on server-side
|
|
52
52
|
ssrContext: {
|
|
53
|
-
url
|
|
54
|
-
req
|
|
55
|
-
res
|
|
56
|
-
runtimeConfig
|
|
57
|
-
noSSR
|
|
58
|
-
}
|
|
53
|
+
url
|
|
54
|
+
req
|
|
55
|
+
res
|
|
56
|
+
runtimeConfig
|
|
57
|
+
noSSR
|
|
58
|
+
}
|
|
59
59
|
|
|
60
60
|
// This will be stringified and passed from server to client
|
|
61
61
|
payload: {
|
|
62
|
-
serverRendered: true
|
|
63
|
-
data: {}
|
|
62
|
+
serverRendered: true
|
|
63
|
+
data: {}
|
|
64
64
|
state: {}
|
|
65
65
|
}
|
|
66
66
|
|
|
@@ -14,9 +14,9 @@ export default defineNuxtConfig({
|
|
|
14
14
|
apiSecret: '123',
|
|
15
15
|
// Keys within public, will be also exposed to the client-side
|
|
16
16
|
public: {
|
|
17
|
-
apiBase: '/api'
|
|
18
|
-
}
|
|
19
|
-
}
|
|
17
|
+
apiBase: '/api',
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
20
|
})
|
|
21
21
|
```
|
|
22
22
|
|
|
@@ -45,7 +45,7 @@ The most common way to provide configuration is by using [Environment Variables]
|
|
|
45
45
|
|
|
46
46
|
::note
|
|
47
47
|
The Nuxt CLI has built-in support for reading your `.env` file in development, build and generate. But when you run your built server, **your `.env` file will not be read**.
|
|
48
|
-
:read-more{to="/docs/guide/directory-structure/env"}
|
|
48
|
+
:read-more{to="/docs/4.x/guide/directory-structure/env"}
|
|
49
49
|
::
|
|
50
50
|
|
|
51
51
|
Runtime config values are **automatically replaced by matching environment variables at runtime**.
|
|
@@ -78,7 +78,7 @@ export default defineNuxtConfig({
|
|
|
78
78
|
apiSecret: '', // can be overridden by NUXT_API_SECRET environment variable
|
|
79
79
|
public: {
|
|
80
80
|
apiBase: '', // can be overridden by NUXT_PUBLIC_API_BASE environment variable
|
|
81
|
-
}
|
|
81
|
+
},
|
|
82
82
|
},
|
|
83
83
|
})
|
|
84
84
|
```
|
|
@@ -127,7 +127,7 @@ export default defineNuxtPlugin((nuxtApp) => {
|
|
|
127
127
|
const config = useRuntimeConfig()
|
|
128
128
|
|
|
129
129
|
console.log('API base URL:', config.public.apiBase)
|
|
130
|
-
})
|
|
130
|
+
})
|
|
131
131
|
```
|
|
132
132
|
|
|
133
133
|
### Server Routes
|
|
@@ -139,8 +139,8 @@ export default defineEventHandler(async (event) => {
|
|
|
139
139
|
const { apiSecret } = useRuntimeConfig(event)
|
|
140
140
|
const result = await $fetch('https://my.api.com/test', {
|
|
141
141
|
headers: {
|
|
142
|
-
Authorization: `Bearer ${apiSecret}
|
|
143
|
-
}
|
|
142
|
+
Authorization: `Bearer ${apiSecret}`,
|
|
143
|
+
},
|
|
144
144
|
})
|
|
145
145
|
return result
|
|
146
146
|
})
|
|
@@ -13,11 +13,11 @@ These hooks are available for [Nuxt Modules](/docs/4.x/guide/going-further/modul
|
|
|
13
13
|
|
|
14
14
|
### Within `nuxt.config.ts`
|
|
15
15
|
|
|
16
|
-
```
|
|
16
|
+
```ts [nuxt.config.ts]
|
|
17
17
|
export default defineNuxtConfig({
|
|
18
18
|
hooks: {
|
|
19
|
-
close: () => { }
|
|
20
|
-
}
|
|
19
|
+
close: () => { },
|
|
20
|
+
},
|
|
21
21
|
})
|
|
22
22
|
```
|
|
23
23
|
|
|
@@ -29,11 +29,11 @@ import { defineNuxtModule } from '@nuxt/kit'
|
|
|
29
29
|
export default defineNuxtModule({
|
|
30
30
|
setup (options, nuxt) {
|
|
31
31
|
nuxt.hook('close', async () => { })
|
|
32
|
-
}
|
|
32
|
+
},
|
|
33
33
|
})
|
|
34
34
|
```
|
|
35
35
|
|
|
36
|
-
::read-more{to="/docs/api/advanced/hooks#nuxt-hooks-build-time"}
|
|
36
|
+
::read-more{to="/docs/4.x/api/advanced/hooks#nuxt-hooks-build-time"}
|
|
37
37
|
Explore all available Nuxt hooks.
|
|
38
38
|
::
|
|
39
39
|
|
|
@@ -41,7 +41,7 @@ Explore all available Nuxt hooks.
|
|
|
41
41
|
|
|
42
42
|
App hooks can be mainly used by [Nuxt Plugins](/docs/4.x/guide/directory-structure/plugins) to hook into rendering lifecycle but could also be used in Vue composables.
|
|
43
43
|
|
|
44
|
-
```
|
|
44
|
+
```ts [app/plugins/test.ts]
|
|
45
45
|
export default defineNuxtPlugin((nuxtApp) => {
|
|
46
46
|
nuxtApp.hook('page:start', () => {
|
|
47
47
|
/* your code goes here */
|
|
@@ -49,7 +49,7 @@ export default defineNuxtPlugin((nuxtApp) => {
|
|
|
49
49
|
})
|
|
50
50
|
```
|
|
51
51
|
|
|
52
|
-
::read-more{to="/docs/api/advanced/hooks#app-hooks-runtime"}
|
|
52
|
+
::read-more{to="/docs/4.x/api/advanced/hooks#app-hooks-runtime"}
|
|
53
53
|
Explore all available App hooks.
|
|
54
54
|
::
|
|
55
55
|
|
|
@@ -57,7 +57,7 @@ Explore all available App hooks.
|
|
|
57
57
|
|
|
58
58
|
These hooks are available for [server plugins](/docs/4.x/guide/directory-structure/server#server-plugins) to hook into Nitro's runtime behavior.
|
|
59
59
|
|
|
60
|
-
```
|
|
60
|
+
```ts [~/server/plugins/test.ts]
|
|
61
61
|
export default defineNitroPlugin((nitroApp) => {
|
|
62
62
|
nitroApp.hooks.hook('render:html', (html, { event }) => {
|
|
63
63
|
console.log('render:html', html)
|
|
@@ -70,7 +70,7 @@ export default defineNitroPlugin((nitroApp) => {
|
|
|
70
70
|
})
|
|
71
71
|
```
|
|
72
72
|
|
|
73
|
-
::read-more{to="/docs/api/advanced/hooks#nitro-app-hooks-runtime-server-side"}
|
|
73
|
+
::read-more{to="/docs/4.x/api/advanced/hooks#nitro-app-hooks-runtime-server-side"}
|
|
74
74
|
Learn more about available Nitro lifecycle hooks.
|
|
75
75
|
::
|
|
76
76
|
|
|
@@ -79,7 +79,7 @@ Learn more about available Nitro lifecycle hooks.
|
|
|
79
79
|
You can define your own custom hooks support by extending Nuxt's hook interfaces.
|
|
80
80
|
|
|
81
81
|
```ts
|
|
82
|
-
import { HookResult } from
|
|
82
|
+
import type { HookResult } from '@nuxt/schema'
|
|
83
83
|
|
|
84
84
|
declare module '#app' {
|
|
85
85
|
interface RuntimeNuxtHooks {
|
|
@@ -92,7 +92,7 @@ declare module '#app' {
|
|
|
92
92
|
|
|
93
93
|
declare module 'nitropack/types' {
|
|
94
94
|
interface NitroRuntimeHooks {
|
|
95
|
-
'your-nitro-hook': () => void
|
|
95
|
+
'your-nitro-hook': () => void
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
98
|
```
|