@nuxt/docs 3.19.2 → 3.19.3

package/2.guide/{1.concepts → 2.concepts}/8.typescript.md

@@ -5,7 +5,7 @@ description: "Nuxt is fully typed and provides helpful shortcuts to ensure you h
 
 ## Type-checking
 
-By default, Nuxt doesn't check types when you run [`nuxt dev`](/docs/api/commands/dev) or [`nuxt build`](/docs/api/commands/build), for performance reasons.
+By default, Nuxt doesn't check types when you run [`nuxt dev`](/docs/3.x/api/commands/dev) or [`nuxt build`](/docs/3.x/api/commands/build), for performance reasons.
 
 To enable type-checking at build or development time, install `vue-tsc` and `typescript` as development dependency:
 
@@ -29,19 +29,19 @@ To enable type-checking at build or development time, install `vue-tsc` and `typ
 
 ::
 
-Then, run [`nuxt typecheck`](/docs/api/commands/typecheck) command to check your types:
+Then, run [`nuxt typecheck`](/docs/3.x/api/commands/typecheck) command to check your types:
 
 ```bash [Terminal]
 npx nuxt typecheck
 ```
 
-To enable type-checking at build or development time, you can also use the [`typescript.typeCheck`](/docs/api/nuxt-config#typecheck) option in your `nuxt.config` file:
+To enable type-checking at build or development time, you can also use the [`typescript.typeCheck`](/docs/3.x/api/nuxt-config#typecheck) option in your `nuxt.config` file:
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   typescript: {
-    typeCheck: true
-  }
+    typeCheck: true,
+  },
 })
 ```
 
@@ -60,24 +60,24 @@ Some of the references in the file are to files that are only generated within y
 This file contains the recommended basic TypeScript configuration for your project, including resolved aliases injected by Nuxt or modules you are using, so you can get full type support and path auto-complete for aliases like `~/file` or `#build/file`.
 
 ::note
