@nuxt/docs-nightly 4.3.0-29356103.2f7957ac → 4.3.0-29430616.754c35a4
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/02.installation.md +4 -6
- 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 +8 -8
- package/1.getting-started/06.styling.md +15 -15
- package/1.getting-started/07.routing.md +10 -6
- package/1.getting-started/08.seo-meta.md +3 -3
- package/1.getting-started/09.transitions.md +10 -10
- package/1.getting-started/10.data-fetching.md +16 -16
- package/1.getting-started/11.state-management.md +3 -3
- package/1.getting-started/12.error-handling.md +6 -6
- package/1.getting-started/13.server.md +6 -6
- package/1.getting-started/14.layers.md +32 -13
- package/1.getting-started/16.deployment.md +1 -1
- package/1.getting-started/17.testing.md +36 -5
- package/1.getting-started/18.upgrade.md +43 -35
- 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 +6 -6
- 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 +5 -5
- package/{2.guide/1.directory-structure → 2.directory-structure}/1.app/1.pages.md +17 -17
- package/{2.guide/1.directory-structure → 2.directory-structure}/1.app/1.plugins.md +3 -7
- 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 +2 -2
- package/{2.guide/1.directory-structure → 2.directory-structure}/1.node_modules.md +2 -2
- package/{2.guide/1.directory-structure → 2.directory-structure}/1.public.md +1 -1
- package/{2.guide/1.directory-structure → 2.directory-structure}/1.server.md +7 -7
- 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/3.tsconfig.md +69 -0
- package/2.directory-structure/index.md +61 -0
- package/{2.guide → 3.guide}/0.index.md +10 -7
- package/{2.guide/2.concepts/3.rendering.md → 3.guide/1.concepts/1.rendering.md} +4 -30
- package/{2.guide/2.concepts/2.vuejs-development.md → 3.guide/1.concepts/10.vuejs-development.md} +7 -6
- 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} +7 -7
- 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 +2 -2
- package/{2.guide/2.concepts → 3.guide/1.concepts}/7.esm.md +3 -2
- package/{2.guide/2.concepts → 3.guide/1.concepts}/8.typescript.md +15 -38
- package/{2.guide/2.concepts → 3.guide/1.concepts}/9.code-style.md +1 -1
- package/{2.guide/5.best-practices → 3.guide/2.best-practices}/hydration.md +1 -1
- 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/3.guide/4.modules/.navigation.yml +3 -0
- package/3.guide/4.modules/1.getting-started.md +103 -0
- package/3.guide/4.modules/2.module-anatomy.md +138 -0
- package/3.guide/4.modules/3.recipes-basics.md +299 -0
- package/3.guide/4.modules/4.recipes-advanced.md +231 -0
- package/3.guide/4.modules/5.testing.md +76 -0
- package/3.guide/4.modules/6.best-practices.md +104 -0
- package/3.guide/4.modules/7.ecosystem.md +32 -0
- package/3.guide/4.modules/index.md +36 -0
- package/{2.guide/4.recipes → 3.guide/5.recipes}/1.custom-routing.md +5 -5
- package/{2.guide/4.recipes → 3.guide/5.recipes}/2.vite-plugin.md +1 -1
- package/{2.guide/4.recipes → 3.guide/5.recipes}/3.custom-usefetch.md +1 -1
- package/{2.guide/4.recipes → 3.guide/5.recipes}/4.sessions-and-authentication.md +1 -1
- package/{2.guide/3.going-further → 3.guide/6.going-further}/1.events.md +2 -3
- package/{2.guide/3.going-further → 3.guide/6.going-further}/1.experimental-features.md +10 -10
- package/{2.guide/3.going-further → 3.guide/6.going-further}/1.features.md +1 -1
- package/{2.guide/3.going-further → 3.guide/6.going-further}/1.internals.md +5 -4
- package/{2.guide/3.going-further → 3.guide/6.going-further}/10.runtime-config.md +2 -2
- package/{2.guide/3.going-further → 3.guide/6.going-further}/2.hooks.md +3 -3
- package/{2.guide/3.going-further → 3.guide/6.going-further}/4.kit.md +1 -1
- package/{2.guide/3.going-further → 3.guide/6.going-further}/6.nuxt-app.md +5 -5
- package/{2.guide/3.going-further → 3.guide/6.going-further}/7.layers.md +42 -25
- package/{2.guide/3.going-further → 3.guide/6.going-further}/9.debugging.md +1 -1
- package/{3.api → 4.api}/1.components/10.nuxt-picture.md +1 -1
- package/{3.api → 4.api}/1.components/11.teleports.md +1 -1
- 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 +3 -3
- package/{3.api → 4.api}/1.components/3.nuxt-layout.md +5 -5
- package/{3.api → 4.api}/1.components/4.nuxt-link.md +11 -11
- package/{3.api → 4.api}/1.components/5.nuxt-loading-indicator.md +1 -1
- package/{3.api → 4.api}/1.components/6.nuxt-error-boundary.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/{3.api → 4.api}/2.composables/use-async-data.md +76 -13
- package/4.api/2.composables/use-cookie.md +183 -0
- package/{3.api → 4.api}/2.composables/use-fetch.md +33 -33
- package/{3.api → 4.api}/2.composables/use-head-safe.md +37 -20
- package/4.api/2.composables/use-head.md +184 -0
- package/{3.api → 4.api}/2.composables/use-hydration.md +24 -18
- package/4.api/2.composables/use-lazy-async-data.md +96 -0
- package/4.api/2.composables/use-lazy-fetch.md +111 -0
- package/{3.api → 4.api}/2.composables/use-nuxt-app.md +7 -7
- package/{3.api → 4.api}/2.composables/use-nuxt-data.md +1 -1
- package/{3.api → 4.api}/2.composables/use-request-fetch.md +1 -1
- 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 +2 -2
- package/4.api/2.composables/use-router.md +94 -0
- package/{3.api → 4.api}/2.composables/use-runtime-config.md +1 -1
- package/{3.api → 4.api}/2.composables/use-runtime-hook.md +1 -1
- package/{3.api → 4.api}/2.composables/use-state.md +1 -1
- package/{3.api → 4.api}/3.utils/$fetch.md +1 -1
- package/{3.api → 4.api}/3.utils/abort-navigation.md +3 -3
- 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-lazy-hydration-component.md +4 -4
- package/{3.api → 4.api}/3.utils/define-nuxt-component.md +1 -1
- package/4.api/3.utils/define-nuxt-plugin.md +102 -0
- package/{3.api → 4.api}/3.utils/define-nuxt-route-middleware.md +2 -2
- package/{3.api → 4.api}/3.utils/define-page-meta.md +14 -14
- package/{3.api → 4.api}/3.utils/navigate-to.md +15 -15
- package/{3.api → 4.api}/3.utils/on-before-route-leave.md +1 -1
- package/{3.api → 4.api}/3.utils/on-before-route-update.md +1 -1
- package/{3.api → 4.api}/3.utils/refresh-cookie.md +1 -3
- package/{3.api → 4.api}/3.utils/update-app-config.md +2 -2
- package/{3.api → 4.api}/4.commands/add.md +11 -11
- 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 +18 -18
- 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 +21 -21
- 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 +29 -28
- package/5.community/3.reporting-bugs.md +1 -1
- package/5.community/4.contribution.md +4 -4
- package/5.community/5.framework-contribution.md +8 -8
- 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 +5 -5
- package/7.migration/20.module-authors.md +3 -3
- 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/README.md +1 -1
- package/package.json +1 -1
- package/2.guide/1.directory-structure/3.tsconfig.md +0 -38
- package/2.guide/3.going-further/3.modules.md +0 -901
- package/3.api/2.composables/use-cookie.md +0 -183
- package/3.api/2.composables/use-head.md +0 -69
- package/3.api/2.composables/use-lazy-async-data.md +0 -47
- package/3.api/2.composables/use-lazy-fetch.md +0 -55
- package/3.api/2.composables/use-router.md +0 -94
- package/3.api/3.utils/define-nuxt-plugin.md +0 -102
- 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}/2.gitignore.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/5.best-practices → 3.guide/2.best-practices}/.navigation.yml +0 -0
- /package/{2.guide/5.best-practices → 3.guide/2.best-practices}/plugins.md +0 -0
- /package/{2.guide/4.recipes → 3.guide/5.recipes}/.navigation.yml +0 -0
- /package/{2.guide/3.going-further → 3.guide/6.going-further}/.navigation.yml +0 -0
- /package/{2.guide/3.going-further → 3.guide/6.going-further}/11.nightly-release-channel.md +0 -0
- /package/{2.guide/3.going-further → 3.guide/6.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/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-error.md +0 -0
- /package/{3.api → 4.api}/2.composables/use-loading-indicator.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-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-seo-meta.md +0 -0
- /package/{3.api → 4.api}/2.composables/use-server-seo-meta.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-route-rules.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
|
@@ -58,16 +58,16 @@ function addImports (imports: Import | Import[]): void
|
|
|
58
58
|
|
|
59
59
|
`imports`: An object or an array of objects with the following properties:
|
|
60
60
|
|
|
61
|
-
| Property
|
|
62
|
-
|
|
63
|
-
| `name`
|
|
64
|
-
| `from`
|
|
65
|
-
| `priority`
|
|
66
|
-
| `disabled`
|
|
67
|
-
| `meta`
|
|
68
|
-
| `type`
|
|
69
|
-
| `typeFrom`
|
|
70
|
-
| `as`
|
|
61
|
+
| Property | Type | Required | Description |
|
|
62
|
+
|------------|-----------------------|----------|-----------------------------------------------------------------------------------------------------------------|
|
|
63
|
+
| `name` | `string` | `true` | Import name to be detected. |
|
|
64
|
+
| `from` | `string` | `true` | Module specifier to import from. |
|
|
65
|
+
| `priority` | `number` | `false` | Priority of the import; if multiple imports have the same name, the one with the highest priority will be used. |
|
|
66
|
+
| `disabled` | `boolean` | `false` | If this import is disabled. |
|
|
67
|
+
| `meta` | `Record<string, any>` | `false` | Metadata of the import. |
|
|
68
|
+
| `type` | `boolean` | `false` | If this import is a pure type import. |
|
|
69
|
+
| `typeFrom` | `string` | `false` | Use this as the `from` value when generating type declarations. |
|
|
70
|
+
| `as` | `string` | `false` | Import as this name. |
|
|
71
71
|
|
|
72
72
|
## `addImportsDir`
|
|
73
73
|
|
|
@@ -98,10 +98,10 @@ function addImportsDir (dirs: string | string[], options?: { prepend?: boolean }
|
|
|
98
98
|
|
|
99
99
|
### Parameters
|
|
100
100
|
|
|
101
|
-
| Property
|
|
102
|
-
|
|
103
|
-
| `dirs`
|
|
104
|
-
| `options`
|
|
101
|
+
| Property | Type | Required | Description |
|
|
102
|
+
|-----------|------------------------------------|----------|---------------------------------------------------------------------------------------------------------------------|
|
|
103
|
+
| `dirs` | `string \| string[]`{lang="ts"} | `true` | A string or an array of strings with the path to the directory to import from. |
|
|
104
|
+
| `options` | `{ prepend?: boolean }`{lang="ts"} | `false` | Options to pass to the import. If `prepend` is set to `true`, the imports will be prepended to the list of imports. |
|
|
105
105
|
|
|
106
106
|
## `addImportsSources`
|
|
107
107
|
|
|
@@ -138,7 +138,7 @@ function addImportsSources (importSources: ImportSource | ImportSource[]): void
|
|
|
138
138
|
|
|
139
139
|
**importSources**: An object or an array of objects with the following properties:
|
|
140
140
|
|
|
141
|
-
| Property
|
|
142
|
-
|
|
143
|
-
| `from`
|
|
144
|
-
| `imports`
|
|
141
|
+
| Property | Type | Required | Description |
|
|
142
|
+
|-----------|---------------------------------------------|----------|------------------------------------------------------------------------------------------------|
|
|
143
|
+
| `from` | `string` | `true` | Module specifier to import from. |
|
|
144
|
+
| `imports` | `PresetImport \| ImportSource[]`{lang="ts"} | `true` | An object or an array of objects, which can be import names, import objects or import sources. |
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: "Components"
|
|
3
|
+
description: Nuxt Kit provides a set of utilities to help you work with components. You can register components globally or locally, and also add directories to be scanned for components.
|
|
4
|
+
links:
|
|
5
|
+
- label: Source
|
|
6
|
+
icon: i-simple-icons-github
|
|
7
|
+
to: https://github.com/nuxt/nuxt/blob/main/packages/kit/src/components.ts
|
|
8
|
+
size: xs
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
Components are the building blocks of your Nuxt application. They are reusable Vue instances that can be used to create a user interface. In Nuxt, components from the components directory are automatically imported by default. However, if you need to import components from an alternative directory or wish to selectively import them as needed, `@nuxt/kit` provides the `addComponentsDir` and `addComponent` methods. These utils allow you to customize the component configuration to better suit your needs.
|
|
12
|
+
|
|
13
|
+
::tip{icon="i-lucide-video" to="https://vueschool.io/lessons/injecting-components-and-component-directories?friend=nuxt" target="_blank"}
|
|
14
|
+
Watch Vue School video about injecting components.
|
|
15
|
+
::
|
|
16
|
+
|
|
17
|
+
## `addComponentsDir`
|
|
18
|
+
|
|
19
|
+
Register a directory to be scanned for components and imported only when used. Keep in mind, that this does not register components globally, until you specify `global: true` option.
|
|
20
|
+
|
|
21
|
+
### Usage
|
|
22
|
+
|
|
23
|
+
```ts
|
|
24
|
+
export default defineNuxtModule({
|
|
25
|
+
meta: {
|
|
26
|
+
name: '@nuxt/ui',
|
|
27
|
+
configKey: 'ui',
|
|
28
|
+
},
|
|
29
|
+
setup () {
|
|
30
|
+
addComponentsDir({
|
|
31
|
+
path: resolve('./runtime/components'),
|
|
32
|
+
prefix: 'U',
|
|
33
|
+
pathPrefix: false,
|
|
34
|
+
})
|
|
35
|
+
},
|
|
36
|
+
})
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### Type
|
|
40
|
+
|
|
41
|
+
```ts
|
|
42
|
+
function addComponentsDir (dir: ComponentsDir, opts: { prepend?: boolean } = {}): void
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### Parameters
|
|
46
|
+
|
|
47
|
+
`dir` An object with the following properties:
|
|
48
|
+
|
|
49
|
+
| Property | Type | Required | Description |
|
|
50
|
+
|-------------------|------------------------------------------------------------------------------------------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
51
|
+
| `path` | `string` | `true` | Path (absolute or relative) to the directory containing your components. You can use Nuxt aliases (~ or @) to refer to directories inside project or directly use an npm package path similar to require. |
|
|
52
|
+
| `pattern` | `string \| string[]`{lang="ts"} | `false` | Accept Pattern that will be run against specified path. |
|
|
53
|
+
| `ignore` | `string[]` | `false` | Ignore patterns that will be run against specified path. |
|
|
54
|
+
| `prefix` | `string` | `false` | Prefix all matched components with this string. |
|
|
55
|
+
| `pathPrefix` | `boolean` | `false` | Prefix component name by its path. |
|
|
56
|
+
| `prefetch` | `boolean` | `false` | These properties (prefetch/preload) are used in production to configure how components with Lazy prefix are handled by webpack via its magic comments. Learn more on [webpack documentation](https://webpack.js.org/api/module-methods/#magic-comments) |
|
|
57
|
+
| `preload` | `boolean` | `false` | These properties (prefetch/preload) are used in production to configure how components with Lazy prefix are handled by webpack via its magic comments. Learn more on [webpack documentation](https://webpack.js.org/api/module-methods/#magic-comments) |
|
|
58
|
+
| `isAsync` | `boolean` | `false` | This flag indicates, component should be loaded async (with a separate chunk) regardless of using Lazy prefix or not. |
|
|
59
|
+
| `extendComponent` | `(component: Component) => Promise<Component \| void> \| (Component \| void)`{lang="ts"} | `false` | A function that will be called for each component found in the directory. It accepts a component object and should return a component object or a promise that resolves to a component object. |
|
|
60
|
+
| `global` | `boolean` | `false` | If enabled, registers components to be globally available. |
|
|
61
|
+
| `island` | `boolean` | `false` | If enabled, registers components as islands. You can read more about islands in [`<NuxtIsland/>`](/docs/4.x/api/components/nuxt-island) component description. |
|
|
62
|
+
| `watch` | `boolean` | `false` | Watch specified path for changes, including file additions and file deletions. |
|
|
63
|
+
| `extensions` | `string[]` | `false` | Extensions supported by Nuxt builder. |
|
|
64
|
+
| `transpile` | `'auto' \| boolean`{lang="ts"} | `false` | Transpile specified path using build.transpile. If set to `'auto'`, it will set `transpile: true` if `node_modules/` is in path. |
|
|
65
|
+
|
|
66
|
+
`opts`
|
|
67
|
+
|
|
68
|
+
| Property | Type | Required | Description |
|
|
69
|
+
|-----------|-----------|----------|------------------------------------------------------------------------------------------------------|
|
|
70
|
+
| `prepend` | `boolean` | `false` | If set to `true`, the directory will be prepended to the array with `unshift()` instead of `push()`. |
|
|
71
|
+
|
|
72
|
+
## `addComponent`
|
|
73
|
+
|
|
74
|
+
Register a component to be automatically imported.
|
|
75
|
+
|
|
76
|
+
### Usage
|
|
77
|
+
|
|
78
|
+
```ts
|
|
79
|
+
import { addComponent, createResolver, defineNuxtModule } from '@nuxt/kit'
|
|
80
|
+
|
|
81
|
+
export default defineNuxtModule({
|
|
82
|
+
meta: {
|
|
83
|
+
name: '@nuxt/image',
|
|
84
|
+
configKey: 'image',
|
|
85
|
+
},
|
|
86
|
+
setup () {
|
|
87
|
+
const resolver = createResolver(import.meta.url)
|
|
88
|
+
|
|
89
|
+
addComponent({
|
|
90
|
+
name: 'NuxtImg',
|
|
91
|
+
filePath: resolver.resolve('./runtime/components/NuxtImg.vue'),
|
|
92
|
+
})
|
|
93
|
+
|
|
94
|
+
addComponent({
|
|
95
|
+
name: 'NuxtPicture',
|
|
96
|
+
filePath: resolver.resolve('./runtime/components/NuxtPicture.vue'),
|
|
97
|
+
})
|
|
98
|
+
},
|
|
99
|
+
})
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
### Type
|
|
103
|
+
|
|
104
|
+
```ts
|
|
105
|
+
function addComponent (options: AddComponentOptions): void
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### Parameters
|
|
109
|
+
|
|
110
|
+
`options`: An object with the following properties:
|
|
111
|
+
|
|
112
|
+
| Property | Type | Required | Description |
|
|
113
|
+
|-------------------|--------------------------------------------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
114
|
+
| `name` | `string` | `true` | Component name. |
|
|
115
|
+
| `filePath` | `string` | `true` | Path to the component. |
|
|
116
|
+
| `declarationPath` | `string` | `false` | Path to component's declaration file. It is used to generate components' [type templates](/docs/4.x/api/kit/templates#addtypetemplate); if not provided, `filePath` is used instead. |
|
|
117
|
+
| `pascalName` | `string` | `false` | Pascal case component name. If not provided, it will be generated from the component name. |
|
|
118
|
+
| `kebabName` | `string` | `false` | Kebab case component name. If not provided, it will be generated from the component name. |
|
|
119
|
+
| `export` | `string` | `false` | Specify named or default export. If not provided, it will be set to `'default'`. |
|
|
120
|
+
| `shortPath` | `string` | `false` | Short path to the component. If not provided, it will be generated from the component path. |
|
|
121
|
+
| `chunkName` | `string` | `false` | Chunk name for the component. If not provided, it will be generated from the component name. |
|
|
122
|
+
| `prefetch` | `boolean` | `false` | These properties (prefetch/preload) are used in production to configure how components with Lazy prefix are handled by webpack via its magic comments. Learn more on [webpack documentation](https://webpack.js.org/api/module-methods/#magic-comments) |
|
|
123
|
+
| `preload` | `boolean` | `false` | These properties (prefetch/preload) are used in production to configure how components with Lazy prefix are handled by webpack via its magic comments. Learn more on [webpack documentation](https://webpack.js.org/api/module-methods/#magic-comments) |
|
|
124
|
+
| `global` | `boolean` | `false` | If enabled, registers component to be globally available. |
|
|
125
|
+
| `island` | `boolean` | `false` | If enabled, registers component as island. You can read more about islands in [`<NuxtIsland/>`](/docs/4.x/api/components/nuxt-island) component description. |
|
|
126
|
+
| `mode` | `'client' \| 'server' \| 'all'`{lang="ts"} | `false` | This options indicates if component should render on client, server or both. By default, it will render on both client and server. |
|
|
127
|
+
| `priority` | `number` | `false` | Priority of the component, if multiple components have the same name, the one with the highest priority will be used. |
|
|
128
|
+
|
|
129
|
+
### Examples
|
|
130
|
+
|
|
131
|
+
If you want to auto-import a component from an npm package, and the component is a named export (rather than the default), you can use the `export` option to specify it.
|
|
132
|
+
|
|
133
|
+
```ts
|
|
134
|
+
import { addComponent, defineNuxtModule } from '@nuxt/kit'
|
|
135
|
+
|
|
136
|
+
export default defineNuxtModule({
|
|
137
|
+
setup () {
|
|
138
|
+
// import { MyComponent as MyAutoImportedComponent } from 'my-npm-package'
|
|
139
|
+
addComponent({
|
|
140
|
+
name: 'MyAutoImportedComponent',
|
|
141
|
+
export: 'MyComponent',
|
|
142
|
+
filePath: 'my-npm-package',
|
|
143
|
+
})
|
|
144
|
+
},
|
|
145
|
+
})
|
|
146
|
+
```
|
|
@@ -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 |
|
|
@@ -202,7 +202,7 @@ This can be overridden with `definePageMeta` on an individual page. Only JSON-se
|
|
|
202
202
|
- **Type**: `boolean`
|
|
203
203
|
- **Default:** `false`
|
|
204
204
|
|
|
205
|
-
**See**: [Vue KeepAlive](https://vuejs.org/api/built-in-components
|
|
205
|
+
**See**: [Vue KeepAlive](https://vuejs.org/api/built-in-components#keepalive)
|
|
206
206
|
|
|
207
207
|
### `layoutTransition`
|
|
208
208
|
|
|
@@ -213,7 +213,7 @@ This can be overridden with `definePageMeta` on an individual page. Only JSON-se
|
|
|
213
213
|
- **Type**: `boolean`
|
|
214
214
|
- **Default:** `false`
|
|
215
215
|
|
|
216
|
-
**See**: [Vue Transition docs](https://vuejs.org/api/built-in-components
|
|
216
|
+
**See**: [Vue Transition docs](https://vuejs.org/api/built-in-components#transition)
|
|
217
217
|
|
|
218
218
|
### `pageTransition`
|
|
219
219
|
|
|
@@ -224,7 +224,7 @@ This can be overridden with `definePageMeta` on an individual page. Only JSON-se
|
|
|
224
224
|
- **Type**: `boolean`
|
|
225
225
|
- **Default:** `false`
|
|
226
226
|
|
|
227
|
-
**See**: [Vue Transition docs](https://vuejs.org/api/built-in-components
|
|
227
|
+
**See**: [Vue Transition docs](https://vuejs.org/api/built-in-components#transition)
|
|
228
228
|
|
|
229
229
|
### `rootAttrs`
|
|
230
230
|
|
|
@@ -339,7 +339,7 @@ Shared build configuration.
|
|
|
339
339
|
|
|
340
340
|
Nuxt allows visualizing your bundles and how to optimize them.
|
|
341
341
|
|
|
342
|
-
Set to `true` to enable bundle analysis, or pass an object with options: [for webpack](https://github.com/webpack
|
|
342
|
+
Set to `true` to enable bundle analysis, or pass an object with options: [for webpack](https://github.com/webpack/webpack-bundle-analyzer#options-for-plugin) or [for vite](https://github.com/btd/rollup-plugin-visualizer#options).
|
|
343
343
|
|
|
344
344
|
- **Type**: `object`
|
|
345
345
|
- **Default**
|
|
@@ -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
|
|
@@ -1217,7 +1218,7 @@ Additional router options passed to `vue-router`. On top of the options for `vue
|
|
|
1217
1218
|
For more control, you can use an `router.options.ts` file.
|
|
1218
1219
|
::
|
|
1219
1220
|
|
|
1220
|
-
**See**: [Vue Router documentation](https://router.vuejs.org/api/interfaces/routeroptions
|
|
1221
|
+
**See**: [Vue Router documentation](https://router.vuejs.org/api/interfaces/routeroptions)
|
|
1221
1222
|
|
|
1222
1223
|
#### `hashMode`
|
|
1223
1224
|
|
|
@@ -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.
|
|
@@ -1586,7 +1587,7 @@ export default defineNuxtConfig({
|
|
|
1586
1587
|
|
|
1587
1588
|
Configuration that will be passed directly to Vite.
|
|
1588
1589
|
|
|
1589
|
-
**See**: [Vite configuration docs](https://vite.dev/config) for more information.
|
|
1590
|
+
**See**: [Vite configuration docs](https://vite.dev/config/) for more information.
|
|
1590
1591
|
Please note that not all vite options are supported in Nuxt.
|
|
1591
1592
|
|
|
1592
1593
|
### `build`
|
|
@@ -1785,13 +1786,13 @@ Vue.js config
|
|
|
1785
1786
|
|
|
1786
1787
|
Options for the Vue compiler that will be passed at build time.
|
|
1787
1788
|
|
|
1788
|
-
**See**: [Vue documentation](https://vuejs.org/api/application
|
|
1789
|
+
**See**: [Vue documentation](https://vuejs.org/api/application#app-config-compileroptions)
|
|
1789
1790
|
|
|
1790
1791
|
### `config`
|
|
1791
1792
|
|
|
1792
|
-
It is possible to pass configure the Vue app globally. Only serializable options may be set in your `nuxt.config`. All other options should be set at runtime in a Nuxt plugin
|
|
1793
|
+
It is possible to pass configure the Vue app globally. Only serializable options may be set in your `nuxt.config`. All other options should be set at runtime in a Nuxt plugin.
|
|
1793
1794
|
|
|
1794
|
-
**See**: [Vue app config documentation](https://vuejs.org/api/application
|
|
1795
|
+
**See**: [Vue app config documentation](https://vuejs.org/api/application#app-config)
|
|
1795
1796
|
|
|
1796
1797
|
### `propsDestructure`
|
|
1797
1798
|
|
|
@@ -1918,7 +1919,7 @@ Hard-replaces `typeof process`, `typeof window` and `typeof document` to tree-sh
|
|
|
1918
1919
|
|
|
1919
1920
|
If you are using webpack, Nuxt uses `webpack-bundle-analyzer` to visualize your bundles and how to optimize them.
|
|
1920
1921
|
|
|
1921
|
-
Set to `true` to enable bundle analysis, or pass an object with options: [for webpack](https://github.com/webpack
|
|
1922
|
+
Set to `true` to enable bundle analysis, or pass an object with options: [for webpack](https://github.com/webpack/webpack-bundle-analyzer#options-for-plugin) or [for vite](https://github.com/btd/rollup-plugin-visualizer#options).
|
|
1922
1923
|
|
|
1923
1924
|
- **Type**: `object`
|
|
1924
1925
|
- **Default**
|
|
@@ -1965,7 +1966,7 @@ Configure [webpack experiments](https://webpack.js.org/configuration/experiments
|
|
|
1965
1966
|
|
|
1966
1967
|
Enables Common CSS Extraction.
|
|
1967
1968
|
|
|
1968
|
-
Using [mini-css-extract-plugin](https://github.com/webpack
|
|
1969
|
+
Using [mini-css-extract-plugin](https://github.com/webpack/mini-css-extract-plugin) under the hood, your CSS will be extracted into separate files, usually one per component. This allows caching your CSS and JavaScript separately.
|
|
1969
1970
|
|
|
1970
1971
|
- **Type**: `boolean`
|
|
1971
1972
|
- **Default:** `true`
|
|
@@ -2067,7 +2068,7 @@ Set to `false` to disable the overlay provided by [FriendlyErrorsWebpackPlugin](
|
|
|
2067
2068
|
|
|
2068
2069
|
### `hotMiddleware`
|
|
2069
2070
|
|
|
2070
|
-
See [webpack-hot-middleware](https://github.com/webpack
|
|
2071
|
+
See [webpack-hot-middleware](https://github.com/webpack/webpack-hot-middleware) for available options.
|
|
2071
2072
|
|
|
2072
2073
|
### `loaders`
|
|
2073
2074
|
|
|
@@ -2075,7 +2076,7 @@ Customize the options of Nuxt's integrated webpack loaders.
|
|
|
2075
2076
|
|
|
2076
2077
|
#### `css`
|
|
2077
2078
|
|
|
2078
|
-
See [css-loader](https://github.com/webpack
|
|
2079
|
+
See [css-loader](https://github.com/webpack/css-loader) for available options.
|
|
2079
2080
|
|
|
2080
2081
|
##### `esModule`
|
|
2081
2082
|
|
|
@@ -2095,7 +2096,7 @@ See [css-loader](https://github.com/webpack-contrib/css-loader) for available op
|
|
|
2095
2096
|
|
|
2096
2097
|
#### `cssModules`
|
|
2097
2098
|
|
|
2098
|
-
See [css-loader](https://github.com/webpack
|
|
2099
|
+
See [css-loader](https://github.com/webpack/css-loader) for available options.
|
|
2099
2100
|
|
|
2100
2101
|
##### `esModule`
|
|
2101
2102
|
|
|
@@ -2133,11 +2134,11 @@ See [css-loader](https://github.com/webpack-contrib/css-loader) for available op
|
|
|
2133
2134
|
}
|
|
2134
2135
|
```
|
|
2135
2136
|
|
|
2136
|
-
**See**: [esbuild loader](https://github.com/
|
|
2137
|
+
**See**: [esbuild loader](https://github.com/privatenumber/esbuild-loader)
|
|
2137
2138
|
|
|
2138
2139
|
#### `file`
|
|
2139
2140
|
|
|
2140
|
-
**See**: [`file-loader` Options](https://github.com/webpack
|
|
2141
|
+
**See**: [`file-loader` Options](https://github.com/webpack/file-loader#options)
|
|
2141
2142
|
|
|
2142
2143
|
**Default**:
|
|
2143
2144
|
```json
|
|
@@ -2156,7 +2157,7 @@ See [css-loader](https://github.com/webpack-contrib/css-loader) for available op
|
|
|
2156
2157
|
|
|
2157
2158
|
#### `fontUrl`
|
|
2158
2159
|
|
|
2159
|
-
**See**: [`file-loader` Options](https://github.com/webpack
|
|
2160
|
+
**See**: [`file-loader` Options](https://github.com/webpack/file-loader#options)
|
|
2160
2161
|
|
|
2161
2162
|
**Default**:
|
|
2162
2163
|
```json
|
|
@@ -2175,7 +2176,7 @@ See [css-loader](https://github.com/webpack-contrib/css-loader) for available op
|
|
|
2175
2176
|
|
|
2176
2177
|
#### `imgUrl`
|
|
2177
2178
|
|
|
2178
|
-
**See**: [`file-loader` Options](https://github.com/webpack
|
|
2179
|
+
**See**: [`file-loader` Options](https://github.com/webpack/file-loader#options)
|
|
2179
2180
|
|
|
2180
2181
|
**Default**:
|
|
2181
2182
|
```json
|
|
@@ -2201,7 +2202,7 @@ See [css-loader](https://github.com/webpack-contrib/css-loader) for available op
|
|
|
2201
2202
|
}
|
|
2202
2203
|
```
|
|
2203
2204
|
|
|
2204
|
-
**See**: [`less-loader` Options](https://github.com/webpack
|
|
2205
|
+
**See**: [`less-loader` Options](https://github.com/webpack/less-loader#options)
|
|
2205
2206
|
|
|
2206
2207
|
#### `pugPlain`
|
|
2207
2208
|
|
|
@@ -2209,7 +2210,7 @@ See [css-loader](https://github.com/webpack-contrib/css-loader) for available op
|
|
|
2209
2210
|
|
|
2210
2211
|
#### `sass`
|
|
2211
2212
|
|
|
2212
|
-
**See**: [`sass-loader` Options](https://github.com/webpack
|
|
2213
|
+
**See**: [`sass-loader` Options](https://github.com/webpack/sass-loader#options)
|
|
2213
2214
|
|
|
2214
2215
|
**Default**:
|
|
2215
2216
|
```json
|
|
@@ -2236,7 +2237,7 @@ See [css-loader](https://github.com/webpack-contrib/css-loader) for available op
|
|
|
2236
2237
|
}
|
|
2237
2238
|
```
|
|
2238
2239
|
|
|
2239
|
-
**See**: [`sass-loader` Options](https://github.com/webpack
|
|
2240
|
+
**See**: [`sass-loader` Options](https://github.com/webpack/sass-loader#options)
|
|
2240
2241
|
|
|
2241
2242
|
#### `stylus`
|
|
2242
2243
|
|
|
@@ -2247,7 +2248,7 @@ See [css-loader](https://github.com/webpack-contrib/css-loader) for available op
|
|
|
2247
2248
|
}
|
|
2248
2249
|
```
|
|
2249
2250
|
|
|
2250
|
-
**See**: [`stylus-loader` Options](https://github.com/webpack
|
|
2251
|
+
**See**: [`stylus-loader` Options](https://github.com/webpack/stylus-loader#options)
|
|
2251
2252
|
|
|
2252
2253
|
#### `vue`
|
|
2253
2254
|
|
|
@@ -2341,7 +2342,7 @@ Defaults to true when `extractCSS` is enabled.
|
|
|
2341
2342
|
- **Type**: `boolean`
|
|
2342
2343
|
- **Default:** `false`
|
|
2343
2344
|
|
|
2344
|
-
**See**: [css-minimizer-webpack-plugin documentation](https://github.com/webpack
|
|
2345
|
+
**See**: [css-minimizer-webpack-plugin documentation](https://github.com/webpack/css-minimizer-webpack-plugin).
|
|
2345
2346
|
|
|
2346
2347
|
### `plugins`
|
|
2347
2348
|
|
|
@@ -2368,7 +2369,7 @@ export default defineNuxtConfig({
|
|
|
2368
2369
|
|
|
2369
2370
|
### `postcss`
|
|
2370
2371
|
|
|
2371
|
-
Customize PostCSS Loader. same options as [`postcss-loader` options](https://github.com/webpack
|
|
2372
|
+
Customize PostCSS Loader. same options as [`postcss-loader` options](https://github.com/webpack/postcss-loader#options)
|
|
2372
2373
|
|
|
2373
2374
|
#### `postcssOptions`
|
|
2374
2375
|
|
|
@@ -39,7 +39,7 @@ If your issue concerns Vue or Vite, please try to reproduce it first with the Vu
|
|
|
39
39
|
|
|
40
40
|
::card-group
|
|
41
41
|
:card{title="Vue SSR on StackBlitz" icon="i-simple-icons-stackblitz" to="https://stackblitz.com/github/nuxt-contrib/vue3-ssr-starter/tree/main?terminal=dev" target="_blank"}
|
|
42
|
-
:card{title="Vue SSR on CodeSandbox" icon="i-simple-icons-codesandbox" to="https://codesandbox.io/
|
|
42
|
+
:card{title="Vue SSR on CodeSandbox" icon="i-simple-icons-codesandbox" to="https://codesandbox.io/p/sandbox/github/nuxt-contrib/vue3-ssr-starter/main" target="_blank"}
|
|
43
43
|
:card{title="Vue SSR Template on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt-contrib/vue3-ssr-starter/generate" target="_blank"}
|
|
44
44
|
::
|
|
45
45
|
|