@nuxt/docs 3.19.2 → 3.19.3

package/2.guide/{2.directory-structure → 1.directory-structure}/1.plugins.md

@@ -2,7 +2,7 @@
 title: "plugins"
 description: "Nuxt has a plugins system to use Vue plugins and more at the creation of your Vue application."
 head.title: "plugins/"
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-plugin
 ---
 
 Nuxt automatically reads the files in the `plugins/` directory and loads them at the creation of the Vue application.
@@ -30,23 +30,23 @@ Only files at the top level of the directory (or index files within any subdirec
 
 Only `foo.ts` and `bar/index.ts` would be registered.
 
-To add plugins in subdirectories, you can use the [`plugins`](/docs/api/nuxt-config#plugins-1) option in `nuxt.config.ts`:
+To add plugins in subdirectories, you can use the [`plugins`](/docs/3.x/api/nuxt-config#plugins-1) option in `nuxt.config.ts`:
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   plugins: [
     '~/plugins/bar/baz',
-    '~/plugins/bar/foz'
-  ]
+    '~/plugins/bar/foz',
+  ],
 })
 ```
 
 ## Creating Plugins
 
-The only argument passed to a plugin is [`nuxtApp`](/docs/api/composables/use-nuxt-app).
+The only argument passed to a plugin is [`nuxtApp`](/docs/3.x/api/composables/use-nuxt-app).
 
 ```ts twoslash [plugins/hello.ts]
-export default defineNuxtPlugin(nuxtApp => {
+export default defineNuxtPlugin((nuxtApp) => {
   // Doing something with nuxtApp
 })
 ```
@@ -64,15 +64,15 @@ export default defineNuxtPlugin({
   },
   hooks: {
     // You can directly register Nuxt app runtime hooks here
-    'app:created'() {
+    'app:created' () {
       const nuxtApp = useNuxtApp()
       // do something in the hook
-    }
+    },
   },
   env: {
     // Set this value to `false` if you don't want the plugin to run when rendering server-only or island components.
-    islands: true
-  }
+    islands: true,
+  },
 })
 ```
 
@@ -114,7 +114,7 @@ export default defineNuxtPlugin({
   parallel: true,
   async setup (nuxtApp) {
     // the next plugin will be executed immediately
-  }
+  },
 })
 ```
 
@@ -128,13 +128,13 @@ export default defineNuxtPlugin({
   dependsOn: ['my-plugin'],
   async setup (nuxtApp) {
     // this plugin will wait for the end of `my-plugin`'s execution before it runs
-  }
+  },
 })
 ```
 
 ## Using Composables
 
-You can use [composables](/docs/guide/directory-structure/composables) as well as [utils](/docs/guide/directory-structure/utils) within Nuxt plugins:
+You can use [composables](/docs/3.x/guide/directory-structure/composables) as well as [utils](/docs/3.x/guide/directory-structure/utils) within Nuxt plugins:
 
 ```ts [plugins/hello.ts]
 export default defineNuxtPlugin((nuxtApp) => {
@@ -153,20 +153,20 @@ Plugins are called in order sequentially and before everything else. You might u
 ::important
 **If a composable depends on the Vue.js lifecycle, it won't work.** :br
 
-Normally, Vue.js composables are bound to the current component instance while plugins are only bound to [`nuxtApp`](/docs/api/composables/use-nuxt-app) instance.
+Normally, Vue.js composables are bound to the current component instance while plugins are only bound to [`nuxtApp`](/docs/3.x/api/composables/use-nuxt-app) instance.
 ::
 
 ## Providing Helpers
 
-If you would like to provide a helper on the [`NuxtApp`](/docs/api/composables/use-nuxt-app) instance, return it from the plugin under a `provide` key.
+If you would like to provide a helper on the [`NuxtApp`](/docs/3.x/api/composables/use-nuxt-app) instance, return it from the plugin under a `provide` key.
 
 ::code-group
 ```ts twoslash [plugins/hello.ts]
 export default defineNuxtPlugin(() => {
   return {
     provide: {
-      hello: (msg: string) => `Hello ${msg}!`
-    }
+      hello: (msg: string) => `Hello ${msg}!`,
+    },
   }
 })
 ```
@@ -176,10 +176,10 @@ export default defineNuxtPlugin({
   setup () {
     return {
       provide: {
-        hello: (msg: string) => `Hello ${msg}!`
-      }
+        hello: (msg: string) => `Hello ${msg}!`,
+      },
     }
-  }
+  },
 })
 ```
 ::