-Consider using the `imports` section of [nuxt.config](/docs/api/nuxt-config#imports) to include directories beyond the default ones. This can be useful for auto-importing types which you're using across your app.
+Consider using the `imports` section of [nuxt.config](/docs/3.x/api/nuxt-config#imports) to include directories beyond the default ones. This can be useful for auto-importing types which you're using across your app.
 ::
 
-[Read more about how to extend this configuration](/docs/guide/directory-structure/tsconfig).
+[Read more about how to extend this configuration](/docs/3.x/guide/directory-structure/tsconfig).
 
 ::tip{icon="i-lucide-video" to="https://youtu.be/umLI7SlPygY" target="_blank"}
 Watch a video from Daniel Roe explaining built-in Nuxt aliases.
 ::
 
 ::note
-Nitro also [auto-generates types](/docs/guide/concepts/server-engine#typed-api-routes) for API routes. Plus, Nuxt also generates types for globally available components and [auto-imports from your composables](/docs/guide/directory-structure/composables), plus other core functionality.
+Nitro also [auto-generates types](/docs/3.x/guide/concepts/server-engine#typed-api-routes) for API routes. Plus, Nuxt also generates types for globally available components and [auto-imports from your composables](/docs/3.x/guide/directory-structure/composables), plus other core functionality.
 ::
 
 ::note
 Keep in mind that all options extended from `./.nuxt/tsconfig.json` will be overwritten by the options defined in your `tsconfig.json`.
 Overwriting options such as `"compilerOptions.paths"` with your own configuration will lead TypeScript to not factor in the module resolutions from `./.nuxt/tsconfig.json`. This can lead to module resolutions such as `#imports` not being recognized.
 :br :br
-In case you need to extend options provided by `./.nuxt/tsconfig.json` further, you can use the [`alias` property](/docs/api/nuxt-config#alias) within your `nuxt.config`. Nuxt will pick them up and extend `./.nuxt/tsconfig.json` accordingly.
+In case you need to extend options provided by `./.nuxt/tsconfig.json` further, you can use the [`alias` property](/docs/3.x/api/nuxt-config#alias) within your `nuxt.config`. Nuxt will pick them up and extend `./.nuxt/tsconfig.json` accordingly.
 ::
 
 ### Augmenting Types with Project References
@@ -105,7 +105,7 @@ If you are currently converting your codebase to TypeScript, you may want to tem
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   typescript: {
-    strict: false
-  }
+    strict: false,
+  },
 })
 ```

package/2.guide/3.going-further/1.events.md

@@ -16,7 +16,7 @@ You can create your own custom events using the `hook` method:
 ```ts
 const nuxtApp = useNuxtApp()
 
-nuxtApp.hook('app:user:registered', payload => {
+nuxtApp.hook('app:user:registered', (payload) => {
   console.log('A new user has registered!', payload)
 })
 ```
@@ -37,7 +37,7 @@ You can also use the payload object to enable two-way communication between the
 ```ts
 const nuxtApp = useNuxtApp()
 
-nuxtApp.hook('app:user:registered', payload => {
+nuxtApp.hook('app:user:registered', (payload) => {
   payload.message = 'Welcome to our app!'
 })
 

package/2.guide/3.going-further/1.experimental-features.md

@@ -5,7 +5,7 @@ description: "Enable Nuxt experimental features to unlock new possibilities."
 
 The Nuxt experimental features can be enabled in the Nuxt configuration file.
 
-Internally, Nuxt uses `@nuxt/schema` to define these experimental features. You can refer to the [API documentation](/docs/api/configuration/nuxt-config#experimental) or the [source code](https://github.com/nuxt/nuxt/blob/main/packages/schema/src/config/experimental.ts) for more information.
+Internally, Nuxt uses `@nuxt/schema` to define these experimental features. You can refer to the [API documentation](/docs/3.x/api/configuration/nuxt-config#experimental) or the [source code](https://github.com/nuxt/nuxt/blob/main/packages/schema/src/config/experimental.ts) for more information.
 
 ::note
 Note that these features are experimental and could be removed or modified in the future.
@@ -18,8 +18,8 @@ Enable native async context to be accessible for nested composables in Nuxt and
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    asyncContext: true
-  }
+    asyncContext: true,
+  },
 })
 ```
 
@@ -34,8 +34,8 @@ Enables generation of an async entry point for the Vue bundle, aiding module fed
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    asyncEntry: true
-  }
+    asyncEntry: true,
+  },
 })
 ```
 
@@ -48,8 +48,8 @@ Externalizes `vue`, `@vue/*` and `vue-router` when building.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    externalVue: true
-  }
+    externalVue: true,
+  },
 })
 ```
 
@@ -66,8 +66,8 @@ Tree shakes contents of client-only components from server bundle.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    treeshakeClientOnly: true
-  }
+    treeshakeClientOnly: true,
+  },
 })
 ```
 
@@ -75,46 +75,46 @@ export default defineNuxtConfig({
 
 Emits `app:chunkError` hook when there is an error loading vite/webpack chunks. Default behavior is to perform a reload of the new route on navigation to a new route when a chunk fails to load.
 
-If you set this to `'automatic-immediate'` Nuxt will reload the current route immediately, instead of waiting for a navigation. This is useful for chunk errors that are not triggered by navigation, e.g., when your Nuxt app fails to load a [lazy component](/docs/guide/directory-structure/components#dynamic-imports). A potential downside of this behavior is undesired reloads, e.g., when your app does not need the chunk that caused the error.
+If you set this to `'automatic-immediate'` Nuxt will reload the current route immediately, instead of waiting for a navigation. This is useful for chunk errors that are not triggered by navigation, e.g., when your Nuxt app fails to load a [lazy component](/docs/3.x/guide/directory-structure/components#dynamic-imports). A potential downside of this behavior is undesired reloads, e.g., when your app does not need the chunk that caused the error.
 
 You can disable automatic handling by setting this to `false`, or handle chunk errors manually by setting it to `manual`.
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    emitRouteChunkError: 'automatic' // or 'automatic-immediate', 'manual' or false
-  }
+    emitRouteChunkError: 'automatic', // or 'automatic-immediate', 'manual' or false
+  },
 })
 ```
 
 ## restoreState
 
-Allows Nuxt app state to be restored from `sessionStorage` when reloading the page after a chunk error or manual [`reloadNuxtApp()`](/docs/api/utils/reload-nuxt-app) call.
+Allows Nuxt app state to be restored from `sessionStorage` when reloading the page after a chunk error or manual [`reloadNuxtApp()`](/docs/3.x/api/utils/reload-nuxt-app) call.
 
 To avoid hydration errors, it will be applied only after the Vue app has been mounted, meaning there may be a flicker on initial load.
 
 ::important
 Consider carefully before enabling this as it can cause unexpected behavior,
-and consider providing explicit keys to [`useState`](/docs/api/composables/use-state) as auto-generated keys may not match across builds.
+and consider providing explicit keys to [`useState`](/docs/3.x/api/composables/use-state) as auto-generated keys may not match across builds.
 ::
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    restoreState: true
-  }
+    restoreState: true,
+  },
 })
 ```
 
 ## inlineRouteRules
 
-Define route rules at the page level using [`defineRouteRules`](/docs/api/utils/define-route-rules).
+Define route rules at the page level using [`defineRouteRules`](/docs/3.x/api/utils/define-route-rules).
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    inlineRouteRules: true
-  }
+    inlineRouteRules: true,
+  },
 })
 ```
 
@@ -135,8 +135,8 @@ Allows rendering of JSON payloads with support for revivifying complex types.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    renderJsonPayloads: true
-  }
+    renderJsonPayloads: true,
+  },
 })
 ```
 
