@nuxt/docs 4.2.1 → 4.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/1.getting-started/01.introduction.md +1 -1
- package/1.getting-started/03.configuration.md +27 -27
- package/1.getting-started/04.views.md +5 -5
- package/1.getting-started/05.assets.md +7 -7
- package/1.getting-started/06.styling.md +5 -5
- package/1.getting-started/07.routing.md +7 -7
- package/1.getting-started/08.seo-meta.md +3 -3
- package/1.getting-started/09.transitions.md +6 -6
- package/1.getting-started/10.data-fetching.md +2 -2
- package/1.getting-started/11.state-management.md +2 -2
- package/1.getting-started/12.error-handling.md +3 -3
- package/1.getting-started/13.server.md +2 -2
- package/1.getting-started/14.layers.md +3 -3
- package/1.getting-started/16.deployment.md +1 -1
- package/1.getting-started/17.testing.md +32 -1
- package/1.getting-started/18.upgrade.md +23 -23
- package/{2.guide/1.directory-structure → 2.directory-structure}/0.nuxt.md +1 -1
- package/{2.guide/1.directory-structure → 2.directory-structure}/0.output.md +1 -1
- package/{2.guide/1.directory-structure → 2.directory-structure}/1.app/1.assets.md +2 -2
- package/{2.guide/1.directory-structure → 2.directory-structure}/1.app/1.components.md +2 -2
- package/{2.guide/1.directory-structure → 2.directory-structure}/1.app/1.composables.md +2 -2
- package/{2.guide/1.directory-structure → 2.directory-structure}/1.app/1.layouts.md +3 -3
- package/{2.guide/1.directory-structure → 2.directory-structure}/1.app/1.middleware.md +1 -1
- package/{2.guide/1.directory-structure → 2.directory-structure}/1.app/1.pages.md +7 -7
- package/{2.guide/1.directory-structure → 2.directory-structure}/1.app/1.plugins.md +2 -2
- package/{2.guide/1.directory-structure → 2.directory-structure}/1.app/1.utils.md +3 -3
- package/{2.guide/1.directory-structure → 2.directory-structure}/1.app/3.app.md +4 -4
- package/{2.guide/1.directory-structure → 2.directory-structure}/1.app/3.error.md +1 -3
- package/{2.guide/1.directory-structure → 2.directory-structure}/1.content.md +2 -2
- package/{2.guide/1.directory-structure → 2.directory-structure}/1.modules.md +1 -1
- package/{2.guide/1.directory-structure → 2.directory-structure}/1.node_modules.md +1 -1
- package/{2.guide/1.directory-structure → 2.directory-structure}/1.server.md +3 -3
- package/{2.guide/1.directory-structure → 2.directory-structure}/1.shared.md +3 -3
- package/{2.guide/1.directory-structure → 2.directory-structure}/2.env.md +2 -2
- package/{2.guide/1.directory-structure → 2.directory-structure}/2.nuxtignore.md +1 -1
- package/{2.guide/1.directory-structure → 2.directory-structure}/2.nuxtrc.md +1 -1
- package/{2.guide/1.directory-structure → 2.directory-structure}/3.nuxt-config.md +1 -1
- package/{2.guide/1.directory-structure → 2.directory-structure}/3.package.md +1 -1
- package/2.directory-structure/index.md +61 -0
- package/{2.guide → 3.guide}/0.index.md +4 -7
- package/{2.guide/2.concepts/3.rendering.md → 3.guide/1.concepts/1.rendering.md} +1 -27
- package/{2.guide/2.concepts/2.vuejs-development.md → 3.guide/1.concepts/10.vuejs-development.md} +4 -3
- package/{2.guide/2.concepts/10.nuxt-lifecycle.md → 3.guide/1.concepts/2.nuxt-lifecycle.md} +32 -25
- package/{2.guide/2.concepts/1.auto-imports.md → 3.guide/1.concepts/3.auto-imports.md} +5 -5
- package/{2.guide/2.concepts → 3.guide/1.concepts}/4.server-engine.md +3 -3
- package/{2.guide/2.concepts → 3.guide/1.concepts}/5.modules.md +1 -1
- package/{2.guide/2.concepts → 3.guide/1.concepts}/7.esm.md +1 -0
- package/{2.guide/2.concepts → 3.guide/1.concepts}/8.typescript.md +4 -4
- package/{2.guide/5.best-practices → 3.guide/2.best-practices}/performance.md +2 -2
- package/3.guide/3.ai/.navigation.yml +3 -0
- package/3.guide/3.ai/1.mcp.md +255 -0
- package/3.guide/3.ai/2.llms-txt.md +65 -0
- package/{2.guide → 3.guide}/4.recipes/1.custom-routing.md +1 -1
- package/{2.guide → 3.guide}/4.recipes/2.vite-plugin.md +1 -1
- package/{2.guide → 3.guide}/4.recipes/3.custom-usefetch.md +1 -1
- package/{2.guide → 3.guide}/4.recipes/4.sessions-and-authentication.md +1 -1
- package/{2.guide/3.going-further → 3.guide/5.going-further}/1.events.md +2 -3
- package/{2.guide/3.going-further → 3.guide/5.going-further}/1.experimental-features.md +4 -4
- package/{2.guide/3.going-further → 3.guide/5.going-further}/1.internals.md +3 -2
- package/{2.guide/3.going-further → 3.guide/5.going-further}/10.runtime-config.md +2 -2
- package/{2.guide/3.going-further → 3.guide/5.going-further}/2.hooks.md +2 -2
- package/{2.guide/3.going-further → 3.guide/5.going-further}/3.modules.md +2 -2
- package/{2.guide/3.going-further → 3.guide/5.going-further}/6.nuxt-app.md +3 -3
- package/{2.guide/3.going-further → 3.guide/5.going-further}/7.layers.md +12 -12
- package/{3.api → 4.api}/1.components/12.nuxt-route-announcer.md +1 -3
- package/{3.api → 4.api}/1.components/13.nuxt-time.md +0 -2
- package/{3.api → 4.api}/1.components/2.nuxt-page.md +2 -2
- package/{3.api → 4.api}/1.components/3.nuxt-layout.md +5 -5
- package/{3.api → 4.api}/1.components/5.nuxt-loading-indicator.md +1 -1
- package/{3.api → 4.api}/1.components/7.nuxt-welcome.md +2 -2
- package/{3.api → 4.api}/2.composables/use-app-config.md +1 -1
- package/4.api/2.composables/use-cookie.md +183 -0
- package/{3.api → 4.api}/2.composables/use-fetch.md +31 -31
- package/{3.api → 4.api}/2.composables/use-lazy-fetch.md +8 -8
- package/{3.api → 4.api}/2.composables/use-nuxt-app.md +4 -4
- package/{3.api → 4.api}/2.composables/use-response-header.md +1 -1
- package/{3.api → 4.api}/2.composables/use-route-announcer.md +0 -2
- package/{3.api → 4.api}/2.composables/use-route.md +1 -1
- package/{3.api → 4.api}/2.composables/use-router.md +2 -2
- package/{3.api → 4.api}/2.composables/use-runtime-config.md +1 -1
- package/{3.api → 4.api}/3.utils/$fetch.md +1 -1
- package/{3.api → 4.api}/3.utils/abort-navigation.md +1 -1
- package/{3.api → 4.api}/3.utils/add-route-middleware.md +1 -1
- package/{3.api → 4.api}/3.utils/call-once.md +0 -2
- package/{3.api → 4.api}/3.utils/define-nuxt-plugin.md +12 -12
- package/{3.api → 4.api}/3.utils/define-nuxt-route-middleware.md +1 -1
- package/{3.api → 4.api}/3.utils/define-page-meta.md +6 -6
- package/{3.api → 4.api}/3.utils/navigate-to.md +10 -10
- package/{3.api → 4.api}/3.utils/refresh-cookie.md +0 -2
- package/{3.api → 4.api}/3.utils/update-app-config.md +2 -2
- package/{3.api → 4.api}/4.commands/add.md +10 -10
- package/4.api/4.commands/analyze.md +42 -0
- package/4.api/4.commands/build-module.md +42 -0
- package/4.api/4.commands/build.md +47 -0
- package/{3.api → 4.api}/4.commands/cleanup.md +6 -6
- package/4.api/4.commands/dev.md +60 -0
- package/{3.api → 4.api}/4.commands/devtools.md +7 -7
- package/4.api/4.commands/generate.md +42 -0
- package/4.api/4.commands/info.md +33 -0
- package/4.api/4.commands/init.md +50 -0
- package/4.api/4.commands/module.md +84 -0
- package/4.api/4.commands/prepare.md +41 -0
- package/4.api/4.commands/preview.md +44 -0
- package/4.api/4.commands/test.md +40 -0
- package/4.api/4.commands/typecheck.md +44 -0
- package/4.api/4.commands/upgrade.md +37 -0
- package/{3.api → 4.api}/5.kit/1.modules.md +16 -16
- package/{3.api → 4.api}/5.kit/10.templates.md +23 -23
- package/{3.api → 4.api}/5.kit/11.nitro.md +35 -35
- package/{3.api → 4.api}/5.kit/14.builder.md +15 -15
- package/{3.api → 4.api}/5.kit/16.layers.md +12 -12
- package/{3.api → 4.api}/5.kit/2.programmatic.md +2 -2
- package/{3.api → 4.api}/5.kit/4.autoimports.md +18 -18
- package/4.api/5.kit/5.components.md +146 -0
- package/4.api/6.advanced/1.hooks.md +105 -0
- package/{3.api → 4.api}/6.nuxt-config.md +5 -4
- package/5.community/6.roadmap.md +25 -25
- package/5.community/7.changelog.md +10 -0
- package/6.bridge/1.overview.md +1 -1
- package/6.bridge/2.typescript.md +1 -1
- package/6.bridge/3.bridge-composition-api.md +1 -1
- package/6.bridge/4.plugins-and-middleware.md +2 -2
- package/7.migration/11.server.md +1 -1
- package/7.migration/2.configuration.md +2 -2
- package/7.migration/20.module-authors.md +1 -1
- package/7.migration/3.auto-imports.md +1 -1
- package/7.migration/5.plugins-and-middleware.md +2 -2
- package/7.migration/6.pages-and-layouts.md +6 -6
- package/package.json +1 -1
- package/3.api/2.composables/use-cookie.md +0 -183
- package/3.api/4.commands/analyze.md +0 -42
- package/3.api/4.commands/build-module.md +0 -42
- package/3.api/4.commands/build.md +0 -47
- package/3.api/4.commands/dev.md +0 -60
- package/3.api/4.commands/generate.md +0 -42
- package/3.api/4.commands/info.md +0 -33
- package/3.api/4.commands/init.md +0 -50
- package/3.api/4.commands/module.md +0 -84
- package/3.api/4.commands/prepare.md +0 -41
- package/3.api/4.commands/preview.md +0 -44
- package/3.api/4.commands/test.md +0 -40
- package/3.api/4.commands/typecheck.md +0 -44
- package/3.api/4.commands/upgrade.md +0 -37
- package/3.api/5.kit/5.components.md +0 -146
- package/3.api/6.advanced/1.hooks.md +0 -105
- /package/{2.guide/1.directory-structure → 2.directory-structure}/.navigation.yml +0 -0
- /package/{2.guide/1.directory-structure → 2.directory-structure}/1.app/.navigation.yml +0 -0
- /package/{2.guide/1.directory-structure → 2.directory-structure}/1.app/3.app-config.md +0 -0
- /package/{2.guide/1.directory-structure → 2.directory-structure}/1.public.md +0 -0
- /package/{2.guide/1.directory-structure → 2.directory-structure}/2.gitignore.md +0 -0
- /package/{2.guide/1.directory-structure → 2.directory-structure}/3.tsconfig.md +0 -0
- /package/{2.guide → 3.guide}/.navigation.yml +0 -0
- /package/{2.guide/2.concepts → 3.guide/1.concepts}/.navigation.yml +0 -0
- /package/{2.guide/2.concepts → 3.guide/1.concepts}/9.code-style.md +0 -0
- /package/{2.guide/5.best-practices → 3.guide/2.best-practices}/.navigation.yml +0 -0
- /package/{2.guide/5.best-practices → 3.guide/2.best-practices}/hydration.md +0 -0
- /package/{2.guide/5.best-practices → 3.guide/2.best-practices}/plugins.md +0 -0
- /package/{2.guide → 3.guide}/4.recipes/.navigation.yml +0 -0
- /package/{2.guide/3.going-further → 3.guide/5.going-further}/.navigation.yml +0 -0
- /package/{2.guide/3.going-further → 3.guide/5.going-further}/1.features.md +0 -0
- /package/{2.guide/3.going-further → 3.guide/5.going-further}/11.nightly-release-channel.md +0 -0
- /package/{2.guide/3.going-further → 3.guide/5.going-further}/4.kit.md +0 -0
- /package/{2.guide/3.going-further → 3.guide/5.going-further}/9.debugging.md +0 -0
- /package/{2.guide/3.going-further → 3.guide/5.going-further}/index.md +0 -0
- /package/{3.api → 4.api}/.navigation.yml +0 -0
- /package/{3.api → 4.api}/1.components/.navigation.yml +0 -0
- /package/{3.api → 4.api}/1.components/1.client-only.md +0 -0
- /package/{3.api → 4.api}/1.components/1.dev-only.md +0 -0
- /package/{3.api → 4.api}/1.components/1.nuxt-client-fallback.md +0 -0
- /package/{3.api → 4.api}/1.components/10.nuxt-picture.md +0 -0
- /package/{3.api → 4.api}/1.components/11.teleports.md +0 -0
- /package/{3.api → 4.api}/1.components/4.nuxt-link.md +0 -0
- /package/{3.api → 4.api}/1.components/6.nuxt-error-boundary.md +0 -0
- /package/{3.api → 4.api}/1.components/8.nuxt-island.md +0 -0
- /package/{3.api → 4.api}/1.components/9.nuxt-img.md +0 -0
- /package/{3.api → 4.api}/2.composables/.navigation.yml +0 -0
- /package/{3.api → 4.api}/2.composables/on-prehydrate.md +0 -0
- /package/{3.api → 4.api}/2.composables/use-async-data.md +0 -0
- /package/{3.api → 4.api}/2.composables/use-error.md +0 -0
- /package/{3.api → 4.api}/2.composables/use-head-safe.md +0 -0
- /package/{3.api → 4.api}/2.composables/use-head.md +0 -0
- /package/{3.api → 4.api}/2.composables/use-hydration.md +0 -0
- /package/{3.api → 4.api}/2.composables/use-lazy-async-data.md +0 -0
- /package/{3.api → 4.api}/2.composables/use-loading-indicator.md +0 -0
- /package/{3.api → 4.api}/2.composables/use-nuxt-data.md +0 -0
- /package/{3.api → 4.api}/2.composables/use-preview-mode.md +0 -0
- /package/{3.api → 4.api}/2.composables/use-request-event.md +0 -0
- /package/{3.api → 4.api}/2.composables/use-request-fetch.md +0 -0
- /package/{3.api → 4.api}/2.composables/use-request-header.md +0 -0
- /package/{3.api → 4.api}/2.composables/use-request-headers.md +0 -0
- /package/{3.api → 4.api}/2.composables/use-request-url.md +0 -0
- /package/{3.api → 4.api}/2.composables/use-runtime-hook.md +0 -0
- /package/{3.api → 4.api}/2.composables/use-seo-meta.md +0 -0
- /package/{3.api → 4.api}/2.composables/use-server-seo-meta.md +0 -0
- /package/{3.api → 4.api}/2.composables/use-state.md +0 -0
- /package/{3.api → 4.api}/3.utils/.navigation.yml +0 -0
- /package/{3.api → 4.api}/3.utils/clear-error.md +0 -0
- /package/{3.api → 4.api}/3.utils/clear-nuxt-data.md +0 -0
- /package/{3.api → 4.api}/3.utils/clear-nuxt-state.md +0 -0
- /package/{3.api → 4.api}/3.utils/create-error.md +0 -0
- /package/{3.api → 4.api}/3.utils/define-lazy-hydration-component.md +0 -0
- /package/{3.api → 4.api}/3.utils/define-nuxt-component.md +0 -0
- /package/{3.api → 4.api}/3.utils/define-route-rules.md +0 -0
- /package/{3.api → 4.api}/3.utils/on-before-route-leave.md +0 -0
- /package/{3.api → 4.api}/3.utils/on-before-route-update.md +0 -0
- /package/{3.api → 4.api}/3.utils/on-nuxt-ready.md +0 -0
- /package/{3.api → 4.api}/3.utils/prefetch-components.md +0 -0
- /package/{3.api → 4.api}/3.utils/preload-components.md +0 -0
- /package/{3.api → 4.api}/3.utils/preload-route-components.md +0 -0
- /package/{3.api → 4.api}/3.utils/prerender-routes.md +0 -0
- /package/{3.api → 4.api}/3.utils/refresh-nuxt-data.md +0 -0
- /package/{3.api → 4.api}/3.utils/reload-nuxt-app.md +0 -0
- /package/{3.api → 4.api}/3.utils/set-page-layout.md +0 -0
- /package/{3.api → 4.api}/3.utils/set-response-status.md +0 -0
- /package/{3.api → 4.api}/3.utils/show-error.md +0 -0
- /package/{3.api → 4.api}/4.commands/.navigation.yml +0 -0
- /package/{3.api → 4.api}/5.kit/.navigation.yml +0 -0
- /package/{3.api → 4.api}/5.kit/10.runtime-config.md +0 -0
- /package/{3.api → 4.api}/5.kit/12.resolving.md +0 -0
- /package/{3.api → 4.api}/5.kit/13.logging.md +0 -0
- /package/{3.api → 4.api}/5.kit/15.examples.md +0 -0
- /package/{3.api → 4.api}/5.kit/3.compatibility.md +0 -0
- /package/{3.api → 4.api}/5.kit/6.context.md +0 -0
- /package/{3.api → 4.api}/5.kit/7.pages.md +0 -0
- /package/{3.api → 4.api}/5.kit/8.layout.md +0 -0
- /package/{3.api → 4.api}/5.kit/9.head.md +0 -0
- /package/{3.api → 4.api}/5.kit/9.plugins.md +0 -0
- /package/{3.api → 4.api}/6.advanced/.navigation.yml +0 -0
- /package/{3.api → 4.api}/6.advanced/2.import-meta.md +0 -0
- /package/{3.api → 4.api}/index.md +0 -0
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: 'Lifecycle Hooks'
|
|
3
|
+
description: Nuxt provides a powerful hooking system to expand almost every aspect using hooks.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
:read-more{to="/docs/4.x/guide/going-further/hooks"}
|
|
7
|
+
|
|
8
|
+
## App Hooks (runtime)
|
|
9
|
+
|
|
10
|
+
Check the [app source code](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/nuxt.ts#L37) for all available hooks.
|
|
11
|
+
|
|
12
|
+
| Hook | Arguments | Environment | Description |
|
|
13
|
+
|------------------------------|---------------------|-----------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
14
|
+
| `app:created` | `vueApp` | Server & Client | Called when initial `vueApp` instance is created. |
|
|
15
|
+
| `app:error` | `err` | Server & Client | Called when a fatal error occurs. |
|
|
16
|
+
| `app:error:cleared` | `{ redirect? }` | Server & Client | Called when a fatal error occurs. |
|
|
17
|
+
| `vue:setup` | - | Server & Client | Called when the setup of Nuxt root is initialized. This callback must be synchronous. |
|
|
18
|
+
| `vue:error` | `err, target, info` | Server & Client | Called when a vue error propagates to the root component. [Learn More](https://vuejs.org/api/composition-api-lifecycle#onerrorcaptured). |
|
|
19
|
+
| `app:rendered` | `renderContext` | Server | Called when SSR rendering is done. |
|
|
20
|
+
| `app:redirected` | - | Server | Called before SSR redirection. |
|
|
21
|
+
| `app:beforeMount` | `vueApp` | Client | Called before mounting the app, called only on client side. |
|
|
22
|
+
| `app:mounted` | `vueApp` | Client | Called when Vue app is initialized and mounted in browser. |
|
|
23
|
+
| `app:suspense:resolve` | `appComponent` | Client | On [Suspense](https://vuejs.org/guide/built-ins/suspense#suspense) resolved event. |
|
|
24
|
+
| `app:manifest:update` | `{ id, timestamp }` | Client | Called when there is a newer version of your app detected. |
|
|
25
|
+
| `app:data:refresh` | `keys?` | Client | Called when `refreshNuxtData` is called. |
|
|
26
|
+
| `link:prefetch` | `to` | Client | Called when a `<NuxtLink>` is observed to be prefetched. |
|
|
27
|
+
| `page:start` | `pageComponent?` | Client | Called on [Suspense](https://vuejs.org/guide/built-ins/suspense#suspense) inside of `NuxtPage` pending event. |
|
|
28
|
+
| `page:finish` | `pageComponent?` | Client | Called on [Suspense](https://vuejs.org/guide/built-ins/suspense#suspense) inside of `NuxtPage` resolved event. |
|
|
29
|
+
| `page:loading:start` | - | Client | Called when the `setup()` of the new page is running. |
|
|
30
|
+
| `page:loading:end` | - | Client | Called after `page:finish` |
|
|
31
|
+
| `page:transition:finish` | `pageComponent?` | Client | After page transition [onAfterLeave](https://vuejs.org/guide/built-ins/transition#javascript-hooks) event. |
|
|
32
|
+
| `dev:ssr-logs` | `logs` | Client | Called with an array of server-side logs that have been passed to the client (if `features.devLogs` is enabled). |
|
|
33
|
+
| `page:view-transition:start` | `transition` | Client | Called after `document.startViewTransition` is called when [experimental viewTransition support is enabled](/docs/4.x/getting-started/transitions#view-transitions-api-experimental). |
|
|
34
|
+
|
|
35
|
+
## Nuxt Hooks (build time)
|
|
36
|
+
|
|
37
|
+
Check the [schema source code](https://github.com/nuxt/nuxt/blob/main/packages/schema/src/types/hooks.ts#L83) for all available hooks.
|
|
38
|
+
|
|
39
|
+
| Hook | Arguments | Description |
|
|
40
|
+
|-----------------------------|----------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
41
|
+
| `kit:compatibility` | `compatibility, issues` | Allows extending compatibility checks. |
|
|
42
|
+
| `ready` | `nuxt` | Called after Nuxt initialization, when the Nuxt instance is ready to work. |
|
|
43
|
+
| `close` | `nuxt` | Called when Nuxt instance is gracefully closing. |
|
|
44
|
+
| `restart` | `{ hard?: boolean }` | To be called to restart the current Nuxt instance. |
|
|
45
|
+
| `modules:before` | - | Called during Nuxt initialization, before installing user modules. |
|
|
46
|
+
| `modules:done` | - | Called during Nuxt initialization, after installing user modules. |
|
|
47
|
+
| `app:resolve` | `app` | Called after resolving the `app` instance. |
|
|
48
|
+
| `app:templates` | `app` | Called during `NuxtApp` generation, to allow customizing, modifying or adding new files to the build directory (either virtually or to written to `.nuxt`). |
|
|
49
|
+
| `app:templatesGenerated` | `app` | Called after templates are compiled into the [virtual file system](/docs/4.x/directory-structure/nuxt) (vfs). |
|
|
50
|
+
| `build:before` | - | Called before Nuxt bundle builder. |
|
|
51
|
+
| `build:done` | - | Called after Nuxt bundle builder is complete. |
|
|
52
|
+
| `build:manifest` | `manifest` | Called during the manifest build by Vite and webpack. This allows customizing the manifest that Nitro will use to render `<script>` and `<link>` tags in the final HTML. |
|
|
53
|
+
| `builder:generateApp` | `options` | Called before generating the app. |
|
|
54
|
+
| `builder:watch` | `event, path` | Called at build time in development when the watcher spots a change to a file or directory in the project. |
|
|
55
|
+
| `pages:extend` | `pages` | Called after page routes are scanned from the file system. |
|
|
56
|
+
| `pages:resolved` | `pages` | Called after page routes have been augmented with scanned metadata. |
|
|
57
|
+
| `pages:routerOptions` | `{ files: Array<{ path: string, optional?: boolean }> }` | Called when resolving `router.options` files. Later items in the array override earlier ones. |
|
|
58
|
+
| `server:devHandler` | `handler` | Called when the dev middleware is being registered on the Nitro dev server. |
|
|
59
|
+
| `imports:sources` | `presets` | Called at setup allowing modules to extend sources. |
|
|
60
|
+
| `imports:extend` | `imports` | Called at setup allowing modules to extend imports. |
|
|
61
|
+
| `imports:context` | `context` | Called when the [unimport](https://github.com/unjs/unimport) context is created. |
|
|
62
|
+
| `imports:dirs` | `dirs` | Allows extending import directories. |
|
|
63
|
+
| `components:dirs` | `dirs` | Called within `app:resolve` allowing to extend the directories that are scanned for auto-importable components. |
|
|
64
|
+
| `components:extend` | `components` | Allows extending new components. |
|
|
65
|
+
| `nitro:config` | `nitroConfig` | Called before initializing Nitro, allowing customization of Nitro's configuration. |
|
|
66
|
+
| `nitro:init` | `nitro` | Called after Nitro is initialized, which allows registering Nitro hooks and interacting directly with Nitro. |
|
|
67
|
+
| `nitro:build:before` | `nitro` | Called before building the Nitro instance. |
|
|
68
|
+
| `nitro:build:public-assets` | `nitro` | Called after copying public assets. Allows modifying public assets before Nitro server is built. |
|
|
69
|
+
| `prerender:routes` | `ctx` | Allows extending the routes to be pre-rendered. |
|
|
70
|
+
| `build:error` | `error` | Called when an error occurs at build time. |
|
|
71
|
+
| `prepare:types` | `options` | Called before `@nuxt/cli` writes TypeScript configuration files (`.nuxt/tsconfig.app.json`, `.nuxt/tsconfig.server.json`, etc.) and `.nuxt/nuxt.d.ts`, allowing addition of custom references and declarations in `nuxt.d.ts`, or directly modifying the options in generated configurations |
|
|
72
|
+
| `listen` | `listenerServer, listener` | Called when the dev server is loading. |
|
|
73
|
+
| `schema:extend` | `schemas` | Allows extending default schemas. |
|
|
74
|
+
| `schema:resolved` | `schema` | Allows extending resolved schema. |
|
|
75
|
+
| `schema:beforeWrite` | `schema` | Called before writing the given schema. |
|
|
76
|
+
| `schema:written` | - | Called after the schema is written. |
|
|
77
|
+
| `vite:extend` | `viteBuildContext` | Allows extending Vite default context. |
|
|
78
|
+
| `vite:extendConfig` | `viteInlineConfig, env` | Allows extending Vite default config. **Deprecated in Nuxt 5+.** In Nuxt 5, this operates on a shared configuration rather than separate client/server configs. |
|
|
79
|
+
| `vite:configResolved` | `viteInlineConfig, env` | Allows reading the resolved Vite config. **Deprecated in Nuxt 5+.** In Nuxt 5, this operates on a shared configuration rather than separate client/server configs. |
|
|
80
|
+
| `vite:serverCreated` | `viteServer, env` | Called when the Vite server is created. |
|
|
81
|
+
| `vite:compiled` | - | Called after Vite server is compiled. |
|
|
82
|
+
| `webpack:config` | `webpackConfigs` | Called before configuring the webpack compiler. |
|
|
83
|
+
| `webpack:configResolved` | `webpackConfigs` | Allows reading the resolved webpack config. |
|
|
84
|
+
| `webpack:compile` | `options` | Called right before compilation. |
|
|
85
|
+
| `webpack:compiled` | `options` | Called after resources are loaded. |
|
|
86
|
+
| `webpack:change` | `shortPath` | Called on `change` on WebpackBar. |
|
|
87
|
+
| `webpack:error` | - | Called on `done` if has errors on WebpackBar. |
|
|
88
|
+
| `webpack:done` | - | Called on `allDone` on WebpackBar. |
|
|
89
|
+
| `webpack:progress` | `statesArray` | Called on `progress` on WebpackBar. |
|
|
90
|
+
|
|
91
|
+
## Nitro App Hooks (runtime, server-side)
|
|
92
|
+
|
|
93
|
+
See [Nitro](https://nitro.build/guide/plugins#available-hooks) for all available hooks.
|
|
94
|
+
|
|
95
|
+
| Hook | Arguments | Description | Types |
|
|
96
|
+
|-------------------|--------------------------------------------|---------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
97
|
+
| `dev:ssr-logs` | `{ path, logs }` | Server | Called at the end of a request cycle with an array of server-side logs. |
|
|
98
|
+
| `render:response` | `response, { event }` | Called before sending the response. | [response](https://github.com/nuxt/nuxt/blob/71ef8bd3ff207fd51c2ca18d5a8c7140476780c7/packages/nuxt/src/core/runtime/nitro/renderer.ts#L24), [event](https://github.com/h3js/h3/blob/f6ceb5581043dc4d8b6eab91e9be4531e0c30f8e/src/types.ts#L38) |
|
|
99
|
+
| `render:html` | `html, { event }` | Called before constructing the HTML. | [html](https://github.com/nuxt/nuxt/blob/71ef8bd3ff207fd51c2ca18d5a8c7140476780c7/packages/nuxt/src/core/runtime/nitro/renderer.ts#L15), [event](https://github.com/h3js/h3/blob/f6ceb5581043dc4d8b6eab91e9be4531e0c30f8e/src/types.ts#L38) |
|
|
100
|
+
| `render:island` | `islandResponse, { event, islandContext }` | Called before constructing the island HTML. | [islandResponse](https://github.com/nuxt/nuxt/blob/e50cabfed1984c341af0d0c056a325a8aec26980/packages/nuxt/src/core/runtime/nitro/renderer.ts#L28), [event](https://github.com/h3js/h3/blob/f6ceb5581043dc4d8b6eab91e9be4531e0c30f8e/src/types.ts#L38), [islandContext](https://github.com/nuxt/nuxt/blob/e50cabfed1984c341af0d0c056a325a8aec26980/packages/nuxt/src/core/runtime/nitro/renderer.ts#L38) |
|
|
101
|
+
| `close` | - | Called when Nitro is closed. | - |
|
|
102
|
+
| `error` | `error, { event? }` | Called when an error occurs. | [error](https://github.com/nitrojs/nitro/blob/d20ffcbd16fc4003b774445e1a01e698c2bb078a/src/types/runtime/nitro.ts#L48), [event](https://github.com/h3js/h3/blob/f6ceb5581043dc4d8b6eab91e9be4531e0c30f8e/src/types.ts#L38) |
|
|
103
|
+
| `request` | `event` | Called when a request is received. | [event](https://github.com/h3js/h3/blob/f6ceb5581043dc4d8b6eab91e9be4531e0c30f8e/src/types.ts#L38) |
|
|
104
|
+
| `beforeResponse` | `event, { body }` | Called before sending the response. | [event](https://github.com/h3js/h3/blob/f6ceb5581043dc4d8b6eab91e9be4531e0c30f8e/src/types.ts#L38), unknown |
|
|
105
|
+
| `afterResponse` | `event, { body }` | Called after sending the response. | [event](https://github.com/h3js/h3/blob/f6ceb5581043dc4d8b6eab91e9be4531e0c30f8e/src/types.ts#L38), unknown |
|
|
@@ -505,7 +505,7 @@ Any components in the directories configured here can be used throughout your pa
|
|
|
505
505
|
}
|
|
506
506
|
```
|
|
507
507
|
|
|
508
|
-
**See**: [`app/components/` directory documentation](https://nuxt.com/docs/4.x/
|
|
508
|
+
**See**: [`app/components/` directory documentation](https://nuxt.com/docs/4.x/directory-structure/app/components)
|
|
509
509
|
|
|
510
510
|
## css
|
|
511
511
|
|
|
@@ -801,6 +801,7 @@ More customizable than `ignorePrefix`: all files matching glob patterns specifie
|
|
|
801
801
|
"**/*.stories.{js,cts,mts,ts,jsx,tsx}",
|
|
802
802
|
"**/*.{spec,test}.{js,cts,mts,ts,jsx,tsx}",
|
|
803
803
|
"**/*.d.{cts,mts,ts}",
|
|
804
|
+
"**/*.d.vue.{cts,mts,ts}",
|
|
804
805
|
"**/.{pnpm-store,vercel,netlify,output,git,cache,data}",
|
|
805
806
|
"**/*.sock",
|
|
806
807
|
".nuxt/analyze",
|
|
@@ -835,7 +836,7 @@ Any file in `app/pages/`, `app/layouts/`, `app/middleware/`, and `public/` direc
|
|
|
835
836
|
|
|
836
837
|
Configure how Nuxt auto-imports composables into your application.
|
|
837
838
|
|
|
838
|
-
**See**: [Nuxt documentation](https://nuxt.com/docs/4.x/
|
|
839
|
+
**See**: [Nuxt documentation](https://nuxt.com/docs/4.x/directory-structure/app/composables)
|
|
839
840
|
|
|
840
841
|
### `dirs`
|
|
841
842
|
|
|
@@ -1146,7 +1147,7 @@ and these plugins do not need to be listed in `nuxt.config` unless you
|
|
|
1146
1147
|
need to customize their order. All plugins are deduplicated by their src path.
|
|
1147
1148
|
::
|
|
1148
1149
|
|
|
1149
|
-
**See**: [`app/plugins/` directory documentation](https://nuxt.com/docs/4.x/
|
|
1150
|
+
**See**: [`app/plugins/` directory documentation](https://nuxt.com/docs/4.x/directory-structure/app/plugins)
|
|
1150
1151
|
|
|
1151
1152
|
**Example**:
|
|
1152
1153
|
```ts
|
|
@@ -1307,7 +1308,7 @@ Each handler accepts the following options:
|
|
|
1307
1308
|
|
|
1308
1309
|
- **Type**: `array`
|
|
1309
1310
|
|
|
1310
|
-
**See**: [`server/` directory documentation](https://nuxt.com/docs/4.x/
|
|
1311
|
+
**See**: [`server/` directory documentation](https://nuxt.com/docs/4.x/directory-structure/server)
|
|
1311
1312
|
|
|
1312
1313
|
::callout
|
|
1313
1314
|
**Note**: Files from `server/api`, `server/middleware` and `server/routes` will be automatically registered by Nuxt.
|
package/5.community/6.roadmap.md
CHANGED
|
@@ -28,22 +28,22 @@ In roadmap below are some features we are planning or working on at the moment.
|
|
|
28
28
|
Check [Discussions](https://github.com/nuxt/nuxt/discussions) and [RFCs](https://github.com/nuxt/nuxt/discussions/categories/rfcs) for more upcoming features and ideas.
|
|
29
29
|
::
|
|
30
30
|
|
|
31
|
-
Milestone | Expected date | Notes
|
|
32
|
-
|
|
33
|
-
SEO & PWA | 2025 | [nuxt/nuxt#18395](https://github.com/nuxt/nuxt/discussions/18395)
|
|
34
|
-
Assets | 2025 | [nuxt/nuxt#22012](https://github.com/nuxt/nuxt/discussions/22012)
|
|
35
|
-
Translations | - | [nuxt/nuxt.com#1711](https://github.com/nuxt/nuxt.com/issues/1711)
|
|
31
|
+
| Milestone | Expected date | Notes | Description |
|
|
32
|
+
|--------------|---------------|--------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------|
|
|
33
|
+
| SEO & PWA | 2025 | [nuxt/nuxt#18395](https://github.com/nuxt/nuxt/discussions/18395) | Migrating from [nuxt-community/pwa-module](https://github.com/nuxt-community/pwa-module) for built-in SEO utils and service worker support |
|
|
34
|
+
| Assets | 2025 | [nuxt/nuxt#22012](https://github.com/nuxt/nuxt/discussions/22012) | Allow developers and modules to handle loading third-party assets. |
|
|
35
|
+
| Translations | - | [nuxt/nuxt.com#1711](https://github.com/nuxt/nuxt.com/issues/1711) | A collaborative project for a stable translation process for Nuxt docs. Currently pending for ideas and documentation tooling support. |
|
|
36
36
|
|
|
37
37
|
## Core Modules Roadmap
|
|
38
38
|
|
|
39
39
|
In addition to the Nuxt framework, there are modules that are vital for the ecosystem. Their status will be updated below.
|
|
40
40
|
|
|
41
|
-
Module
|
|
42
|
-
|
|
43
|
-
[Scripts](https://scripts.nuxt.com)
|
|
44
|
-
Auth Utils
|
|
45
|
-
A11y
|
|
46
|
-
Hints
|
|
41
|
+
| Module | Status | Nuxt Support | Repository | Description |
|
|
42
|
+
|----------------------------------------|--------------|--------------|-------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
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
|
+
| 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
|
+
| A11y | Planned | 4.x, 5.x | `nuxt/a11y` to be announced | Accessibility hinting and utilities [nuxt/nuxt#23255](https://github.com/nuxt/nuxt/issues/23255) |
|
|
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
|
|
49
49
|
|
|
@@ -65,20 +65,20 @@ Nuxt 3 will continue to receive maintenance updates (both bug fixes and backport
|
|
|
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
|
-
Release
|
|
69
|
-
|
|
70
|
-
**5.x** (scheduled)
|
|
71
|
-
**4.x** (stable)
|
|
72
|
-
**3.x** (maintenance)
|
|
73
|
-
**2.x** (unsupported)
|
|
74
|
-
**1.x** (unsupported)
|
|
68
|
+
| Release | | Initial release | End Of Life | Docs |
|
|
69
|
+
|-----------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------|----------------------------|-------------------------------------------------------------------|
|
|
70
|
+
| **5.x** (scheduled) | | Q4 2025 (estimated) | TBA | |
|
|
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-01-31 | [nuxt.com](/docs/3.x/getting-started/introduction) |
|
|
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
|
+
| **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
|
|
|
76
76
|
### Support Status
|
|
77
77
|
|
|
78
|
-
Status | Description
|
|
79
|
-
|
|
80
|
-
Unsupported | This version is not maintained any more and will not receive security patches
|
|
81
|
-
Maintenance | This version will only receive security patches
|
|
82
|
-
Stable | This version is being developed for and will receive security patches
|
|
83
|
-
Development | This version could be unstable
|
|
84
|
-
Scheduled | This version does not exist yet but is planned
|
|
78
|
+
| Status | Description |
|
|
79
|
+
|-------------|-------------------------------------------------------------------------------|
|
|
80
|
+
| Unsupported | This version is not maintained any more and will not receive security patches |
|
|
81
|
+
| Maintenance | This version will only receive security patches |
|
|
82
|
+
| Stable | This version is being developed for and will receive security patches |
|
|
83
|
+
| Development | This version could be unstable |
|
|
84
|
+
| Scheduled | This version does not exist yet but is planned |
|
|
@@ -58,6 +58,16 @@ navigation.icon: i-lucide-bell-dot
|
|
|
58
58
|
::card
|
|
59
59
|
---
|
|
60
60
|
icon: i-simple-icons-github
|
|
61
|
+
title: nuxt/hints
|
|
62
|
+
to: https://github.com/nuxt/hints/releases
|
|
63
|
+
target: _blank
|
|
64
|
+
ui.icon.base: text-black dark:text-white
|
|
65
|
+
---
|
|
66
|
+
Nuxt Hints releases.
|
|
67
|
+
::
|
|
68
|
+
::card
|
|
69
|
+
---
|
|
70
|
+
icon: i-simple-icons-github
|
|
61
71
|
title: nuxt/image
|
|
62
72
|
to: https://github.com/nuxt/image/releases
|
|
63
73
|
target: _blank
|
package/6.bridge/1.overview.md
CHANGED
|
@@ -80,7 +80,7 @@ bun add -D @nuxt/bridge nuxi
|
|
|
80
80
|
|
|
81
81
|
Please make sure to avoid any CommonJS syntax such as `module.exports`, `require` or `require.resolve` in your config file. It will soon be deprecated and unsupported.
|
|
82
82
|
|
|
83
|
-
You can use static `import`, dynamic `import()` and `export default` instead. Using TypeScript by renaming to [`nuxt.config.ts`](/docs/4.x/
|
|
83
|
+
You can use static `import`, dynamic `import()` and `export default` instead. Using TypeScript by renaming to [`nuxt.config.ts`](/docs/4.x/directory-structure/nuxt-config) is also possible and recommended.
|
|
84
84
|
|
|
85
85
|
```ts [nuxt.config.ts]
|
|
86
86
|
import { defineNuxtConfig } from '@nuxt/bridge'
|
package/6.bridge/2.typescript.md
CHANGED
|
@@ -37,7 +37,7 @@ If you are using TypeScript, you can edit your `tsconfig.json` to benefit from a
|
|
|
37
37
|
::note
|
|
38
38
|
As `.nuxt/tsconfig.json` is generated and not checked into version control, you'll need to generate that file before running your tests. Add `nuxi prepare` as a step before your tests, otherwise you'll see `TS5083: Cannot read file '~/.nuxt/tsconfig.json'`
|
|
39
39
|
|
|
40
|
-
For modern Nuxt projects, we recommend using [TypeScript project references](/docs/4.x/
|
|
40
|
+
For modern Nuxt projects, we recommend using [TypeScript project references](/docs/4.x/directory-structure/tsconfig) instead of directly extending `.nuxt/tsconfig.json`.
|
|
41
41
|
::
|
|
42
42
|
|
|
43
43
|
::note
|
|
@@ -113,7 +113,7 @@ export default <Plugin> function (ctx, inject) {}
|
|
|
113
113
|
While this example is valid, Nuxt 3 introduces a new defineNuxtPlugin function that has a slightly different signature.
|
|
114
114
|
::
|
|
115
115
|
|
|
116
|
-
:ReadMore{link="/docs/4.x/
|
|
116
|
+
:ReadMore{link="/docs/4.x/directory-structure/app/plugins#creating-plugins"}
|
|
117
117
|
|
|
118
118
|
### `useRouter` and `useRoute`
|
|
119
119
|
|
|
@@ -7,7 +7,7 @@ description: 'Learn how to migrate from Nuxt 2 to Nuxt Bridge new plugins and mi
|
|
|
7
7
|
|
|
8
8
|
You can now migrate to the Nuxt 3 plugins API, which is slightly different in format from Nuxt 2.
|
|
9
9
|
|
|
10
|
-
Plugins now take only one argument (`nuxtApp`). You can find out more in [the docs](/docs/4.x/
|
|
10
|
+
Plugins now take only one argument (`nuxtApp`). You can find out more in [the docs](/docs/4.x/directory-structure/app/plugins).
|
|
11
11
|
|
|
12
12
|
```ts [app/plugins/hello.ts]
|
|
13
13
|
export default defineNuxtPlugin((nuxtApp) => {
|
|
@@ -28,7 +28,7 @@ Although a compatibility interface is provided via `nuxtApp.vueApp` you should a
|
|
|
28
28
|
|
|
29
29
|
You can now migrate to the Nuxt 3 middleware API, which is slightly different in format from Nuxt 2.
|
|
30
30
|
|
|
31
|
-
Middleware now take only two argument (`to`, `from`). You can find out more in [the docs](/docs/4.x/
|
|
31
|
+
Middleware now take only two argument (`to`, `from`). You can find out more in [the docs](/docs/4.x/directory-structure/app/middleware).
|
|
32
32
|
|
|
33
33
|
```ts twoslash
|
|
34
34
|
export default defineNuxtRouteMiddleware((to) => {
|
package/7.migration/11.server.md
CHANGED
|
@@ -13,5 +13,5 @@ In a built Nuxt 3 application, there is no runtime Nuxt dependency. That means y
|
|
|
13
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
|
-
:read-more{to="/docs/4.x/
|
|
16
|
+
:read-more{to="/docs/4.x/directory-structure/server"}
|
|
17
17
|
:read-more{to="/docs/4.x/guide/going-further/hooks#server-hooks-runtime"}
|
|
@@ -140,7 +140,7 @@ If you are a module author, you can check out [more information about module com
|
|
|
140
140
|
|
|
141
141
|
The `static/` (for storing static assets) has been renamed to `public/`. You can either rename your `static` directory to `public`, or keep the name by setting `dir.public` in your `nuxt.config`.
|
|
142
142
|
|
|
143
|
-
:read-more{to="/docs/4.x/
|
|
143
|
+
:read-more{to="/docs/4.x/directory-structure/public"}
|
|
144
144
|
|
|
145
145
|
## TypeScript
|
|
146
146
|
|
|
@@ -227,7 +227,7 @@ export const useMainStore = defineStore('main', {
|
|
|
227
227
|
})
|
|
228
228
|
```
|
|
229
229
|
|
|
230
|
-
Create a [plugin](/docs/4.x/
|
|
230
|
+
Create a [plugin](/docs/4.x/directory-structure/app/plugins) file to globalize your store:
|
|
231
231
|
|
|
232
232
|
```ts [app/plugins/pinia.ts]
|
|
233
233
|
import { useMainStore } from '~/store'
|
|
@@ -17,7 +17,7 @@ Explore Nuxt 3 compatible modules.
|
|
|
17
17
|
|
|
18
18
|
Nuxt 3 plugins are **not** fully backward compatible with Nuxt 2.
|
|
19
19
|
|
|
20
|
-
:read-more{to="/docs/4.x/
|
|
20
|
+
:read-more{to="/docs/4.x/directory-structure/app/plugins"}
|
|
21
21
|
|
|
22
22
|
### Vue Compatibility
|
|
23
23
|
|
|
@@ -11,7 +11,7 @@ In the rest of the migration documentation, you will notice that key Nuxt and Vu
|
|
|
11
11
|
|
|
12
12
|
## Migration
|
|
13
13
|
|
|
14
|
-
1. If you have been using `@nuxt/components` in Nuxt 2, you can remove `components: true` in your `nuxt.config`. If you had a more complex setup, then note that the component options have changed somewhat. See the [components documentation](/docs/4.x/
|
|
14
|
+
1. If you have been using `@nuxt/components` in Nuxt 2, you can remove `components: true` in your `nuxt.config`. If you had a more complex setup, then note that the component options have changed somewhat. See the [components documentation](/docs/4.x/directory-structure/app/components) for more information.
|
|
15
15
|
|
|
16
16
|
::tip
|
|
17
17
|
You can look at `.nuxt/types/components.d.ts` and `.nuxt/types/imports.d.ts` to see how Nuxt has resolved your components and composable auto-imports.
|
|
@@ -31,7 +31,7 @@ export default defineNuxtPlugin((nuxtApp) => {
|
|
|
31
31
|
|
|
32
32
|
::
|
|
33
33
|
|
|
34
|
-
:read-more{to="/docs/4.x/
|
|
34
|
+
:read-more{to="/docs/4.x/directory-structure/app/plugins"}
|
|
35
35
|
|
|
36
36
|
::read-more{to="/docs/4.x/api/composables/use-nuxt-app"}
|
|
37
37
|
Read more about the format of `nuxtApp`.
|
|
@@ -72,7 +72,7 @@ Much like Nuxt 2, route middleware placed in your `~/middleware` folder is autom
|
|
|
72
72
|
|
|
73
73
|
`navigateTo` is one of a number of route helper functions.
|
|
74
74
|
|
|
75
|
-
:read-more{to="/docs/4.x/
|
|
75
|
+
:read-more{to="/docs/4.x/directory-structure/app/middleware"}
|
|
76
76
|
|
|
77
77
|
### Migration
|
|
78
78
|
|
|
@@ -13,19 +13,19 @@ If you don't have an `app.vue` file in your source directory, Nuxt will use its
|
|
|
13
13
|
|
|
14
14
|
This file is a great place to put any custom code that needs to be run once when your app starts up, as well as any components that are present on every page of your app. For example, if you only have one layout, you can move this to `app.vue` instead.
|
|
15
15
|
|
|
16
|
-
:read-more{to="/docs/4.x/
|
|
16
|
+
:read-more{to="/docs/4.x/directory-structure/app/app"}
|
|
17
17
|
|
|
18
18
|
:link-example{to="/docs/4.x/examples/hello-world"}
|
|
19
19
|
|
|
20
20
|
### Migration
|
|
21
21
|
|
|
22
|
-
Consider creating an `app.vue` file and including any logic that needs to run once at the top-level of your app. You can check out [an example here](/docs/4.x/
|
|
22
|
+
Consider creating an `app.vue` file and including any logic that needs to run once at the top-level of your app. You can check out [an example here](/docs/4.x/directory-structure/app/app).
|
|
23
23
|
|
|
24
24
|
## Layouts
|
|
25
25
|
|
|
26
26
|
If you are using layouts in your app for multiple pages, there is only a slight change required.
|
|
27
27
|
|
|
28
|
-
In Nuxt 2, the `<Nuxt>` component is used within a layout to render the current page. In Nuxt 3, layouts use slots instead, so you will have to replace that component with a `<slot />`. This also allows advanced use cases with named and scoped slots. [Read more about layouts](/docs/4.x/
|
|
28
|
+
In Nuxt 2, the `<Nuxt>` component is used within a layout to render the current page. In Nuxt 3, layouts use slots instead, so you will have to replace that component with a `<slot />`. This also allows advanced use cases with named and scoped slots. [Read more about layouts](/docs/4.x/directory-structure/app/layouts).
|
|
29
29
|
|
|
30
30
|
You will also need to change how you define the layout used by a page using the `definePageMeta` compiler macro. Layouts will be kebab-cased. So `app/layouts/customLayout.vue` becomes `custom-layout` when referenced in your page.
|
|
31
31
|
|
|
@@ -54,7 +54,7 @@ You will also need to change how you define the layout used by a page using the
|
|
|
54
54
|
- }
|
|
55
55
|
</script>
|
|
56
56
|
```
|
|
57
|
-
3. Move `~/layouts/_error.vue` to `~/error.vue`. See [the error handling docs](/docs/4.x/getting-started/error-handling). If you want to ensure that this page uses a layout, you can use [`<NuxtLayout>`](/docs/4.x/
|
|
57
|
+
3. Move `~/layouts/_error.vue` to `~/error.vue`. See [the error handling docs](/docs/4.x/getting-started/error-handling). If you want to ensure that this page uses a layout, you can use [`<NuxtLayout>`](/docs/4.x/directory-structure/app/layouts) directly within `error.vue`:
|
|
58
58
|
```vue [error.vue]
|
|
59
59
|
<template>
|
|
60
60
|
<div>
|
|
@@ -67,7 +67,7 @@ You will also need to change how you define the layout used by a page using the
|
|
|
67
67
|
|
|
68
68
|
## Pages
|
|
69
69
|
|
|
70
|
-
Nuxt 3 ships with an optional `vue-router` integration triggered by the existence of a [`app/pages/`](/docs/4.x/
|
|
70
|
+
Nuxt 3 ships with an optional `vue-router` integration triggered by the existence of a [`app/pages/`](/docs/4.x/directory-structure/app/pages) directory in your source directory. If you only have a single page, you may consider instead moving it to `app.vue` for a lighter build.
|
|
71
71
|
|
|
72
72
|
### Dynamic Routes
|
|
73
73
|
|
|
@@ -84,7 +84,7 @@ In Nuxt 2, you will have defined any nested routes (with parent and child compon
|
|
|
84
84
|
|
|
85
85
|
If you were passing a custom page key or keep-alive props to `<Nuxt>`, you will now use `definePageMeta` to set these options.
|
|
86
86
|
|
|
87
|
-
:read-more{to="/docs/4.x/
|
|
87
|
+
:read-more{to="/docs/4.x/directory-structure/app/pages#special-metadata"}
|
|
88
88
|
|
|
89
89
|
### Page and Layout Transitions
|
|
90
90
|
|