@nuxt/docs 4.1.1 → 4.1.3

package/3.api/5.kit/4.autoimports.md

@@ -15,7 +15,7 @@ With Nuxt Kit you can also add your own auto-imports. `addImports` and `addImpor
 These utilities are powered by [`unimport`](https://github.com/unjs/unimport), which provides the underlying auto-import mechanism used in Nuxt.
 
 ::note
-These functions are designed for registering your own utils, composables and Vue APIs. For pages, components and plugins, please refer to the specific sections: [Pages](/docs/api/kit/pages), [Components](/docs/api/kit/components), [Plugins](/docs/api/kit/plugins).
+These functions are designed for registering your own utils, composables and Vue APIs. For pages, components and plugins, please refer to the specific sections: [Pages](/docs/4.x/api/kit/pages), [Components](/docs/4.x/api/kit/components), [Plugins](/docs/4.x/api/kit/plugins).
 ::
 
 ::tip{icon="i-lucide-video" to="https://vueschool.io/lessons/expanding-nuxt-s-auto-imports?friend=nuxt" target="_blank"}
@@ -29,22 +29,22 @@ Add imports to the Nuxt application. It makes your imports available in the Nuxt
 ### Usage
 
 ```ts twoslash
-import { defineNuxtModule, addImports } from "@nuxt/kit";
+import { addImports, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup(options, nuxt) {
+  setup (options, nuxt) {
     const names = [
       'useStoryblok',
       'useStoryblokApi',
       'useStoryblokBridge',
       'renderRichText',
-      'RichTextSchema'
+      'RichTextSchema',
     ]
 
-    names.forEach((name) =>
-      addImports({ name, as: name, from: '@storyblok/vue' })
+    names.forEach(name =>
+      addImports({ name, as: name, from: '@storyblok/vue' }),
     )
-  }
+  },
 })
 ```
 
@@ -76,14 +76,14 @@ Add imports from a directory to the Nuxt application. It will automatically impo
 ### Usage
 
 ```ts twoslash
-import { defineNuxtModule, addImportsDir, createResolver } from '@nuxt/kit'
+import { addImportsDir, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   meta: {
     name: '@vueuse/motion',
     configKey: 'motion',
   },
-  setup(options, nuxt) {
+  setup (options, nuxt) {
     const resolver = createResolver(import.meta.url)
     addImportsDir(resolver.resolve('./runtime/composables'))
   },
@@ -110,10 +110,10 @@ Add listed imports to the Nuxt application.
 ### Usage
 
 ```ts twoslash
-import { defineNuxtModule, addImportsSources } from '@nuxt/kit'
+import { addImportsSources, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup() {
+  setup () {
     addImportsSources({
       from: 'h3',
       imports: [
@@ -121,10 +121,10 @@ export default defineNuxtModule({
         'getQuery',
         'getRouterParams',
         'readBody',
-        'sendRedirect'
+        'sendRedirect',
       ],
     })
-  }
+  },
 })
 ```
 

package/3.api/5.kit/5.components.md

@@ -26,13 +26,13 @@ export default defineNuxtModule({
     name: '@nuxt/ui',
     configKey: 'ui',
   },
-  setup() {
+  setup () {
     addComponentsDir({
       path: resolve('./runtime/components'),
       prefix: 'U',
-      pathPrefix: false
+      pathPrefix: false,
     })
-  }
+  },
 })
 ```
 
@@ -53,13 +53,12 @@ function addComponentsDir (dir: ComponentsDir, opts: { prepend?: boolean } = {})
 | `ignore`           | `string[]`                   | `false`  | Ignore patterns that will be run against specified path.                                                        |
 | `prefix`           | `string`                     | `false`  | Prefix all matched components with this string.                                                                |
 | `pathPrefix`       | `boolean`                    | `false`  | Prefix component name by its path.                                                                              |
-| `enabled`          | `boolean`                    | `false`  | Ignore scanning this directory if set to `true`.                                                                |
 | `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) |
 | `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) |
 | `isAsync`          | `boolean`                    | `false`  | This flag indicates, component should be loaded async (with a separate chunk) regardless of using Lazy prefix or not. |
 | `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. |
 | `global`           | `boolean`                    | `false`  | If enabled, registers components to be globally available.                                                      |