@@ -147,8 +147,8 @@ Disables Vue server renderer endpoint within Nitro.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    noVueServer: true
-  }
+    noVueServer: true,
+  },
 })
 ```
 
@@ -159,20 +159,20 @@ Enables extraction of payloads of pages generated with `nuxt generate`.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    payloadExtraction: true
-  }
+    payloadExtraction: true,
+  },
 })
 ```
 
 ## clientFallback
 
-Enables the experimental [`<NuxtClientFallback>`](/docs/api/components/nuxt-client-fallback) component for rendering content on the client if there's an error in SSR.
+Enables the experimental [`<NuxtClientFallback>`](/docs/3.x/api/components/nuxt-client-fallback) component for rendering content on the client if there's an error in SSR.
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    clientFallback: true
-  }
+    clientFallback: true,
+  },
 })
 ```
 
@@ -183,8 +183,8 @@ Enables cross-origin prefetch using the Speculation Rules API.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    crossOriginPrefetch: true
-  }
+    crossOriginPrefetch: true,
+  },
 })
 ```
 
@@ -199,8 +199,8 @@ Enables View Transition API integration with client-side router.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    viewTransition: true
-  }
+    viewTransition: true,
+  },
 })
 ```
 
@@ -217,20 +217,20 @@ Enables writing of early hints when using node server.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    writeEarlyHints: true
-  }
+    writeEarlyHints: true,
+  },
 })
 ```
 
 ## componentIslands
 
-Enables experimental component islands support with [`<NuxtIsland>`](/docs/api/components/nuxt-island) and `.island.vue` files.
+Enables experimental component islands support with [`<NuxtIsland>`](/docs/3.x/api/components/nuxt-island) and `.island.vue` files.
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    componentIslands: true // false or 'local+remote'
-  }
+    componentIslands: true, // false or 'local+remote'
+  },
 })
 ```
 
@@ -249,8 +249,8 @@ Enables config schema support.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    configSchema: true
-  }
+    configSchema: true,
+  },
 })
 ```
 
@@ -261,8 +261,8 @@ Adds a compatibility layer for modules, plugins, or user code relying on the old
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    polyfillVueUseHead: false
-  }
+    polyfillVueUseHead: false,
+  },
 })
 ```
 
@@ -273,8 +273,8 @@ Allow disabling Nuxt SSR responses by setting the `x-nuxt-no-ssr` header.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    respectNoSSRHeader: false
-  }
+    respectNoSSRHeader: false,
+  },
 })
 ```
 
@@ -287,8 +287,8 @@ Resolve `~`, `~~`, `@` and `@@` aliases located within layers with respect to th
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    localLayerAliases: true
-  }
+    localLayerAliases: true,
+  },
 })
 ```
 
@@ -299,12 +299,12 @@ Enable the new experimental typed router using [`unplugin-vue-router`](https://g
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    typedPages: true
-  }
+    typedPages: true,
+  },
 })
 ```
 
-Out of the box, this will enable typed usage of [`navigateTo`](/docs/api/utils/navigate-to), [`<NuxtLink>`](/docs/api/components/nuxt-link), [`router.push()`](/docs/api/composables/use-router) and more.
+Out of the box, this will enable typed usage of [`navigateTo`](/docs/3.x/api/utils/navigate-to), [`<NuxtLink>`](/docs/3.x/api/components/nuxt-link), [`router.push()`](/docs/3.x/api/composables/use-router) and more.
 
 You can even get typed params within a page by using `const route = useRoute('route-name')`.
 
@@ -329,8 +329,8 @@ You can also set this to `chokidar` to watch all files in your source directory.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    watcher: 'chokidar-granular' // 'chokidar' or 'parcel' are also options
-  }
+    watcher: 'chokidar-granular', // 'chokidar' or 'parcel' are also options
+  },
 })
 ```
 
@@ -343,8 +343,8 @@ fetch the same data in different pages.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    sharedPrerenderData: true
-  }
+    sharedPrerenderData: true,
+  },
 })
 ```
 
@@ -378,7 +378,7 @@ To make globals like `Buffer` work in the browser, you need to manually inject t
 ```ts
 import { Buffer } from 'node:buffer'
 
-globalThis.Buffer = globalThis.Buffer || Buffer
+globalThis.Buffer ||= Buffer
 ```
 ::
 
@@ -395,8 +395,8 @@ You can disable this feature if it causes issues in your project.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    scanPageMeta: false
-  }
+    scanPageMeta: false,
+  },
 })
 ```
 
@@ -407,8 +407,8 @@ Enables CookieStore support to listen for cookie updates (if supported by the br
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    cookieStore: true
-  }
+    cookieStore: true,
+  },
 })
 ```
 
