@nuxt/docs-nightly 4.5.1-29752449.30d24817 → 4.5.2-2610052030-052d82e
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 +8 -8
- package/1.getting-started/02.installation.md +2 -4
- package/1.getting-started/03.configuration.md +16 -16
- package/1.getting-started/04.views.md +8 -8
- package/1.getting-started/05.assets.md +10 -10
- package/1.getting-started/06.styling.md +10 -10
- package/1.getting-started/07.routing.md +15 -15
- package/1.getting-started/08.seo-meta.md +15 -15
- package/1.getting-started/09.transitions.md +10 -10
- package/1.getting-started/10.data-fetching.md +61 -47
- package/1.getting-started/11.state-management.md +11 -11
- package/1.getting-started/12.error-handling.md +20 -18
- package/1.getting-started/13.server.md +7 -7
- package/1.getting-started/14.layers.md +6 -6
- package/1.getting-started/15.prerendering.md +22 -28
- package/1.getting-started/16.deployment.md +22 -6
- package/1.getting-started/17.testing.md +200 -21
- package/1.getting-started/18.upgrade.md +78 -278
- package/2.directory-structure/0.nuxt.md +2 -2
- package/2.directory-structure/0.output.md +3 -3
- package/2.directory-structure/1.app/1.assets.md +3 -3
- package/2.directory-structure/1.app/1.components.md +26 -109
- package/2.directory-structure/1.app/1.composables.md +5 -5
- package/2.directory-structure/1.app/1.layouts.md +10 -10
- package/2.directory-structure/1.app/1.middleware.md +14 -10
- package/2.directory-structure/1.app/1.pages.md +25 -20
- package/2.directory-structure/1.app/1.plugins.md +7 -7
- package/2.directory-structure/1.app/1.utils.md +9 -5
- package/2.directory-structure/1.app/3.app-config.md +7 -7
- package/2.directory-structure/1.app/3.app.md +6 -6
- package/2.directory-structure/1.app/3.error.md +1 -1
- package/2.directory-structure/1.content.md +1 -1
- package/2.directory-structure/1.layers.md +13 -13
- package/2.directory-structure/1.modules.md +3 -3
- package/2.directory-structure/1.node_modules.md +1 -1
- package/2.directory-structure/1.server.md +33 -14
- package/2.directory-structure/1.shared.md +7 -5
- package/2.directory-structure/1.test.md +25 -0
- package/2.directory-structure/2.env.md +7 -7
- package/2.directory-structure/2.nuxtignore.md +3 -3
- package/2.directory-structure/2.nuxtrc.md +3 -3
- package/2.directory-structure/3.nuxt-config.md +2 -2
- package/2.directory-structure/3.tsconfig.md +21 -11
- package/2.directory-structure/index.md +29 -25
- package/3.guide/0.index.md +6 -6
- package/3.guide/1.concepts/1.rendering.md +76 -12
- package/3.guide/1.concepts/10.vuejs-development.md +73 -8
- package/3.guide/1.concepts/2.nuxt-lifecycle.md +18 -18
- package/3.guide/1.concepts/3.auto-imports.md +11 -11
- package/3.guide/1.concepts/4.server-engine.md +6 -6
- package/3.guide/1.concepts/5.modules.md +4 -4
- package/3.guide/1.concepts/6.server-components.md +198 -0
- package/3.guide/1.concepts/7.esm.md +5 -5
- package/3.guide/1.concepts/8.typescript.md +9 -9
- package/3.guide/2.best-practices/accessibility.md +155 -0
- package/3.guide/2.best-practices/hydration.md +5 -5
- package/3.guide/2.best-practices/performance.md +13 -9
- package/3.guide/3.ai/1.mcp.md +104 -19
- package/3.guide/4.modules/2.module-anatomy.md +5 -5
- package/3.guide/4.modules/3.recipes-basics.md +8 -8
- package/3.guide/4.modules/4.module-dependencies.md +1 -1
- package/3.guide/4.modules/5.recipes-advanced.md +6 -8
- package/3.guide/4.modules/6.testing.md +2 -2
- package/3.guide/4.modules/7.best-practices.md +2 -2
- package/3.guide/4.modules/9.server-compatibility.md +215 -0
- package/3.guide/4.modules/index.md +9 -9
- package/3.guide/5.recipes/1.custom-routing.md +15 -11
- package/3.guide/5.recipes/2.vite-plugin.md +3 -3
- package/3.guide/5.recipes/3.custom-usefetch.md +5 -5
- package/3.guide/5.recipes/4.sessions-and-authentication.md +2 -2
- package/3.guide/5.recipes/5.mostly-static-sites.md +127 -0
- package/3.guide/6.going-further/1.events.md +1 -1
- package/3.guide/6.going-further/1.experimental-features.md +254 -22
- package/3.guide/6.going-further/1.features.md +42 -6
- package/3.guide/6.going-further/1.internals.md +10 -10
- package/3.guide/6.going-further/10.runtime-config.md +28 -6
- package/3.guide/6.going-further/11.nightly-release-channel.md +1 -1
- package/3.guide/6.going-further/2.hooks.md +6 -6
- package/3.guide/6.going-further/4.kit.md +4 -4
- package/3.guide/6.going-further/5.server-imports.md +221 -0
- package/3.guide/6.going-further/6.nuxt-app.md +7 -7
- package/3.guide/6.going-further/7.layers.md +13 -13
- package/3.guide/6.going-further/8.builders.md +38 -14
- package/4.api/1.components/1.nuxt-client-fallback.md +1 -1
- package/4.api/1.components/10.nuxt-picture.md +1 -1
- package/4.api/1.components/11.teleports.md +1 -1
- package/4.api/1.components/12.nuxt-route-announcer.md +5 -3
- package/4.api/1.components/14.nuxt-announcer.md +3 -3
- package/4.api/1.components/2.nuxt-page.md +5 -5
- package/4.api/1.components/3.nuxt-layout.md +8 -8
- package/4.api/1.components/4.nuxt-link.md +6 -4
- package/4.api/1.components/5.nuxt-loading-indicator.md +3 -3
- package/4.api/1.components/6.nuxt-error-boundary.md +1 -1
- package/4.api/1.components/8.nuxt-island.md +5 -5
- package/4.api/2.composables/create-use-async-data.md +51 -8
- package/4.api/2.composables/create-use-fetch.md +126 -9
- package/4.api/2.composables/use-announcer.md +3 -3
- package/4.api/2.composables/use-app-config.md +1 -1
- package/4.api/2.composables/use-async-data.md +19 -11
- package/4.api/2.composables/use-cookie.md +22 -6
- package/4.api/2.composables/use-error.md +1 -1
- package/4.api/2.composables/use-fetch.md +14 -10
- package/4.api/2.composables/use-head-safe.md +2 -2
- package/4.api/2.composables/use-head.md +2 -2
- package/4.api/2.composables/use-hydration.md +1 -1
- package/4.api/2.composables/use-layout.md +1 -1
- package/4.api/2.composables/use-lazy-async-data.md +8 -8
- package/4.api/2.composables/use-lazy-fetch.md +11 -11
- package/4.api/2.composables/use-loading-indicator.md +2 -2
- package/4.api/2.composables/use-nuxt-app.md +13 -13
- package/4.api/2.composables/use-nuxt-data.md +1 -1
- package/4.api/2.composables/use-preview-mode.md +3 -3
- package/4.api/2.composables/use-request-event.md +29 -3
- package/4.api/2.composables/use-request-fetch.md +2 -2
- package/4.api/2.composables/use-request-header.md +1 -1
- package/4.api/2.composables/use-request-headers.md +1 -1
- package/4.api/2.composables/use-request-url.md +1 -1
- package/4.api/2.composables/use-response-header.md +2 -2
- package/4.api/2.composables/use-route-announcer.md +4 -2
- package/4.api/2.composables/use-route.md +2 -2
- package/4.api/2.composables/use-router.md +5 -5
- package/4.api/2.composables/use-runtime-config.md +5 -5
- package/4.api/2.composables/use-runtime-hook.md +1 -1
- package/4.api/2.composables/use-seo-meta.md +3 -3
- package/4.api/2.composables/use-server-seo-meta.md +5 -5
- package/4.api/2.composables/use-state.md +4 -4
- package/4.api/3.utils/$fetch.md +5 -5
- package/4.api/3.utils/abort-navigation.md +1 -1
- package/4.api/3.utils/add-route-middleware.md +2 -2
- package/4.api/3.utils/call-once.md +3 -3
- package/4.api/3.utils/clear-error.md +2 -2
- package/4.api/3.utils/clear-nuxt-data.md +1 -1
- package/4.api/3.utils/clear-nuxt-state.md +2 -2
- package/4.api/3.utils/create-error.md +19 -1
- package/4.api/3.utils/define-nuxt-plugin.md +2 -2
- package/4.api/3.utils/define-nuxt-route-middleware.md +3 -3
- package/4.api/3.utils/define-page-meta.md +12 -12
- package/4.api/3.utils/define-route-rules.md +4 -4
- package/4.api/3.utils/define-use-async-data-addon.md +57 -0
- package/4.api/3.utils/define-use-fetch-addon.md +168 -0
- package/4.api/3.utils/navigate-to.md +6 -2
- package/4.api/3.utils/prefetch-components.md +1 -1
- package/4.api/3.utils/preload-route-components.md +2 -2
- package/4.api/3.utils/prerender-routes.md +3 -3
- package/4.api/3.utils/refresh-cookie.md +1 -1
- package/4.api/3.utils/refresh-nuxt-data.md +3 -3
- package/4.api/3.utils/reload-nuxt-app.md +1 -1
- package/4.api/3.utils/set-page-layout.md +1 -1
- package/4.api/3.utils/set-response-status.md +2 -2
- package/4.api/3.utils/show-error.md +3 -3
- package/4.api/3.utils/update-app-config.md +2 -2
- package/4.api/4.commands/README.md +9 -0
- package/4.api/5.kit/1.modules.md +3 -3
- package/4.api/5.kit/10.runtime-config.md +1 -1
- package/4.api/5.kit/10.templates.md +42 -0
- package/4.api/5.kit/12.nitro.md +59 -18
- package/4.api/5.kit/14.logging.md +56 -2
- package/4.api/5.kit/15.builder.md +1 -1
- package/4.api/5.kit/18.dependencies.md +90 -0
- package/4.api/5.kit/2.programmatic.md +78 -1
- package/4.api/5.kit/3.compatibility.md +2 -2
- package/4.api/5.kit/4.autoimports.md +13 -13
- package/4.api/5.kit/5.components.md +3 -3
- package/4.api/5.kit/6.context.md +2 -2
- package/4.api/5.kit/7.pages.md +35 -4
- package/4.api/5.kit/8.layout.md +1 -1
- package/4.api/6.advanced/1.hooks.md +6 -3
- package/4.api/6.nuxt-config.md +44 -21
- package/4.api/index.md +7 -7
- package/5.community/2.getting-help.md +1 -1
- package/5.community/3.reporting-bugs.md +1 -1
- package/5.community/4.contribution.md +14 -12
- package/5.community/5.framework-contribution.md +4 -4
- package/5.community/6.roadmap.md +6 -6
- package/6.bridge/1.overview.md +12 -12
- package/6.bridge/2.typescript.md +1 -1
- package/6.bridge/3.bridge-composition-api.md +6 -6
- package/6.bridge/4.plugins-and-middleware.md +4 -4
- package/6.bridge/5.nuxt3-compatible-api.md +9 -9
- package/6.bridge/6.meta.md +5 -5
- package/6.bridge/7.runtime-config.md +1 -1
- package/6.bridge/8.nitro.md +1 -1
- package/6.bridge/9.vite.md +1 -1
- package/7.migration/1.overview.md +2 -2
- package/7.migration/10.bundling.md +1 -1
- package/7.migration/11.server.md +3 -3
- package/7.migration/2.configuration.md +6 -6
- package/7.migration/20.module-authors.md +7 -7
- package/7.migration/3.auto-imports.md +3 -3
- package/7.migration/4.meta.md +4 -4
- package/7.migration/5.plugins-and-middleware.md +3 -3
- package/7.migration/6.pages-and-layouts.md +13 -13
- package/7.migration/7.component-options.md +15 -15
- package/7.migration/8.runtime-config.md +4 -4
- package/README.md +1 -1
- package/errors/e8007.md +28 -0
- package/package.json +2 -2
- package/4.api/4.commands/.navigation.yml +0 -3
- package/4.api/4.commands/add.md +0 -112
- package/4.api/4.commands/analyze.md +0 -42
- package/4.api/4.commands/build-module.md +0 -42
- package/4.api/4.commands/build.md +0 -48
- package/4.api/4.commands/cleanup.md +0 -38
- package/4.api/4.commands/dev.md +0 -61
- package/4.api/4.commands/devtools.md +0 -38
- package/4.api/4.commands/generate.md +0 -43
- package/4.api/4.commands/info.md +0 -33
- package/4.api/4.commands/init.md +0 -50
- package/4.api/4.commands/module.md +0 -84
- package/4.api/4.commands/prepare.md +0 -41
- package/4.api/4.commands/preview.md +0 -44
- package/4.api/4.commands/test.md +0 -40
- package/4.api/4.commands/typecheck.md +0 -44
- package/4.api/4.commands/upgrade.md +0 -37
|
@@ -8,7 +8,7 @@ Nuxt is a full-stack framework, which means there are several sources of unpreve
|
|
|
8
8
|
|
|
9
9
|
- Errors during the Vue rendering lifecycle (SSR & CSR)
|
|
10
10
|
- Server and client startup errors (SSR + CSR)
|
|
11
|
-
- Errors during Nitro server lifecycle ([`server/`](/docs/
|
|
11
|
+
- Errors during Nitro server lifecycle ([`server/`](/docs/directory-structure/server) directory)
|
|
12
12
|
- Errors downloading JS chunks
|
|
13
13
|
|
|
14
14
|
::tip
|
|
@@ -19,7 +19,7 @@ Nuxt is a full-stack framework, which means there are several sources of unpreve
|
|
|
19
19
|
|
|
20
20
|
You can hook into Vue errors using [`onErrorCaptured`](https://vuejs.org/api/composition-api-lifecycle#onerrorcaptured).
|
|
21
21
|
|
|
22
|
-
In addition, Nuxt provides a [`vue:error`](/docs/
|
|
22
|
+
In addition, Nuxt provides a [`vue:error`](/docs/api/advanced/hooks#app-hooks-runtime) hook that will be called if any errors propagate up to the top level.
|
|
23
23
|
|
|
24
24
|
If you are using an error reporting framework, you can provide a global handler through [`vueApp.config.errorHandler`](https://vuejs.org/api/application#app-config-errorhandler). It will receive all Vue errors, even if they are handled.
|
|
25
25
|
|
|
@@ -45,7 +45,7 @@ Note that the `vue:error` hook is based on [`onErrorCaptured`](https://vuejs.org
|
|
|
45
45
|
Nuxt will call the `app:error` hook if there are any errors in starting your Nuxt application.
|
|
46
46
|
|
|
47
47
|
This includes:
|
|
48
|
-
- running [Nuxt plugins](/docs/
|
|
48
|
+
- running [Nuxt plugins](/docs/directory-structure/app/plugins)
|
|
49
49
|
- processing `app:created` and `app:beforeMount` hooks
|
|
50
50
|
- rendering your Vue app to HTML (during SSR)
|
|
51
51
|
- mounting the app (on client-side), though you should handle this case with `onErrorCaptured` or with `vue:error`
|
|
@@ -53,18 +53,18 @@ This includes:
|
|
|
53
53
|
|
|
54
54
|
## Nitro Server Errors
|
|
55
55
|
|
|
56
|
-
You cannot currently define a server-side handler for these errors, but can render an error page, see the [Render an Error Page](/docs/
|
|
56
|
+
You cannot currently define a server-side handler for these errors, but can render an error page, see the [Render an Error Page](/docs/getting-started/error-handling#error-page) section.
|
|
57
57
|
|
|
58
58
|
## Errors with JS Chunks
|
|
59
59
|
|
|
60
60
|
You might encounter chunk loading errors due to a network connectivity failure or a new deployment (which invalidates your old, hashed JS chunk URLs). Nuxt provides built-in support for handling chunk loading errors by performing a hard reload when a chunk fails to load during route navigation.
|
|
61
61
|
|
|
62
|
-
You can change this behavior by setting `experimental.emitRouteChunkError` to `false` (to disable hooking into these errors at all) or to `manual` if you want to handle them yourself. If you want to handle chunk loading errors manually, you can check out the [
|
|
62
|
+
You can change this behavior by setting `experimental.emitRouteChunkError` to `false` (to disable hooking into these errors at all) or to `manual` if you want to handle them yourself. If you want to handle chunk loading errors manually, you can check out the [automatic implementation](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/plugins/chunk-reload.client.ts) for ideas.
|
|
63
63
|
|
|
64
64
|
## Error Page
|
|
65
65
|
|
|
66
66
|
::note
|
|
67
|
-
When Nuxt encounters a fatal error (any unhandled error on the server, or an error created with `fatal: true` on the client) it will either render a JSON response (if requested with `Accept: application/json` header) or trigger a full-screen error page.
|
|
67
|
+
When Nuxt encounters a fatal error (any unhandled error on the server, or an error created with `fatal: true` on the client) it will either render a JSON response (if requested with `Accept: application/json` header) or trigger a full-screen error page. With `future.compatibilityVersion: 5`, a page error always triggers the error page, and an error thrown in a server route or server middleware returns a JSON response.
|
|
68
68
|
::
|
|
69
69
|
|
|
70
70
|
An error may occur during the server lifecycle when:
|
|
@@ -78,7 +78,7 @@ It can also occur on the client side when:
|
|
|
78
78
|
- mounting your app if the error was not handled with `onErrorCaptured` or `vue:error` hook
|
|
79
79
|
- the Vue app is initialized and mounted in browser (`app:mounted`).
|
|
80
80
|
|
|
81
|
-
::read-more{to="/docs/
|
|
81
|
+
::read-more{to="/docs/api/advanced/hooks"}
|
|
82
82
|
Discover all the Nuxt lifecycle hooks.
|
|
83
83
|
::
|
|
84
84
|
|
|
@@ -107,7 +107,7 @@ const handleError = () => clearError({ redirect: '/' })
|
|
|
107
107
|
</template>
|
|
108
108
|
```
|
|
109
109
|
|
|
110
|
-
::read-more{to="/docs/
|
|
110
|
+
::read-more{to="/docs/directory-structure/app/error"}
|
|
111
111
|
Read more about `error.vue` and its uses.
|
|
112
112
|
::
|
|
113
113
|
|
|
@@ -121,14 +121,14 @@ export default defineNuxtPlugin((nuxtApp) => {
|
|
|
121
121
|
})
|
|
122
122
|
```
|
|
123
123
|
|
|
124
|
-
When you are ready to remove the error page, you can call the [`clearError`](/docs/
|
|
124
|
+
When you are ready to remove the error page, you can call the [`clearError`](/docs/api/utils/clear-error) helper function, which takes an optional path to redirect to (for example, if you want to navigate to a 'safe' page).
|
|
125
125
|
|
|
126
126
|
::important
|
|
127
127
|
Make sure to check before using anything dependent on Nuxt plugins, such as `$route` or `useRouter`, as if a plugin threw an error, then it won't be re-run until you clear the error.
|
|
128
128
|
::
|
|
129
129
|
|
|
130
130
|
::note
|
|
131
|
-
Rendering an error page is an entirely separate page load, meaning any registered middleware will run again. You can use [`useError`](/docs/
|
|
131
|
+
Rendering an error page is an entirely separate page load, meaning any registered middleware will run again. You can use [`useError`](/docs/getting-started/error-handling#useerror) in middleware to check if an error is being handled.
|
|
132
132
|
::
|
|
133
133
|
|
|
134
134
|
::note
|
|
@@ -145,7 +145,7 @@ function useError (): Ref<Error | { url, status, statusText, message, descriptio
|
|
|
145
145
|
|
|
146
146
|
This function will return the global Nuxt error that is being handled.
|
|
147
147
|
|
|
148
|
-
::read-more{to="/docs/
|
|
148
|
+
::read-more{to="/docs/api/composables/use-error"}
|
|
149
149
|
Read more about `useError` composable.
|
|
150
150
|
::
|
|
151
151
|
|
|
@@ -158,9 +158,11 @@ function createError (err: string | { cause, data, message, name, stack, status,
|
|
|
158
158
|
Create an error object with additional metadata. You can pass a string to be set as the error `message` or an object containing error properties. It is usable in both the Vue and Server portions of your app, and is meant to be thrown.
|
|
159
159
|
|
|
160
160
|
If you throw an error created with `createError`:
|
|
161
|
-
- on server-side, it will trigger a full-screen error page which you can clear with [`clearError`](/docs/
|
|
161
|
+
- on server-side, it will trigger a full-screen error page which you can clear with [`clearError`](/docs/getting-started/error-handling#clearerror).
|
|
162
162
|
- on client-side, it will throw a non-fatal error for you to handle. If you need to trigger a full-screen error page, then you can do this by setting `fatal: true`.
|
|
163
163
|
|
|
164
|
+
In development, an error `cause` is preserved and exposed to your error page so you can trace the original error; in production, causes are never included in error responses or the error page payload.
|
|
165
|
+
|
|
164
166
|
```vue twoslash [pages/movies/[slug\\].vue]
|
|
165
167
|
<script setup lang="ts">
|
|
166
168
|
const route = useRoute()
|
|
@@ -181,7 +183,7 @@ The `statusText` property is intended for short, HTTP-compliant status texts (e.
|
|
|
181
183
|
For any detailed descriptions, multi-line messages, or content with non-ASCII characters, you should always use the `message` property instead.
|
|
182
184
|
::
|
|
183
185
|
|
|
184
|
-
::read-more{to="/docs/
|
|
186
|
+
::read-more{to="/docs/api/utils/create-error"}
|
|
185
187
|
Read more about `createError` util.
|
|
186
188
|
::
|
|
187
189
|
|
|
@@ -191,11 +193,11 @@ Read more about `createError` util.
|
|
|
191
193
|
function showError (err: string | Error | { status, statusText }): Error
|
|
192
194
|
```
|
|
193
195
|
|
|
194
|
-
You can call this function at any point on client-side, or (on server side) directly within middleware, plugins or `setup()` functions. It will trigger a full-screen error page which you can clear with [`clearError`](/docs/
|
|
196
|
+
You can call this function at any point on client-side, or (on server side) directly within middleware, plugins or `setup()` functions. It will trigger a full-screen error page which you can clear with [`clearError`](/docs/getting-started/error-handling#clearerror).
|
|
195
197
|
|
|
196
198
|
It is recommended instead to use `throw createError()`.
|
|
197
199
|
|
|
198
|
-
::read-more{to="/docs/
|
|
200
|
+
::read-more{to="/docs/api/utils/show-error"}
|
|
199
201
|
Read more about `showError` util.
|
|
200
202
|
::
|
|
201
203
|
|
|
@@ -207,13 +209,13 @@ function clearError (options?: { redirect?: string }): Promise<void>
|
|
|
207
209
|
|
|
208
210
|
This function will clear the currently handled Nuxt error. It also takes an optional path to redirect to (for example, if you want to navigate to a 'safe' page).
|
|
209
211
|
|
|
210
|
-
::read-more{to="/docs/
|
|
212
|
+
::read-more{to="/docs/api/utils/clear-error"}
|
|
211
213
|
Read more about `clearError` util.
|
|
212
214
|
::
|
|
213
215
|
|
|
214
216
|
## Render Error in Component
|
|
215
217
|
|
|
216
|
-
Nuxt also provides a [`<NuxtErrorBoundary>`](/docs/
|
|
218
|
+
Nuxt also provides a [`<NuxtErrorBoundary>`](/docs/api/components/nuxt-error-boundary) component that allows you to handle client-side errors within your app, without replacing your entire site with an error page.
|
|
217
219
|
|
|
218
220
|
This component is responsible for handling errors that occur within its default slot. On client-side, it will prevent the error from bubbling up to the top level, and will render the `#error` slot instead.
|
|
219
221
|
|
|
@@ -238,4 +240,4 @@ If you navigate to another route, the error will be cleared automatically.
|
|
|
238
240
|
</template>
|
|
239
241
|
```
|
|
240
242
|
|
|
241
|
-
:link-example{to="/docs/
|
|
243
|
+
:link-example{to="/docs/examples/advanced/error-handling"}
|
|
@@ -4,7 +4,7 @@ description: Build full-stack applications with Nuxt's server framework. You can
|
|
|
4
4
|
navigation.icon: i-lucide-pc-case
|
|
5
5
|
---
|
|
6
6
|
|
|
7
|
-
:read-more{to="/docs/
|
|
7
|
+
:read-more{to="/docs/directory-structure/server"}
|
|
8
8
|
|
|
9
9
|
## Powered by Nitro
|
|
10
10
|
|
|
@@ -38,7 +38,7 @@ And you can directly return `text`, `json`, `html` or even a `stream`.
|
|
|
38
38
|
|
|
39
39
|
Out-of-the-box, it supports **hot module replacement** and **auto-import** like the other parts of your Nuxt application.
|
|
40
40
|
|
|
41
|
-
:read-more{to="/docs/
|
|
41
|
+
:read-more{to="/docs/directory-structure/server"}
|
|
42
42
|
|
|
43
43
|
## Universal Deployment
|
|
44
44
|
|
|
@@ -59,11 +59,11 @@ Or for other runtimes:
|
|
|
59
59
|
:card{icon="i-logos-bun" title="Bun" to="https://bun.com" target="_blank"}
|
|
60
60
|
::
|
|
61
61
|
|
|
62
|
-
:read-more{to="/docs/
|
|
62
|
+
:read-more{to="/docs/getting-started/deployment"}
|
|
63
63
|
|
|
64
64
|
## Hybrid Rendering
|
|
65
65
|
|
|
66
|
-
|
|
66
|
+
Nuxt has a powerful feature called `routeRules` which allows you to define a set of rules to customize how each route of your Nuxt app is rendered (and more). Nuxt compiles the rules, and the default server builder (Nitro) applies the server-side ones.
|
|
67
67
|
|
|
68
68
|
```ts twoslash [nuxt.config.ts]
|
|
69
69
|
export default defineNuxtConfig({
|
|
@@ -81,8 +81,8 @@ export default defineNuxtConfig({
|
|
|
81
81
|
})
|
|
82
82
|
```
|
|
83
83
|
|
|
84
|
-
::read-more{to="/docs/
|
|
85
|
-
Learn about all
|
|
84
|
+
::read-more{to="/docs/guide/concepts/rendering#hybrid-rendering"}
|
|
85
|
+
Learn about all the route rules available to customize the rendering mode of your routes.
|
|
86
86
|
::
|
|
87
87
|
|
|
88
88
|
In addition, there are some route rules (for example, `ssr`, `appMiddleware`, and `noScripts`) that are Nuxt specific to change the behavior when rendering your pages to HTML.
|
|
@@ -91,4 +91,4 @@ Some route rules (`appMiddleware`, `redirect` and `prerender`) also affect clien
|
|
|
91
91
|
|
|
92
92
|
Nitro is used to build the app for server side rendering, as well as pre-rendering.
|
|
93
93
|
|
|
94
|
-
:read-more{to="/docs/
|
|
94
|
+
:read-more{to="/docs/guide/concepts/rendering"}
|
|
@@ -9,8 +9,8 @@ One of the core features of Nuxt is the layers and extending support. You can ex
|
|
|
9
9
|
## Use Cases
|
|
10
10
|
|
|
11
11
|
- Share reusable configuration presets across projects using `nuxt.config` and `app.config`
|
|
12
|
-
- Create a component library using [`app/components/`](/docs/
|
|
13
|
-
- Create utility and composable library using [`app/composables/`](/docs/
|
|
12
|
+
- Create a component library using [`app/components/`](/docs/directory-structure/app/components) directory
|
|
13
|
+
- Create utility and composable library using [`app/composables/`](/docs/directory-structure/app/composables) and [`app/utils/`](/docs/directory-structure/app/utils) directories
|
|
14
14
|
- Create Nuxt module presets
|
|
15
15
|
- Share standard setup across projects
|
|
16
16
|
- Create Nuxt themes
|
|
@@ -30,7 +30,7 @@ In addition, named layer aliases to the `srcDir` of each of these layers will au
|
|
|
30
30
|
Named layer aliases were introduced in Nuxt v3.16.0.
|
|
31
31
|
::
|
|
32
32
|
|
|
33
|
-
In addition, you can extend from a layer by adding the [extends](/docs/
|
|
33
|
+
In addition, you can extend from a layer by adding the [extends](/docs/api/nuxt-config#extends) property to your [`nuxt.config`](/docs/directory-structure/nuxt-config) file.
|
|
34
34
|
|
|
35
35
|
```ts [nuxt.config.ts]
|
|
36
36
|
export default defineNuxtConfig({
|
|
@@ -127,7 +127,7 @@ layers/
|
|
|
127
127
|
This pattern is useful for creating base layers with defaults that can be progressively overridden by more specific layers.
|
|
128
128
|
::
|
|
129
129
|
|
|
130
|
-
Alternatively, you can control the order of your `~~/layers` directories from `nuxt.config` by referencing them in [`extends`](/docs/
|
|
130
|
+
Alternatively, you can control the order of your `~~/layers` directories from `nuxt.config` by referencing them in [`extends`](/docs/api/nuxt-config#extends), without renaming your directories. The entries are ordered like any other `extends` layer, with the **first entry having the highest priority**:
|
|
131
131
|
|
|
132
132
|
```ts [nuxt.config.ts]
|
|
133
133
|
export default defineNuxtConfig({
|
|
@@ -165,11 +165,11 @@ If you also have `~~/layers/custom`, the priority order is:
|
|
|
165
165
|
- `@my-themes/awesome`
|
|
166
166
|
- `github:my-themes/awesome#v1` (lowest)
|
|
167
167
|
|
|
168
|
-
::read-more{to="/docs/
|
|
168
|
+
::read-more{to="/docs/directory-structure/layers"}
|
|
169
169
|
Learn about the **layers/ directory** to organize and share reusable code, components, composables, and configurations across your Nuxt application.
|
|
170
170
|
::
|
|
171
171
|
|
|
172
|
-
::read-more{to="/docs/
|
|
172
|
+
::read-more{to="/docs/guide/going-further/layers"}
|
|
173
173
|
Read more about layers in the **Layer Author Guide**.
|
|
174
174
|
::
|
|
175
175
|
|
|
@@ -6,11 +6,11 @@ navigation.icon: i-lucide-file-code-2
|
|
|
6
6
|
|
|
7
7
|
Nuxt allows for select pages from your application to be rendered at build time. Nuxt will serve the prebuilt pages when requested instead of generating them on the fly.
|
|
8
8
|
|
|
9
|
-
:read-more{title="Nuxt rendering modes" to="/docs/
|
|
9
|
+
:read-more{title="Nuxt rendering modes" to="/docs/guide/concepts/rendering"}
|
|
10
10
|
|
|
11
11
|
## Crawl-based Pre-rendering
|
|
12
12
|
|
|
13
|
-
Use the [`nuxt generate` command](/docs/
|
|
13
|
+
Use the [`nuxt generate` command](/docs/api/commands/generate) to build and pre-render your application using the [Nitro](/docs/guide/concepts/server-engine) crawler. This command is similar to `nuxt build` with the `nitro.static` option set to `true`, or running `nuxt build --prerender`.
|
|
14
14
|
|
|
15
15
|
This will build your site, stand up a nuxt instance, and, by default, prerender the root page `/` along with any of your site's pages it links to, any of your site's pages they link to, and so on.
|
|
16
16
|
|
|
@@ -40,33 +40,30 @@ deno x nuxt generate
|
|
|
40
40
|
|
|
41
41
|
You can now deploy the `.output/public` directory to any static hosting service or preview it locally with `npx serve .output/public`.
|
|
42
42
|
|
|
43
|
-
Static and prerender builds also emit `200.html` and `404.html` SPA fallbacks. See [What are 200.html and 404.html?](/docs/
|
|
43
|
+
Static and prerender builds also emit `200.html` and `404.html` SPA fallbacks. See [What are 200.html and 404.html?](/docs/guide/concepts/rendering#what-are-200html-and-404html).
|
|
44
44
|
|
|
45
|
-
|
|
45
|
+
How the Nitro crawler works:
|
|
46
46
|
|
|
47
|
-
1. Load the HTML of your application's root route (`/`), any non-dynamic pages in your `~/pages` directory, and any other routes in the `
|
|
47
|
+
1. Load the HTML of your application's root route (`/`), any non-dynamic pages in your `~/pages` directory, and any other routes in the `prerender.routes` array.
|
|
48
48
|
2. Save the HTML and `_payload.json` to the `~/.output/public/` directory to be served statically.
|
|
49
49
|
3. Find all anchor tags (`<a href="...">`) in the HTML to navigate to other routes.
|
|
50
50
|
4. Repeat steps 1-3 for each anchor tag found until there are no more anchor tags to crawl.
|
|
51
51
|
|
|
52
52
|
This is important to understand since pages that are not linked to a discoverable page can't be pre-rendered automatically.
|
|
53
53
|
|
|
54
|
-
::read-more{to="/docs/
|
|
54
|
+
::read-more{to="/docs/api/commands/generate#nuxt-generate"}
|
|
55
55
|
Read more about the `nuxt generate` command.
|
|
56
56
|
::
|
|
57
57
|
|
|
58
58
|
### Selective Pre-rendering
|
|
59
59
|
|
|
60
|
-
You can manually specify routes that
|
|
60
|
+
You can manually specify routes that Nuxt will fetch and pre-render during the build or ignore routes that you don't want to pre-render like `/dynamic` in the `nuxt.config` file:
|
|
61
61
|
|
|
62
62
|
```ts twoslash [nuxt.config.ts]
|
|
63
|
-
// @errors: 2353
|
|
64
63
|
export default defineNuxtConfig({
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
ignore: ['/dynamic'],
|
|
69
|
-
},
|
|
64
|
+
prerender: {
|
|
65
|
+
routes: ['/user/1', '/user/2'],
|
|
66
|
+
ignore: ['/dynamic'],
|
|
70
67
|
},
|
|
71
68
|
})
|
|
72
69
|
```
|
|
@@ -74,18 +71,15 @@ export default defineNuxtConfig({
|
|
|
74
71
|
You can combine this with the `crawlLinks` option to pre-render a set of routes that the crawler can't discover like your `/sitemap.xml` or `/robots.txt`:
|
|
75
72
|
|
|
76
73
|
```ts twoslash [nuxt.config.ts]
|
|
77
|
-
// @errors: 2353
|
|
78
74
|
export default defineNuxtConfig({
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
routes: ['/sitemap.xml', '/robots.txt'],
|
|
83
|
-
},
|
|
75
|
+
prerender: {
|
|
76
|
+
crawlLinks: true,
|
|
77
|
+
routes: ['/sitemap.xml', '/robots.txt'],
|
|
84
78
|
},
|
|
85
79
|
})
|
|
86
80
|
```
|
|
87
81
|
|
|
88
|
-
|
|
82
|
+
The top-level `prerender` option applies whichever `server.builder` you use. Builder-specific options, such as Nitro's `concurrency` or `failOnError`, can be set in `nitro.prerender`.
|
|
89
83
|
|
|
90
84
|
::read-more{to="https://nitro.build/config#prerender"}
|
|
91
85
|
Read more about pre-rendering in the Nitro documentation.
|
|
@@ -111,9 +105,9 @@ export default defineNuxtConfig({
|
|
|
111
105
|
Read more about Nitro's `routeRules` configuration.
|
|
112
106
|
::
|
|
113
107
|
|
|
114
|
-
As a shorthand, you can also configure this in a page file using [`defineRouteRules`](/docs/
|
|
108
|
+
As a shorthand, you can also configure this in a page file using [`defineRouteRules`](/docs/api/utils/define-route-rules).
|
|
115
109
|
|
|
116
|
-
::read-more{to="/docs/
|
|
110
|
+
::read-more{to="/docs/guide/going-further/experimental-features#inlinerouterules" icon="i-lucide-star"}
|
|
117
111
|
This feature is experimental and in order to use it you must enable the `experimental.inlineRouteRules` option in your `nuxt.config`.
|
|
118
112
|
::
|
|
119
113
|
|
|
@@ -145,14 +139,14 @@ export default defineNuxtConfig({
|
|
|
145
139
|
|
|
146
140
|
## Payload Extraction
|
|
147
141
|
|
|
148
|
-
When Nuxt renders a page on the server, it serializes the results of your data fetching ([`useAsyncData`](/docs/
|
|
142
|
+
When Nuxt renders a page on the server, it serializes the results of your data fetching ([`useAsyncData`](/docs/api/composables/use-async-data) and [`useFetch`](/docs/api/composables/use-fetch)) and app state ([`useState`](/docs/api/composables/use-state)) into a payload so the client can hydrate without re-fetching. With payload extraction enabled, Nuxt also writes this payload to a `_payload.json` file alongside the route's HTML:
|
|
149
143
|
|
|
150
144
|
- Prerendered routes generate their payload file at build time.
|
|
151
|
-
- Routes using [ISR or SWR caching](/docs/
|
|
145
|
+
- Routes using [ISR or SWR caching](/docs/guide/concepts/rendering#hybrid-rendering) generate their payload file when the route is first rendered, even on a hybrid (non-static) site.
|
|
152
146
|
|
|
153
147
|
During client-side navigation, Nuxt fetches the `_payload.json` file for the destination route and reuses the extracted data instead of running the data fetching again in the browser.
|
|
154
148
|
|
|
155
|
-
You can control this behavior with the [`experimental.payloadExtraction`](/docs/
|
|
149
|
+
You can control this behavior with the [`experimental.payloadExtraction`](/docs/api/nuxt-config#payloadextraction) option:
|
|
156
150
|
|
|
157
151
|
- `'client'` - The payload is inlined in the HTML for the initial render and extracted to `_payload.json` files for client-side navigation. There is no extra network request on first load.
|
|
158
152
|
- `true` - The payload is extracted to a separate `_payload.json` file for both the initial render and client-side navigation. The HTML is smaller and the payload file can be cached by a CDN, at the cost of one extra request on first load.
|
|
@@ -174,13 +168,13 @@ A few practical consequences to be aware of:
|
|
|
174
168
|
- For ISR/SWR routes, CDNs can cache payload files alongside the HTML, improving client-side navigation performance for cached routes. Dynamic routes like `pages/[...slug].vue` can opt in with glob patterns such as `'/**': { isr: true }`.
|
|
175
169
|
- Payloads are serialized with [devalue](https://github.com/Rich-Harris/devalue), so custom types (such as class instances) need payload plugins with custom reducers and revivers to survive the round trip.
|
|
176
170
|
|
|
177
|
-
:read-more{title="Payload reducers and revivers" to="/docs/
|
|
171
|
+
:read-more{title="Payload reducers and revivers" to="/docs/api/composables/use-nuxt-app#payload"}
|
|
178
172
|
|
|
179
173
|
## Runtime Prerender Configuration
|
|
180
174
|
|
|
181
175
|
### `prerenderRoutes`
|
|
182
176
|
|
|
183
|
-
You can use this at runtime within a [Nuxt context](/docs/
|
|
177
|
+
You can use this at runtime within a [Nuxt context](/docs/guide/going-further/nuxt-app#the-nuxt-context) to add more routes for Nitro to prerender.
|
|
184
178
|
|
|
185
179
|
```vue [app/pages/index.vue]
|
|
186
180
|
<script setup>
|
|
@@ -195,7 +189,7 @@ prerenderRoutes('/api/content/article/my-article')
|
|
|
195
189
|
</template>
|
|
196
190
|
```
|
|
197
191
|
|
|
198
|
-
:read-more{title="prerenderRoutes" to="/docs/
|
|
192
|
+
:read-more{title="prerenderRoutes" to="/docs/api/utils/prerender-routes"}
|
|
199
193
|
|
|
200
194
|
### `prerender:routes` Nuxt hook
|
|
201
195
|
|
|
@@ -38,6 +38,20 @@ It respects the following runtime environment variables:
|
|
|
38
38
|
- `NITRO_HOST` or `HOST` (defaults to `'0.0.0.0'`)
|
|
39
39
|
- `NITRO_SSL_CERT` and `NITRO_SSL_KEY` - if both are present, this will launch the server in HTTPS mode. In the vast majority of cases, this should not be used other than for testing, and the Nitro server should be run behind a reverse proxy like nginx or Cloudflare which terminates SSL.
|
|
40
40
|
|
|
41
|
+
### Serving the Same Build at Multiple Paths
|
|
42
|
+
|
|
43
|
+
For a normal subpath deployment, set [`app.baseURL`](/docs/api/nuxt-config#baseurl) or the `NUXT_APP_BASE_URL` environment variable.
|
|
44
|
+
|
|
45
|
+
If a reverse proxy deliberately exposes the same rendered page at multiple public paths, Nuxt may replace the browser URL with the path used for server rendering during hydration. You can keep the browser URL by removing the rendered path from the payload in a server plugin:
|
|
46
|
+
|
|
47
|
+
```ts [app/plugins/preserve-proxy-url.server.ts]
|
|
48
|
+
export default defineNuxtPlugin((nuxtApp) => {
|
|
49
|
+
delete nuxtApp.payload.path
|
|
50
|
+
})
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Use this only when the proxy already handles assets and routing for every public path. Without the rendered path, Nuxt cannot correct a genuine mismatch between the requested URL and the server-rendered route.
|
|
54
|
+
|
|
41
55
|
### PM2
|
|
42
56
|
|
|
43
57
|
[PM2](https://pm2.keymetrics.io/) (Process Manager 2) is a fast and easy solution for hosting your Nuxt application on your server or VM.
|
|
@@ -77,10 +91,10 @@ By default, the workload gets distributed to the workers with the round robin st
|
|
|
77
91
|
|
|
78
92
|
There are two ways to deploy a Nuxt application to any static hosting services:
|
|
79
93
|
|
|
80
|
-
- Static site generation (SSG) with `ssr: true` pre-renders routes of your application at build time. (This is the default behavior when running `nuxt generate`.) It will also generate `/200.html` and `/404.html` single-page app fallback pages, which can render dynamic routes or 404 errors on the client (though you may need to configure this on your static host). See [What are 200.html and 404.html?](/docs/
|
|
81
|
-
- Alternatively, you can prerender your site with `ssr: false` (static single-page app). This will produce HTML pages with an empty `<div id="__nuxt"></div>` where your Vue app would normally be rendered. You will lose many SEO benefits of prerendering your site, so it is suggested instead to use [`<ClientOnly>`](/docs/
|
|
94
|
+
- Static site generation (SSG) with `ssr: true` pre-renders routes of your application at build time. (This is the default behavior when running `nuxt generate`.) It will also generate `/200.html` and `/404.html` single-page app fallback pages, which can render dynamic routes or 404 errors on the client (though you may need to configure this on your static host). See [What are 200.html and 404.html?](/docs/guide/concepts/rendering#what-are-200html-and-404html).
|
|
95
|
+
- Alternatively, you can prerender your site with `ssr: false` (static single-page app). This will produce HTML pages with an empty `<div id="__nuxt"></div>` where your Vue app would normally be rendered. You will lose many SEO benefits of prerendering your site, so it is suggested instead to use [`<ClientOnly>`](/docs/api/components/client-only) to wrap the portions of your site that cannot be server rendered (if any).
|
|
82
96
|
|
|
83
|
-
Prerendered routes also emit `_payload.json` files with the data captured at build time, which Nuxt reuses during client-side navigation. Read more about [payload extraction](/docs/
|
|
97
|
+
Prerendered routes also emit `_payload.json` files with the data captured at build time, which Nuxt reuses during client-side navigation. Read more about [payload extraction](/docs/getting-started/prerendering#payload-extraction).
|
|
84
98
|
|
|
85
99
|
### Static Fallback Pages
|
|
86
100
|
|
|
@@ -99,9 +113,11 @@ export default defineNuxtConfig({
|
|
|
99
113
|
})
|
|
100
114
|
```
|
|
101
115
|
|
|
116
|
+
By default both fallbacks are empty shells. Set [`experimental.prerenderErrorPages`](/docs/guide/concepts/rendering#server-rendering-the-error-page) to server-render your `error.vue` into `404.html` at build time.
|
|
117
|
+
|
|
102
118
|
Some providers use `200.html`, some use `404.html`, and some let you configure both. Check your hosting provider's static fallback or rewrite settings after deployment.
|
|
103
119
|
|
|
104
|
-
:read-more{title="Nuxt prerendering" to="/docs/
|
|
120
|
+
:read-more{title="Nuxt prerendering" to="/docs/getting-started/prerendering"}
|
|
105
121
|
|
|
106
122
|
### Client-side Only Rendering
|
|
107
123
|
|
|
@@ -121,9 +137,9 @@ Nuxt can be deployed to several cloud providers with a minimal amount of configu
|
|
|
121
137
|
|
|
122
138
|
## Presets
|
|
123
139
|
|
|
124
|
-
In addition to Node.js servers and static hosting services, a Nuxt project can be deployed with several well-tested presets and minimal amount of configuration.
|
|
140
|
+
In addition to Node.js servers and static hosting services, a Nuxt project can be deployed with several well-tested presets and a minimal amount of configuration.
|
|
125
141
|
|
|
126
|
-
You can explicitly set the desired preset in the [`nuxt.config.ts`](/docs/
|
|
142
|
+
You can explicitly set the desired preset in the [`nuxt.config.ts`](/docs/directory-structure/nuxt-config) file:
|
|
127
143
|
|
|
128
144
|
```ts twoslash [nuxt.config.ts]
|
|
129
145
|
// @errors: 2353
|