-| `island`           | `boolean`                    | `false`  | If enabled, registers components as islands. You can read more about islands in [`<NuxtIsland/>`](/docs/api/components/nuxt-island#nuxtisland) component description. |
+| `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. |
 | `watch`            | `boolean`                    | `false`  | Watch specified path for changes, including file additions and file deletions.                                  |
 | `extensions`       | `string[]`                   | `false`  | Extensions supported by Nuxt builder.                                                                          |
 | `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. |
@@ -77,14 +76,14 @@ Register a component to be automatically imported.
 ### Usage
 
 ```ts
-import { defineNuxtModule, createResolver, addComponent } from '@nuxt/kit'
+import { addComponent, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   meta: {
     name: '@nuxt/image',
     configKey: 'image',
   },
-  async setup() {
+  setup () {
     const resolver = createResolver(import.meta.url)
 
     addComponent({
@@ -122,7 +121,7 @@ function addComponent (options: AddComponentOptions): void
 | `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) |  
 | `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) |
 | `global`           | `boolean`                    | `false`  | If enabled, registers component to be globally available.                                                        |
-| `island`           | `boolean`                    | `false`  | If enabled, registers component as island. You can read more about islands in [`<NuxtIsland/>`](/docs/api/components/nuxt-island#nuxtisland) component description. |
+| `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. |
 | `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. |
 | `priority`         | `number`                     | `false`  | Priority of the component, if multiple components have the same name, the one with the highest priority will be used. |
 

package/3.api/5.kit/6.context.md

@@ -37,7 +37,7 @@ const setupSomeFeature = () => {
 // @errors: 2391
 import type { Nuxt } from '@nuxt/schema'
 // ---cut---
-function useNuxt(): Nuxt
+function useNuxt (): Nuxt
 ```
 
 ### Return Value
@@ -114,7 +114,7 @@ function setupSomething () {
 // @errors: 2391
 import type { Nuxt } from '@nuxt/schema'
 // ---cut---
-function tryUseNuxt(): Nuxt | null
+function tryUseNuxt (): Nuxt | null
 ```
 
 ### Return Value
@@ -156,7 +156,7 @@ interface SiteConfig {
   title?: string
 }
 export const requireSiteConfig = (): SiteConfig => {
- return {}
+  return {}
 }
 // @filename: module.ts
 // ---cut---

package/3.api/5.kit/7.pages.md

@@ -39,7 +39,7 @@ export default defineNuxtModule({
 ### Type
 
 ```ts
-function extendPages(callback: (pages: NuxtPage[]) => void): void
+function extendPages (callback: (pages: NuxtPage[]) => void): void
 ```
 
 ### Parameters
@@ -104,7 +104,7 @@ export default defineNuxtModule({
 ### Type
 
 ```ts
-function extendRouteRules(route: string, rule: NitroRouteConfig, options?: ExtendRouteRulesOptions): void
+function extendRouteRules (route: string, rule: NitroRouteConfig, options?: ExtendRouteRulesOptions): void
 ```
 
 ### Parameters
@@ -113,7 +113,7 @@ function extendRouteRules(route: string, rule: NitroRouteConfig, options?: Exten
 **rule**: A route rule configuration to apply to the matched route.
 
 ::tip
-About route rules configurations, you can get more detail in [Hybrid Rendering > Route Rules](/docs/guide/concepts/rendering#route-rules).
+About route rules configurations, you can get more detail in [Hybrid Rendering > Route Rules](/docs/4.x/guide/concepts/rendering#route-rules).
 ::
 
 **options**: A object to pass to the route configuration. If `override` is set to `true`, it will override the existing route configuration.
@@ -126,10 +126,10 @@ About route rules configurations, you can get more detail in [Hybrid Rendering >
 
 Registers route middlewares to be available for all routes or for specific routes.
 
-Route middlewares can be also defined in plugins via [`addRouteMiddleware`](/docs/api/utils/add-route-middleware) composable.
+Route middlewares can be also defined in plugins via [`addRouteMiddleware`](/docs/4.x/api/utils/add-route-middleware) composable.
 
 ::tip
-Read more about route middlewares in the [Route middleware documentation](/docs/getting-started/routing#route-middleware).
+Read more about route middlewares in the [Route middleware documentation](/docs/4.x/getting-started/routing#route-middleware).
 ::
 
 ::tip{icon="i-lucide-video" to="https://vueschool.io/lessons/adding-route-rules-and-route-middlewares?friend=nuxt" target="_blank"}
@@ -157,7 +157,7 @@ export default defineNuxtModule({
 ```
 
 ```ts twoslash [runtime/auth.ts]
-function isAuthenticated(): boolean { return false }
+function isAuthenticated (): boolean { return false }
 // ---cut---
 export default defineNuxtRouteMiddleware((to, from) => {
   // isAuthenticated() is an example method verifying if a user is authenticated
@@ -172,7 +172,7 @@ export default defineNuxtRouteMiddleware((to, from) => {
 ### Type
 
 ```ts
-function addRouteMiddleware(input: NuxtMiddleware | NuxtMiddleware[], options?: AddRouteMiddlewareOptions): void
+function addRouteMiddleware (input: NuxtMiddleware | NuxtMiddleware[], options?: AddRouteMiddlewareOptions): void
 ```
 
 ### Parameters

package/3.api/5.kit/8.layout.md

@@ -15,7 +15,7 @@ Layouts is used to be a wrapper around your pages. It can be used to wrap your p
 Register template as layout and add it to the layouts.
 
 ::note
-In Nuxt 2 `error` layout can also be registered using this utility. In Nuxt 3+ `error` layout [replaced](/docs/getting-started/error-handling#rendering-an-error-page) with `error.vue` page in project root.
+In Nuxt 2 `error` layout can also be registered using this utility. In Nuxt 3+ `error` layout [replaced](/docs/4.x/getting-started/error-handling#error-page) with `error.vue` page in project root.
 ::
 
 ### Usage
@@ -38,7 +38,7 @@ export default defineNuxtModule({
 ### Type
 
 ```ts
-function addLayout(layout: NuxtTemplate | string, name: string): void
+function addLayout (layout: NuxtTemplate | string, name: string): void
 ```
 
 ### Parameters

package/3.api/5.kit/9.plugins.md

@@ -38,7 +38,7 @@ export default defineNuxtModule({
 ### Type
 
 ```ts
-function addPlugin(plugin: NuxtPlugin | string, options?: AddPluginOptions): NuxtPlugin
+function addPlugin (plugin: NuxtPlugin | string, options?: AddPluginOptions): NuxtPlugin
 ```
 
 ### Parameters
@@ -128,7 +128,7 @@ export default defineNuxtPlugin({
 ### Type
 
 ```ts
-function addPluginTemplate(pluginOptions: NuxtPluginTemplate, options?: AddPluginOptions): NuxtPlugin
+function addPluginTemplate (pluginOptions: NuxtPluginTemplate, options?: AddPluginOptions): NuxtPlugin
 ```
 
 ### Parameters
@@ -204,12 +204,13 @@ export default defineNuxtConfig({
 
 ```ts [#build/vue-app-config.mjs]
 import { defineNuxtPlugin } from '#app/nuxt'
+
 export default defineNuxtPlugin({
   name: 'nuxt:vue-app-config',
   enforce: 'pre',
   setup (nuxtApp) {
-    nuxtApp.vueApp.config["idPrefix"] = "nuxt"
-  }
+    nuxtApp.vueApp.config.idPrefix = 'nuxt'
+  },
 })
 ```
 

package/3.api/6.advanced/1.hooks.md

@@ -3,7 +3,7 @@ title: 'Lifecycle Hooks'
 description: Nuxt provides a powerful hooking system to expand almost every aspect using hooks.
 ---
 
-:read-more{to="/docs/guide/going-further/hooks"}
+:read-more{to="/docs/4.x/guide/going-further/hooks"}
 
 ## App Hooks (runtime)
 
@@ -30,7 +30,7 @@ Hook                   | Arguments           | Environment     | Description
 `page:loading:end`     | -                   | Client          | Called after `page:finish`
 `page:transition:finish`| `pageComponent?`    | Client          | After page transition [onAfterLeave](https://vuejs.org/guide/built-ins/transition.html#javascript-hooks) event.
 `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).