@@ -200,7 +200,7 @@ const { $hello } = useNuxtApp()
 ```
 
 ::important
-Note that we highly recommend using [`composables`](/docs/guide/directory-structure/composables) instead of providing helpers to avoid polluting the global namespace and keep your main bundle entry small.
+Note that we highly recommend using [`composables`](/docs/3.x/guide/directory-structure/composables) instead of providing helpers to avoid polluting the global namespace and keep your main bundle entry small.
 ::
 
 ::warning
@@ -213,7 +213,7 @@ This is due to how Vue works with refs that aren't top-level to the template. Yo
 If you return your helpers from the plugin, they will be typed automatically; you'll find them typed for the return of `useNuxtApp()` and within your templates.
 
 ::note
-If you need to use a provided helper _within_ another plugin, you can call [`useNuxtApp()`](/docs/api/composables/use-nuxt-app) to get the typed version. But in general, this should be avoided unless you are certain of the plugins' order.
+If you need to use a provided helper _within_ another plugin, you can call [`useNuxtApp()`](/docs/3.x/api/composables/use-nuxt-app) to get the typed version. But in general, this should be avoided unless you are certain of the plugins' order.
 ::
 
 For advanced use-cases, you can declare the type of injected properties like this:
@@ -263,8 +263,8 @@ import VueGtag, { trackRouter } from 'vue-gtag-next'
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(VueGtag, {
     property: {
-      id: 'GA_MEASUREMENT_ID'
-    }
+      id: 'GA_MEASUREMENT_ID',
+    },
   })
   trackRouter(useRouter())
 })
@@ -283,7 +283,7 @@ export default defineNuxtPlugin((nuxtApp) => {
     getSSRProps (binding, vnode) {
       // you can provide SSR-specific props here
       return {}
-    }
+    },
   })
 })
 ```

package/2.guide/{2.directory-structure → 1.directory-structure}/1.public.md

@@ -2,7 +2,7 @@
 title: "public"
 description: "The public/ directory is used to serve your website's static assets."
 head.title: "public/"
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-public
 ---
 
 Files contained within the `public/` directory are served at the root and are not modified by the build process. This is suitable for files that have to keep their names (e.g. `robots.txt`) _or_ likely won't change (e.g. `favicon.ico`).
@@ -17,7 +17,7 @@ Files contained within the `public/` directory are served at the root and are no
 ```vue [app.vue]
 <script setup lang="ts">
 useSeoMeta({
-  ogImage: '/og-image.png'
+  ogImage: '/og-image.png',
 })
 </script>
 ```

package/2.guide/{2.directory-structure → 1.directory-structure}/1.server.md

@@ -2,7 +2,7 @@
 title: server
 head.title: 'server/'
 description: The server/ directory is used to register API and server handlers to your application.
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-server
 ---
 
 Nuxt automatically scans files inside these directories to register API and server handlers with Hot Module Replacement (HMR) support.
@@ -24,7 +24,7 @@ The handler can directly return JSON data, a `Promise`, or use `event.node.res.e
 ```ts twoslash [server/api/hello.ts]
 export default defineEventHandler((event) => {
   return {
-    hello: 'world'
+    hello: 'world',
   }
 })
 ```
@@ -58,7 +58,7 @@ export default defineEventHandler(() => 'Hello World!')
 Given the example above, the `/hello` route will be accessible at <http://localhost:3000/hello>.
 
 ::note
-Note that currently server routes do not support the full functionality of dynamic routes as [pages](/docs/guide/directory-structure/pages#dynamic-routes) do.
+Note that currently server routes do not support the full functionality of dynamic routes as [pages](/docs/3.x/guide/directory-structure/pages#dynamic-routes) do.
 ::
 
 ## Server Middleware
@@ -115,9 +115,9 @@ For example, you can define a custom handler utility that wraps the original han
 import type { EventHandler, EventHandlerRequest } from 'h3'
 
 export const defineWrappedResponseHandler = <T extends EventHandlerRequest, D> (
-  handler: EventHandler<T, D>
+  handler: EventHandler<T, D>,
 ): EventHandler<T, D> =>
-  defineEventHandler<T>(async event => {
+  defineEventHandler<T>(async (event) => {
     try {
       // do something before the route handler
       const response = await handler(event)
@@ -144,7 +144,7 @@ To improve clarity within your IDE between the auto-imports from 'nitro' and 'vu
 }
 ```
 