@@ -423,8 +423,8 @@ Caches Nuxt build artifacts based on a hash of the configuration and source file
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    buildCache: true
-  }
+    buildCache: true,
+  },
 })
 ```
 
@@ -457,7 +457,7 @@ This option allows passing additional keys to extract from the page metadata whe
 ```vue
 <script lang="ts" setup>
 definePageMeta({
-  foo: 'bar'
+  foo: 'bar',
 })
 </script>
 ```
@@ -475,7 +475,7 @@ export default defineNuxtConfig({
 })
 ```
 
-This allows modules to access additional metadata from the page metadata in the build context. If you are using this within a module, it's recommended also to [augment the `NuxtPage` types with your keys](/docs/guide/directory-structure/pages#typing-custom-metadata).
+This allows modules to access additional metadata from the page metadata in the build context. If you are using this within a module, it's recommended also to [augment the `NuxtPage` types with your keys](/docs/3.x/guide/directory-structure/pages#typing-custom-metadata).
 
 ## normalizeComponentNames
 
@@ -485,8 +485,8 @@ you would use to auto-import the component.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    normalizeComponentNames: true
-  }
+    normalizeComponentNames: true,
+  },
 })
 ```
 
@@ -535,8 +535,8 @@ This is enabled by default in development mode. If you need to disable this feat
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    browserDevtoolsTiming: false
-  }
+    browserDevtoolsTiming: false,
+  },
 })
 ```
 
@@ -559,8 +559,8 @@ To enable it explicitly:
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    debugModuleMutation: true
-  }
+    debugModuleMutation: true,
+  },
 })
 ```
 
@@ -577,8 +577,8 @@ Lazy hydration is enabled by default, but you can disable this feature:
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    lazyHydration: false
-  }
+    lazyHydration: false,
+  },
 })
 ```
 
@@ -595,8 +595,8 @@ This is enabled by default, so if you're experiencing resolution conflicts in ce
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    templateImportResolution: false
-  }
+    templateImportResolution: false,
+  },
 })
 ```
 
@@ -650,8 +650,8 @@ and ensures fresh data is loaded when needed, but it is possible to disable it:
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    purgeCachedData: false
-  }
+    purgeCachedData: false,
+  },
 })
 ```
 
@@ -666,8 +666,8 @@ Whether to call and use the result from `getCachedData` when refreshing data for
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    granularCachedData: true
-  }
+    granularCachedData: true,
+  },
 })
 ```
 
@@ -684,8 +684,8 @@ That means that when `immediate: false` is passed, `pending` will be `false` unt
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    pendingWhenIdle: false
-  }
+    pendingWhenIdle: false,
+  },
 })
 ```
 
@@ -710,13 +710,13 @@ If you need to disable this feature you can do so:
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    entryImportMap: false
+    entryImportMap: false,
   },
-// or, better, simply tell vite your desired target
+  // or, better, simply tell vite your desired target
   // which nuxt will respect
   vite: {
     build: {
-      target: 'safari13'
+      target: 'safari13',
     },
   },
 })

package/2.guide/3.going-further/1.features.md

@@ -16,8 +16,8 @@ You can also pass a function that receives the path of a Vue component and retur
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   features: {
-    inlineStyles: false // or a function to determine inlining
-  }
+    inlineStyles: false, // or a function to determine inlining
+  },
 })
 ```
 
@@ -28,8 +28,8 @@ Disables rendering of Nuxt scripts and JS resource hints. Can also be configured
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   features: {
-    noScripts: true
-  }
+    noScripts: true,
+  },
 })
 ```
 
@@ -58,7 +58,7 @@ export default defineNuxtConfig({
   // To re-enable _all_ Nuxt v3 behaviour, set the following options:
   srcDir: '.',
   dir: {
-    app: 'app'
+    app: 'app',
   },
   experimental: {
     scanPageMeta: 'after-resolve',
@@ -67,21 +67,21 @@ export default defineNuxtConfig({
     resetAsyncDataToUndefined: true,
     templateUtils: true,
     relativeWatchPaths: true,
-    normalizeComponentNames: false
+    normalizeComponentNames: false,
     defaults: {
       useAsyncData: {
-        deep: true
-      }
-    }
+        deep: true,
+      },
+    },
   },
   features: {
-    inlineStyles: true
+    inlineStyles: true,
   },
   unhead: {
     renderSSRHeadOptions: {
-      omitLineBreaks: false
-    }
-  }
+      omitLineBreaks: false,
+    },
+  },
 })
 ```
 
@@ -97,7 +97,7 @@ See [the original TypeScript pull request](https://github.com/microsoft/TypeScri
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   future: {
-    typescriptBundlerResolution: true
-  }
+    typescriptBundlerResolution: true,
+  },
 })
 ```