-`page:view-transition:start` | `transition`        | Client          | Called after `document.startViewTransition` is called when [experimental viewTransition support is enabled](/docs/getting-started/transitions#view-transitions-api-experimental).
+`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).
 
 ## Nuxt Hooks (build time)
 
@@ -46,7 +46,7 @@ Hook                     | Arguments                  | Description
 `modules:done`           | -                          | Called during Nuxt initialization, after installing user modules.
 `app:resolve`            | `app`                      | Called after resolving the `app` instance.
 `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`).
-`app:templatesGenerated` | `app`                      | Called after templates are compiled into the [virtual file system](/docs/guide/directory-structure/nuxt#virtual-file-system) (vfs).
+`app:templatesGenerated` | `app`                      | Called after templates are compiled into the [virtual file system](/docs/4.x/guide/directory-structure/nuxt) (vfs).
 `build:before`           | -                          | Called before Nuxt bundle builder.
 `build:done`             | -                          | Called after Nuxt bundle builder is complete.
 `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.

package/3.api/6.advanced/2.import-meta.md

@@ -49,12 +49,12 @@ const resolver = createResolver(import.meta.url)
 
 export default defineNuxtModule({
   meta: { name: 'myModule' },
-  setup() {
+  setup () {
     addComponent({
       name: 'MyModuleComponent',
       // Resolves to '/modules/my-module/components/MyModuleComponent.vue'
-      filePath: resolver.resolve('./components/MyModuleComponent.vue')
+      filePath: resolver.resolve('./components/MyModuleComponent.vue'),
     })
-  }
+  },
 })
 ```