-Currently, these values won't be respected when type checking ([`nuxt typecheck`](/docs/api/commands/typecheck)), but you should get better type hints in your IDE.
+Currently, these values won't be respected when type checking ([`nuxt typecheck`](/docs/3.x/api/commands/typecheck)), but you should get better type hints in your IDE.
 
 ## Recipes
 
@@ -244,10 +244,10 @@ You can now universally call this API using:
 
 ```vue [app.vue]
 <script setup lang="ts">
-async function submit() {
+async function submit () {
   const { body } = await $fetch('/api/submit', {
     method: 'post',
-    body: { test: 123 }
+    body: { test: 123 },
   })
 }
 </script>
@@ -279,11 +279,11 @@ If no errors are thrown, a status code of `200 OK` will be returned.
 
 Any uncaught errors will return a `500 Internal Server Error` HTTP Error.
 
-To return other error codes, throw an exception with [`createError`](/docs/api/utils/create-error):
+To return other error codes, throw an exception with [`createError`](/docs/3.x/api/utils/create-error):
 
 ```ts [server/api/validation/[id\\].ts]
 export default defineEventHandler((event) => {
-  const id = parseInt(event.context.params.id) as number
+  const id = Number.parseInt(event.context.params.id) as number
 
   if (!Number.isInteger(id)) {
     throw createError({
@@ -297,7 +297,7 @@ export default defineEventHandler((event) => {
 
 ### Status Codes
 
-To return other status codes, use the [`setResponseStatus`](/docs/api/utils/set-response-status) utility.
+To return other status codes, use the [`setResponseStatus`](/docs/3.x/api/utils/set-response-status) utility.
 
 For example, to return `202 Accepted`
 
@@ -316,8 +316,8 @@ export default defineEventHandler(async (event) => {
 
   const repo = await $fetch('https://api.github.com/repos/nuxt/nuxt', {
     headers: {
-      Authorization: `token ${config.githubToken}`
-    }
+      Authorization: `token ${config.githubToken}`,
+    },
   })
 
   return repo
@@ -326,8 +326,8 @@ export default defineEventHandler(async (event) => {
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   runtimeConfig: {
-    githubToken: ''
-  }
+    githubToken: '',
+  },
 })
 ```
 ```ini [.env]
@@ -336,7 +336,7 @@ NUXT_GITHUB_TOKEN='<my-super-token>'
 ::
 
 ::note
-Giving the `event` as argument to `useRuntimeConfig` is optional, but it is recommended to pass it to get the runtime config overwritten by [environment variables](/docs/guide/going-further/runtime-config#environment-variables) at runtime for server routes.
+Giving the `event` as argument to `useRuntimeConfig` is optional, but it is recommended to pass it to get the runtime config overwritten by [environment variables](/docs/3.x/guide/going-further/runtime-config#environment-variables) at runtime for server routes.
 ::
 
 ### Request Cookies
@@ -373,8 +373,8 @@ The `event.waitUntil` method accepts a promise that will be awaited before the h
 
 ```ts [server/api/background-task.ts]
 const timeConsumingBackgroundTask = async () => {
-  await new Promise((resolve) => setTimeout(resolve, 1000))
-};
+  await new Promise(resolve => setTimeout(resolve, 1000))
+}
 
 export default eventHandler((event) => {
   // schedule a background task without blocking the response
@@ -382,7 +382,7 @@ export default eventHandler((event) => {
 
   // immediately send the response to the client
   return 'done'
-});
+})
 ```
 
 ## Advanced Usage
@@ -398,7 +398,7 @@ This is an advanced option. Custom config can affect production deployments, as
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   // https://nitro.build/config
-  nitro: {}
+  nitro: {},
 })
 ```
 
@@ -478,14 +478,14 @@ export default defineNuxtConfig({
         driver: 'redis',
         /* redis connector options */
         port: 6379, // Redis port
-        host: "127.0.0.1", // Redis host
-        username: "", // needs Redis >= 6
-        password: "",
+        host: '127.0.0.1', // Redis host
+        username: '', // needs Redis >= 6
+        password: '',
         db: 0, // Defaults to 0
-        tls: {} // tls/ssl
-      }
-    }
-  }
+        tls: {}, // tls/ssl
+      },
+    },
+  },
 })
 ```
 
@@ -521,11 +521,11 @@ export default defineNitroPlugin(() => {
 
   // Dynamically pass in credentials from runtime configuration, or other sources
   const driver = redisDriver({
-      base: 'redis',
-      host: useRuntimeConfig().redis.host,
-      port: useRuntimeConfig().redis.port,
-      /* other redis connector options */
-    })
+    base: 'redis',
+    host: useRuntimeConfig().redis.host,
+    port: useRuntimeConfig().redis.port,
+    /* other redis connector options */
+  })
 
   // Mount driver
   storage.mount('redis', driver)
@@ -539,8 +539,8 @@ export default defineNuxtConfig({
       host: '',
       port: 0,
       /* other redis connector options */
-    }
-  }
+    },
+  },
 })
 ```
 ::

package/2.guide/{2.directory-structure → 1.directory-structure}/1.shared.md

@@ -2,7 +2,7 @@
 title: 'shared'
 head.title: 'shared/'
 description: 'Use the shared/ directory to share functionality between the Vue app and the Nitro server.'
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-shared
 ---
 
 The `shared/` directory allows you to share code that can be used in both the Vue app and the Nitro server.
@@ -18,7 +18,7 @@ Code in the `shared/` directory cannot import any Vue or Nitro code.
 ::warning
 Auto-imports are not enabled by default in Nuxt v3 to prevent breaking changes in existing projects.
 
-To use these auto-imported utils and types, you must first [set `future.compatibilityVersion: 4` in your `nuxt.config.ts`](/docs/getting-started/upgrade#opting-in-to-nuxt-4).
+To use these auto-imported utils and types, you must first [set `future.compatibilityVersion: 4` in your `nuxt.config.ts`](/docs/3.x/getting-started/upgrade#opting-in-to-nuxt-4).
 ::
 
 :video-accordion{title="Watch a video from Vue School on sharing utils and types between app and server" videoId="nnAR-MO3q5M"}
@@ -41,7 +41,7 @@ export default function (input: string) {
 }
 ```
 
-You can now use [auto-imported](/docs/guide/directory-structure/shared#auto-imports) utilities in your Nuxt app and `server/` directory.
+You can now use [auto-imported](/docs/3.x/guide/directory-structure/shared#auto-imports) utilities in your Nuxt app and `server/` directory.
 
 ```vue [app.vue]
 <script setup lang="ts">
@@ -58,7 +58,7 @@ const hello = capitalize('hello')
 ```ts [server/api/hello.get.ts]
 export default defineEventHandler((event) => {
   return {
-    hello: capitalize('hello')
+    hello: capitalize('hello'),
   }
 })
 ```
@@ -68,7 +68,7 @@ export default defineEventHandler((event) => {
 Only files in the `shared/utils/` and `shared/types/` directories will be auto-imported. Files nested within subdirectories of these directories will not be auto-imported unless you add these directories to `imports.dirs` and `nitro.imports.dirs`.
 
 ::tip
-The way `shared/utils` and `shared/types` auto-imports work and are scanned is identical to the [`composables/`](/docs/guide/directory-structure/composables) and [`utils/`](/docs/guide/directory-structure/utils) directories.
+The way `shared/utils` and `shared/types` auto-imports work and are scanned is identical to the [`composables/`](/docs/3.x/guide/directory-structure/composables) and [`utils/`](/docs/3.x/guide/directory-structure/utils) directories.
 ::
 
 :read-more{to="/docs/guide/directory-structure/composables#how-files-are-scanned"}
@@ -83,7 +83,7 @@ The way `shared/utils` and `shared/types` auto-imports work and are scanned is i
 -----| formatters
 -------| upper.ts         # Not auto-imported
 ---| types/
------| bar.d.ts           # Auto-imported
+-----| bar.ts             # Auto-imported
 ```
 
 Any other files you create in the `shared/` folder must be manually imported using the `#shared` alias (automatically configured by Nuxt):

package/2.guide/{2.directory-structure → 1.directory-structure}/1.utils.md

@@ -2,10 +2,10 @@
 title: 'utils'
 head.title: 'utils/'
 description: Use the utils/ directory to auto-import your utility functions throughout your application.
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-tools
 ---
 
-The main purpose of the [`utils/` directory](/docs/guide/directory-structure/utils) is to allow a semantic distinction between your Vue composables and other auto-imported utility functions.
+The main purpose of the [`utils/` directory](/docs/3.x/guide/directory-structure/utils) is to allow a semantic distinction between your Vue composables and other auto-imported utility functions.
 
 ## Usage
 
@@ -14,7 +14,7 @@ The main purpose of the [`utils/` directory](/docs/guide/directory-structure/uti
 ```ts twoslash [utils/index.ts]
 export const { format: formatNumber } = Intl.NumberFormat('en-GB', {
   notation: 'compact',
-  maximumFractionDigits: 1
+  maximumFractionDigits: 1,
 })
 ```
 
@@ -40,10 +40,10 @@ You can now use auto imported utility functions in `.js`, `.ts` and `.vue` files
 :link-example{to="/docs/examples/features/auto-imports"}
 
 ::tip
-The way `utils/` auto-imports work and are scanned is identical to the [`composables/`](/docs/guide/directory-structure/composables) directory.
+The way `utils/` auto-imports work and are scanned is identical to the [`composables/`](/docs/3.x/guide/directory-structure/composables) directory.
 ::
 
 ::important
 These utils are only available within the Vue part of your app. :br
-Only `server/utils` are auto-imported in the [`server/`](/docs/guide/directory-structure/server#server-utilities) directory.
+Only `server/utils` are auto-imported in the [`server/`](/docs/3.x/guide/directory-structure/server#server-utilities) directory.
 ::

package/2.guide/{2.directory-structure → 1.directory-structure}/2.env.md

@@ -2,16 +2,16 @@
 title: ".env"
 description: "A .env file specifies your build/dev-time environment variables."
 head.title: ".env"
-navigation.icon: i-lucide-file
+navigation.icon: i-vscode-icons-file-type-dotenv
 ---
 
 ::important
-This file should be added to your [`.gitignore`](/docs/guide/directory-structure/gitignore) file to avoid pushing secrets to your repository.
+This file should be added to your [`.gitignore`](/docs/3.x/guide/directory-structure/gitignore) file to avoid pushing secrets to your repository.
 ::
 
 ## Dev, Build and Generate Time
 
-Nuxt CLI has built-in [dotenv](https://github.com/motdotla/dotenv) support in development mode and when running [`nuxt build`](/docs/api/commands/build) and [`nuxt generate`](/docs/api/commands/generate).
+Nuxt CLI has built-in [dotenv](https://github.com/motdotla/dotenv) support in development mode and when running [`nuxt build`](/docs/3.x/api/commands/build) and [`nuxt generate`](/docs/3.x/api/commands/generate).
 
 In addition to any process environment variables, if you have a `.env` file in your project root directory, it will be automatically loaded **at dev, build and generate time**. Any environment variables set there will be accessible within your `nuxt.config` file and modules.
 
@@ -34,7 +34,7 @@ npx nuxt dev --dotenv .env.local
 When updating `.env` in development mode, the Nuxt instance is automatically restarted to apply new values to the `process.env`.
 
 ::important
-In your application code, you should use [Runtime Config](/docs/guide/going-further/runtime-config) instead of plain env variables.
+In your application code, you should use [Runtime Config](/docs/3.x/guide/going-further/runtime-config) instead of plain env variables.
 ::
 
 ## Production
@@ -61,7 +61,7 @@ Since `.env` files are not used in production, you must explicitly set environme
 
 ## Production Preview
 
-For local production preview purpose, we recommend using [`nuxt preview`](/docs/api/commands/preview) since using this command, the `.env` file will be loaded into `process.env` for convenience. Note that this command requires dependencies to be installed in the package directory.
+For local production preview purpose, we recommend using [`nuxt preview`](/docs/3.x/api/commands/preview) since using this command, the `.env` file will be loaded into `process.env` for convenience. Note that this command requires dependencies to be installed in the package directory.
 
 Or you could pass the environment variables as arguments using the terminal. For example, on Linux or macOS:
 

package/2.guide/{2.directory-structure → 1.directory-structure}/2.gitignore.md

@@ -2,7 +2,7 @@
 title: ".gitignore"
 description: "A .gitignore file specifies intentionally untracked files that git should ignore."
 head.title: ".gitignore"
-navigation.icon: i-lucide-file
+navigation.icon: i-vscode-icons-file-type-git
 ---
 
 A `.gitignore` file specifies intentionally untracked files that git should ignore.

package/2.guide/{2.directory-structure → 1.directory-structure}/2.nuxtignore.md

@@ -2,15 +2,15 @@
 title: .nuxtignore
 head.title: '.nuxtignore'
 description: The .nuxtignore file lets Nuxt ignore files in your project’s root directory during the build phase.
-navigation.icon: i-lucide-file
+navigation.icon: i-vscode-icons-file-type-nuxt
 ---
 
-The `.nuxtignore` file tells Nuxt to ignore files in your project’s root directory ([`rootDir`](/docs/api/nuxt-config#rootdir)) during the build phase.
+The `.nuxtignore` file tells Nuxt to ignore files in your project’s root directory ([`rootDir`](/docs/3.x/api/nuxt-config#rootdir)) during the build phase.
 
-It is subject to the same specification as [`.gitignore`](/docs/guide/directory-structure/gitignore) and `.eslintignore` files, in which each line is a glob pattern indicating which files should be ignored.
+It is subject to the same specification as [`.gitignore`](/docs/3.x/guide/directory-structure/gitignore) and `.eslintignore` files, in which each line is a glob pattern indicating which files should be ignored.
 
 ::tip
-You can also configure [`ignoreOptions`](/docs/api/nuxt-config#ignoreoptions), [`ignorePrefix`](/docs/api/nuxt-config#ignoreprefix) and [`ignore`](/docs/api/nuxt-config#ignore) in your `nuxt.config` file.
+You can also configure [`ignoreOptions`](/docs/3.x/api/nuxt-config#ignoreoptions), [`ignorePrefix`](/docs/3.x/api/nuxt-config#ignoreprefix) and [`ignore`](/docs/3.x/api/nuxt-config#ignore) in your `nuxt.config` file.
 ::
 
 ## Usage

package/2.guide/{2.directory-structure → 1.directory-structure}/2.nuxtrc.md

@@ -2,13 +2,13 @@
 title: ".nuxtrc"
 description: "The .nuxtrc file allows you to define nuxt configurations in a flat syntax."
 head.title: ".nuxtrc"
-navigation.icon: i-lucide-file  
+navigation.icon: i-vscode-icons-file-type-nuxt  
 ---
 
 The `.nuxtrc` file can be used to configure Nuxt with a flat syntax. It is based on [`unjs/rc9`](https://github.com/unjs/rc9).
 
 ::tip
-For more advanced configurations, use [`nuxt.config`](/docs/guide/directory-structure/nuxt-config).
+For more advanced configurations, use [`nuxt.config`](/docs/3.x/guide/directory-structure/nuxt-config).
 ::
 
 ## Usage
@@ -28,7 +28,7 @@ modules[]=nuxt-security
 If present, the properties in the `nuxt.config` file will overwrite the properties in `.nuxtrc` file.
 
 ::note
-Nuxt automatically adds a `setups` section to track module installation and upgrade state. This is used internally for [module lifecycle hooks](/docs/api/kit/modules#using-lifecycle-hooks-for-module-installation-and-upgrade) and should not be modified manually.
+Nuxt automatically adds a `setups` section to track module installation and upgrade state. This is used internally for [module lifecycle hooks](/docs/3.x/api/kit/modules#using-lifecycle-hooks-for-module-installation-and-upgrade) and should not be modified manually.
 ::
 
 ::read-more{to="/docs/api/configuration/nuxt-config"}

package/2.guide/{2.directory-structure → 1.directory-structure}/3.app-config.md

@@ -2,7 +2,7 @@
 title: app.config.ts
 head.title: 'app.config.ts'
 description: Expose reactive configuration within your application with the App Config file.
-navigation.icon: i-lucide-file
+navigation.icon: i-vscode-icons-file-type-light-config
 ---
 
 Nuxt provides an `app.config` config file to expose reactive configuration within your application with the ability to update it at runtime within lifecycle or using a nuxt plugin and editing it with HMR (hot-module-replacement).
@@ -11,7 +11,7 @@ You can easily provide runtime app configuration using `app.config.ts` file. It
 
 ```ts twoslash [app.config.ts]
 export default defineAppConfig({
-  foo: 'bar'
+  foo: 'bar',
 })
 ```
 
@@ -20,7 +20,7 @@ Do not put any secret values inside `app.config` file. It is exposed to the user
 ::
 
 ::note
-When configuring a custom [`srcDir`](/docs/api/nuxt-config#srcdir), make sure to place the `app.config` file at the root of the new `srcDir` path.
+When configuring a custom [`srcDir`](/docs/3.x/api/nuxt-config#srcdir), make sure to place the `app.config` file at the root of the new `srcDir` path.
 ::
 
 ## Usage
@@ -30,12 +30,12 @@ To expose config and environment variables to the rest of your app, you will nee
 ```ts twoslash [app.config.ts]
 export default defineAppConfig({
   theme: {
-    primaryColor: '#ababab'
-  }
+    primaryColor: '#ababab',
+  },
 })
 ```
 
-We can now universally access `theme` both when server-rendering the page and in the browser using [`useAppConfig`](/docs/api/composables/use-app-config) composable.
+We can now universally access `theme` both when server-rendering the page and in the browser using [`useAppConfig`](/docs/3.x/api/composables/use-app-config) composable.
 
 ```vue [pages/index.vue]
 <script setup lang="ts">
@@ -45,7 +45,7 @@ console.log(appConfig.theme)
 </script>
 ```
 
-The [`updateAppConfig`](/docs/api/utils/update-app-config) utility can be used to update the `app.config` at runtime.
+The [`updateAppConfig`](/docs/3.x/api/utils/update-app-config) utility can be used to update the `app.config` at runtime.
 
 ```vue [pages/index.vue]
 <script setup>
@@ -90,7 +90,7 @@ export {}
 
 ### App Config Output
 
-If you want to type the result of calling [`useAppConfig()`](/docs/api/composables/use-app-config), then you will want to extend `AppConfig`.
+If you want to type the result of calling [`useAppConfig()`](/docs/3.x/api/composables/use-app-config), then you will want to extend `AppConfig`.
 
 ::warning
 Be careful when typing `AppConfig` as you will overwrite the types Nuxt infers from your actually defined app config.
@@ -114,7 +114,7 @@ export {}
 
 ## Merging Strategy
 
-Nuxt uses a custom merging strategy for the `AppConfig` within [the layers](/docs/getting-started/layers) of your application.
+Nuxt uses a custom merging strategy for the `AppConfig` within [the layers](/docs/3.x/getting-started/layers) of your application.
 
 This strategy is implemented using a [Function Merger](https://github.com/unjs/defu#function-merger), which allows defining a custom merging strategy for every key in `app.config` that has an array as value.
 
@@ -157,9 +157,9 @@ While it's possible to use Vite plugins in the Nitro config as a workaround, thi
 export default defineNuxtConfig({
   nitro: {
     vite: {
-      plugins: [vue()]
-    }
-  }
+      plugins: [vue()],
+    },
+  },
 })
 ```