@nuxt/docs 4.1.1 → 4.1.3

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

@@ -2,16 +2,16 @@
 title: "pages"
 description: "Nuxt provides file-based routing to create routes within your web application."
 head.title: "pages/"
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-view
 ---
 
 ::note
-To reduce your application's bundle size, this directory is **optional**, meaning that [`vue-router`](https://router.vuejs.org) won't be included if you only use [`app.vue`](/docs/guide/directory-structure/app). To force the pages system, set `pages: true` in `nuxt.config` or have a [`router.options.ts`](/docs/guide/recipes/custom-routing#using-approuteroptions).
+To reduce your application's bundle size, this directory is **optional**, meaning that [`vue-router`](https://router.vuejs.org) won't be included if you only use [`app.vue`](/docs/4.x/guide/directory-structure/app). To force the pages system, set `pages: true` in `nuxt.config` or have a [`router.options.ts`](/docs/4.x/guide/recipes/custom-routing#using-routeroptions).
 ::
 
 ## Usage
 
-Pages are Vue components and can have any [valid extension](/docs/api/configuration/nuxt-config#extensions) that Nuxt supports (by default `.vue`, `.js`, `.jsx`, `.mjs`, `.ts` or `.tsx`).
+Pages are Vue components and can have any [valid extension](/docs/4.x/api/configuration/nuxt-config#extensions) that Nuxt supports (by default `.vue`, `.js`, `.jsx`, `.mjs`, `.ts` or `.tsx`).
 
 Nuxt will automatically create a route for every page in your `~/pages/` directory.
 
@@ -28,17 +28,17 @@ Nuxt will automatically create a route for every page in your `~/pages/` directo
 export default defineComponent({
   render () {
     return h('h1', 'Index page')
-  }
+  },
 })
 ```
 
 ```tsx twoslash [pages/index.tsx]
-// https://nuxt.com/docs/examples/advanced/jsx
+// https://nuxt.com/docs/4.x/examples/advanced/jsx
 // https://vuejs.org/guide/extras/render-function.html#jsx-tsx
 export default defineComponent({
   render () {
     return <h1>Index page</h1>
-  }
+  },
 })
 ```
 
@@ -46,7 +46,7 @@ export default defineComponent({
 
 The `app/pages/index.vue` file will be mapped to the `/` route of your application.
 
-If you are using [`app.vue`](/docs/guide/directory-structure/app), make sure to use the [`<NuxtPage/>`](/docs/api/components/nuxt-page) component to display the current page:
+If you are using [`app.vue`](/docs/4.x/guide/directory-structure/app), make sure to use the [`<NuxtPage/>`](/docs/4.x/api/components/nuxt-page) component to display the current page:
 
 ```vue [app/app.vue]
 <template>
@@ -57,7 +57,7 @@ If you are using [`app.vue`](/docs/guide/directory-structure/app), make sure to
 </template>
 ```
 
-Pages **must have a single root element** to allow [route transitions](/docs/getting-started/transitions) between pages. HTML comments are considered elements as well.
+Pages **must have a single root element** to allow [route transitions](/docs/4.x/getting-started/transitions) between pages. HTML comments are considered elements as well.
 
 This means that when the route is server-rendered, or statically generated, you will be able to see its contents correctly, but when you navigate towards that route during client-side navigation the transition between routes will fail and you'll see that the route will not be rendered.
 
@@ -118,7 +118,7 @@ Navigating to `/users-admins/123` would render:
 <p>admins - 123</p>
 ```
 
-If you want to access the route using Composition API, there is a global [`useRoute`](/docs/api/composables/use-route) function that will allow you to access the route just like `this.$route` in the Options API.
+If you want to access the route using Composition API, there is a global [`useRoute`](/docs/4.x/api/composables/use-route) function that will allow you to access the route just like `this.$route` in the Options API.
 
 ```vue twoslash
 <script setup lang="ts">
@@ -177,10 +177,10 @@ This file tree will generate these routes:
       {
         path: 'child',
         component: '~/pages/parent/child.vue',
-        name: 'parent-child'
-      }
-    ]
-  }
+        name: 'parent-child',
+      },
+    ],
+  },
 ]
 ```
 
@@ -197,7 +197,9 @@ To display the `child.vue` component, you have to insert the `<NuxtPage>` compon
 
 ```vue {}[pages/parent/child.vue]
 <script setup lang="ts">
-const props = defineProps(['foobar'])
+const props = defineProps({
+  foobar: String,
+})
 
 console.log(props.foobar)
 </script>
@@ -221,12 +223,12 @@ Or alternatively:
 ```vue twoslash {}[pages/parent/child.vue]
 <script setup lang="ts">
 definePageMeta({
-  key: route => route.fullPath
+  key: route => route.fullPath,
 })
 </script>
 ```
 
-:link-example{to="/docs/examples/routing/pages"}
+:link-example{to="/docs/4.x/examples/routing/pages"}
 
 ## Route Groups
 
@@ -251,7 +253,7 @@ You might want to define metadata for each route in your app. You can do this us
 ```vue twoslash
 <script setup lang="ts">
 definePageMeta({
-  title: 'My home page'
+  title: 'My home page',
 })
 </script>
 ```
@@ -279,8 +281,8 @@ Make sure not to reference any reactive data or functions that cause side effect
 <script setup lang="ts">
 import { someData } from '~/utils/example'
 
-function validateIdParam(route) {
-  return route.params.id && !isNaN(Number(route.params.id))
+function validateIdParam (route) {
+  return route.params.id && !Number.isNaN(Number(route.params.id))
 }
 
 const title = ref('')
@@ -288,7 +290,7 @@ const title = ref('')
 definePageMeta({
   validate: validateIdParam,
   someData,
-  title,    // do not do this, the ref will be hoisted out of the component
+  title, // do not do this, the ref will be hoisted out of the component
 })
 </script>
 ```
@@ -307,25 +309,25 @@ Nuxt will automatically wrap your page in [the Vue `<KeepAlive>` component](http
 
 When your goal is to preserve state for parent routes use this syntax: `<NuxtPage keepalive />`. You can also set props to be passed to `<KeepAlive>` (see [a full list](https://vuejs.org/api/built-in-components.html#keepalive)).
 
-You can set a default value for this property [in your `nuxt.config`](/docs/api/nuxt-config#keepalive).
+You can set a default value for this property [in your `nuxt.config`](/docs/4.x/api/nuxt-config#keepalive).
 
 #### `key`
 
-[See above](#child-route-keys).
+[See above](/docs/4.x/guide/directory-structure/app/pages#child-route-keys).
 
 #### `layout`
 
-You can define the layout used to render the route. This can be either false (to disable any layout), a string or a ref/computed, if you want to make it reactive in some way. [More about layouts](/docs/guide/directory-structure/app/layouts).
+You can define the layout used to render the route. This can be either false (to disable any layout), a string or a ref/computed, if you want to make it reactive in some way. [More about layouts](/docs/4.x/guide/directory-structure/app/layouts).
 
 #### `layoutTransition` and `pageTransition`
 
 You can define transition properties for the `<transition>` component that wraps your pages and layouts, or pass `false` to disable the `<transition>` wrapper for that route. You can see [a list of options that can be passed](https://vuejs.org/api/built-in-components.html#transition) or read [more about how transitions work](https://vuejs.org/guide/built-ins/transition.html#transition).
 
-You can set default values for these properties [in your `nuxt.config`](/docs/api/nuxt-config#layouttransition).
+You can set default values for these properties [in your `nuxt.config`](/docs/4.x/api/nuxt-config#layouttransition).
 
 #### `middleware`
 
-You can define middleware to apply before loading this page. It will be merged with all the other middleware used in any matching parent/child routes. It can be a string, a function (an anonymous/inlined middleware function following [the global before guard pattern](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards)), or an array of strings/functions. [More about named middleware](/docs/guide/directory-structure/app/middleware).
+You can define middleware to apply before loading this page. It will be merged with all the other middleware used in any matching parent/child routes. It can be a string, a function (an anonymous/inlined middleware function following [the global before guard pattern](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards)), or an array of strings/functions. [More about named middleware](/docs/4.x/guide/directory-structure/app/middleware).
 
 #### `name`
 
@@ -356,7 +358,7 @@ export {}
 
 ## Navigation
 
-To navigate between pages of your app, you should use the [`<NuxtLink>`](/docs/api/components/nuxt-link) component.
+To navigate between pages of your app, you should use the [`<NuxtLink>`](/docs/4.x/api/components/nuxt-link) component.
 
 This component is included with Nuxt and therefore you don't have to import it as you do with other components.
 
@@ -368,7 +370,7 @@ A simple link to the `index.vue` page in your `app/pages` folder:
 </template>
 ```
 
-::read-more{to="/docs/api/components/nuxt-link"}
+::read-more{to="/docs/4.x/api/components/nuxt-link"}
 Learn more about `<NuxtLink>` usage.
 ::
 
@@ -382,16 +384,16 @@ Make sure to always `await` on `navigateTo` or chain its result by returning fro
 
 ```vue twoslash
 <script setup lang="ts">
-const name = ref('');
-const type = ref(1);
+const name = ref('')
+const type = ref(1)
 
-function navigate(){
+function navigate () {
   return navigateTo({
     path: '/search',
     query: {
       name: name.value,
-      type: type.value
-    }
+      type: type.value,
+    },
   })
 }
 </script>
@@ -399,11 +401,11 @@ function navigate(){
 
 ## Client-Only Pages
 
-You can define a page as [client only](/docs/guide/directory-structure/app/components#client-components) by giving it a `.client.vue` suffix. None of the content of this page will be rendered on the server.
+You can define a page as [client only](/docs/4.x/guide/directory-structure/app/components#client-components) by giving it a `.client.vue` suffix. None of the content of this page will be rendered on the server.
 
 ## Server-Only Pages
 
-You can define a page as [server only](/docs/guide/directory-structure/app/components#server-components) by giving it a `.server.vue` suffix. While you will be able to navigate to the page using client-side navigation, controlled by `vue-router`, it will be rendered with a server component automatically, meaning the code required to render the page will not be in your client-side bundle.
+You can define a page as [server only](/docs/4.x/guide/directory-structure/app/components#server-components) by giving it a `.server.vue` suffix. While you will be able to navigate to the page using client-side navigation, controlled by `vue-router`, it will be rendered with a server component automatically, meaning the code required to render the page will not be in your client-side bundle.
 
 ::warning
 Server-only pages must have a single root element. (HTML comments are considered elements as well.)
@@ -413,13 +415,13 @@ Server-only pages must have a single root element. (HTML comments are considered
 
 As your app gets bigger and more complex, your routing might require more flexibility. For this reason, Nuxt directly exposes the router, routes and router options for customization in different ways.
 
-:read-more{to="/docs/guide/recipes/custom-routing"}
+:read-more{to="/docs/4.x/guide/recipes/custom-routing"}
 
 ## Multiple Pages Directories
 
 By default, all your pages should be in one `app/pages` directory at the root of your project.
 
-However, you can use [Nuxt Layers](/docs/getting-started/layers) to create groupings of your app's pages:
+However, you can use [Nuxt Layers](/docs/4.x/getting-started/layers) to create groupings of your app's pages:
 
 ```bash [Directory Structure]
 -| some-app/
@@ -441,4 +443,4 @@ export default defineNuxtConfig({
 })
 ```
 
-:read-more{to="/docs/guide/going-further/layers"}
+:read-more{to="/docs/4.x/guide/going-further/layers"}

package/2.guide/{2.directory-structure → 1.directory-structure}/1.app/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 `app/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 [`app/plugins`](/docs/api/nuxt-config#plugins-1) option in `nuxt.config.ts`:
+To add plugins in subdirectories, you can use the [`app/plugins`](/docs/4.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/4.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/app/composables) as well as [utils](/docs/guide/directory-structure/app/utils) within Nuxt plugins:
+You can use [composables](/docs/4.x/guide/directory-structure/app/composables) as well as [utils](/docs/4.x/guide/directory-structure/app/utils) within Nuxt plugins:
 
 ```ts [app/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/4.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/4.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/app/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/4.x/guide/directory-structure/app/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/4.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:
@@ -267,8 +267,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())
 })
@@ -287,7 +287,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.app/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 [`app/utils/` directory](/docs/guide/directory-structure/app/utils) is to allow a semantic distinction between your Vue composables and other auto-imported utility functions.
+The main purpose of the [`app/utils/` directory](/docs/4.x/guide/directory-structure/app/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 [`app/utils/` directory](/docs/guide/directory-structure
 ```ts twoslash [utils/index.ts]
 export const { format: formatNumber } = Intl.NumberFormat('en-GB', {
   notation: 'compact',
-  maximumFractionDigits: 1
+  maximumFractionDigits: 1,
 })
 ```
 
@@ -35,15 +35,15 @@ You can now use auto imported utility functions in `.js`, `.ts` and `.vue` files
 </template>
 ```
 
-:read-more{to="/docs/guide/concepts/auto-imports"}
+:read-more{to="/docs/4.x/guide/concepts/auto-imports"}
 
-:link-example{to="/docs/examples/features/auto-imports"}
+:link-example{to="/docs/4.x/examples/features/auto-imports"}
 
 ::tip
-The way `app/utils/` auto-imports work and are scanned is identical to the [`app/composables/`](/docs/guide/directory-structure/app/composables) directory.
+The way `app/utils/` auto-imports work and are scanned is identical to the [`app/composables/`](/docs/4.x/guide/directory-structure/app/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/4.x/guide/directory-structure/server#server-utilities) directory.
 ::

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

@@ -2,16 +2,16 @@
 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).
+Nuxt provides an `app/app.config.ts` 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).
 
 You can easily provide runtime app configuration using `app.config.ts` file. It can have either of `.ts`, `.js`, or `.mjs` extensions.
 
-```ts twoslash [app.config.ts]
+```ts twoslash [app/app.config.ts]
 export default defineAppConfig({
-  foo: 'bar'
+  foo: 'bar',
 })
 ```
 
@@ -20,22 +20,22 @@ 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/4.x/api/nuxt-config#srcdir), make sure to place the `app.config` file at the root of the new `srcDir` path.
 ::
 
 ## Usage
 
 To expose config and environment variables to the rest of your app, you will need to define configuration in `app.config` file.
 
-```ts twoslash [app.config.ts]
+```ts twoslash [app/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/4.x/api/composables/use-app-config) composable.
 
 ```vue [app/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/4.x/api/utils/update-app-config) utility can be used to update the `app.config` at runtime.
 
 ```vue [app/pages/index.vue]
 <script setup>
@@ -59,7 +59,7 @@ console.log(appConfig) // { foo: 'baz' }
 </script>
 ```
 
-::read-more{to="/docs/api/utils/update-app-config"}
+::read-more{to="/docs/4.x/api/utils/update-app-config"}
 Read more about the `updateAppConfig` utility.
 ::
 
@@ -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/4.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/4.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.
 
@@ -126,14 +126,14 @@ Here's an example of how you can use:
 
 ::code-group
 
-```ts twoslash [layer/app.config.ts]
+```ts twoslash [layer/app/app.config.ts]
 export default defineAppConfig({
   // Default array value
   array: ['hello'],
 })
 ```
 
-```ts twoslash [app.config.ts]
+```ts twoslash [app/app.config.ts]
 export default defineAppConfig({
   // Overwrite default array value by using a merger function
   array: () => ['bonjour'],
@@ -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()],
+    },
+  },
 })
 ```
 

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

@@ -2,7 +2,7 @@
 title: "app.vue"
 description: "The app.vue file is the main component of your Nuxt application."
 head.title: "app.vue"
-navigation.icon: i-lucide-file
+navigation.icon: i-vscode-icons-file-type-vue
 ---
 
 ::tip
@@ -13,7 +13,7 @@ If you have a `app/pages/` directory, the `app.vue` file is optional. Nuxt will
 
 ### Minimal Usage
 
-With Nuxt, the [`app/pages/`](/docs/guide/directory-structure/app/pages) directory is optional. If it is not present, Nuxt will not include the [vue-router](https://router.vuejs.org) dependency. This is useful when building a landing page or an application that does not require routing.
+With Nuxt, the [`app/pages/`](/docs/4.x/guide/directory-structure/app/pages) directory is optional. If it is not present, Nuxt will not include the [vue-router](https://router.vuejs.org) dependency. This is useful when building a landing page or an application that does not require routing.
 
 ```vue [app/app.vue]
 <template>
@@ -21,11 +21,11 @@ With Nuxt, the [`app/pages/`](/docs/guide/directory-structure/app/pages) directo
 </template>
 ```
 
-:link-example{to="/docs/examples/hello-world"}
+:link-example{to="/docs/4.x/examples/hello-world"}
 
 ### Usage with Pages
 
-When you have a [`app/pages/`](/docs/guide/directory-structure/app/pages) directory, you need to use the [`<NuxtPage>`](/docs/api/components/nuxt-page) component to display the current page:
+When you have a [`app/pages/`](/docs/4.x/guide/directory-structure/app/pages) directory, you need to use the [`<NuxtPage>`](/docs/4.x/api/components/nuxt-page) component to display the current page:
 
 ```vue [app/app.vue]
 <template>
@@ -51,13 +51,13 @@ You can also define the common structure of your application directly in `app.vu
 Remember that `app.vue` acts as the main component of your Nuxt application. Anything you add to it (JS and CSS) will be global and included in every page.
 ::
 
-::read-more{to="/docs/guide/directory-structure/app/pages"}
+::read-more{to="/docs/4.x/guide/directory-structure/app/pages"}
 Learn more about how to structure your pages using the `app/pages/` directory.
 ::
 
 ### Usage with Layouts
 
-When your application requires different layouts for different pages, you can use the `app/layouts/` directory with the [`<NuxtLayout>`](/docs/api/components/nuxt-layout) component. This allows you to define multiple layouts and apply them per page.
+When your application requires different layouts for different pages, you can use the `app/layouts/` directory with the [`<NuxtLayout>`](/docs/4.x/api/components/nuxt-layout) component. This allows you to define multiple layouts and apply them per page.
 
 ```vue [app/app.vue]
 <template>
@@ -67,6 +67,6 @@ When your application requires different layouts for different pages, you can us
 </template>
 ```
 
-::read-more{to="/docs/guide/directory-structure/app/layouts"}
+::read-more{to="/docs/4.x/guide/directory-structure/app/layouts"}
 Learn more about how to structure your layouts using the `app/layouts/` directory.
 ::

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

@@ -2,7 +2,7 @@
 title: "error.vue"
 description: "The error.vue file is the error page in your Nuxt application."
 head.title: "error.vue"
-navigation.icon: i-lucide-file
+navigation.icon: i-vscode-icons-file-type-vue
 ---
 
 During the lifespan of your application, some errors may appear unexpectedly at runtime. In such case, we can use the `error.vue` file to override the default error files and display the error nicely.
@@ -12,7 +12,7 @@ During the lifespan of your application, some errors may appear unexpectedly at
 import type { NuxtError } from '#app'
 
 const props = defineProps({
-  error: Object as () => NuxtError
+  error: Object as () => NuxtError,
 })
 </script>
 
@@ -25,14 +25,14 @@ const props = defineProps({
 ```
 
 ::note
-Although it is called an 'error page' it's not a route and shouldn't be placed in your `~/pages` directory. For the same reason, you shouldn't use `definePageMeta` within this page. That being said, you can still use layouts in the error file, by utilizing the [`NuxtLayout`](/docs/api/components/nuxt-layout) component and specifying the name of the layout.
+Although it is called an 'error page' it's not a route and shouldn't be placed in your `~/pages` directory. For the same reason, you shouldn't use `definePageMeta` within this page. That being said, you can still use layouts in the error file, by utilizing the [`NuxtLayout`](/docs/4.x/api/components/nuxt-layout) component and specifying the name of the layout.
 ::
 
 The error page has a single prop - `error` which contains an error for you to handle.
 
 The `error` object provides the following fields:
 ```ts
-{
+interface NuxtError {
   statusCode: number
   fatal: boolean
   unhandled: boolean
@@ -49,7 +49,7 @@ throw createError({
   statusCode: 404,
   statusMessage: 'Page Not Found',
   data: {
-    myCustomField: true
-  }
+    myCustomField: true,
+  },
 })
 ```