@nuxt/docs-nightly 4.3.0-29356103.2f7957ac → 4.3.0-29430576.f48ea4c8

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

@@ -6,12 +6,12 @@ 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/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).
+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/directory-structure/app/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/4.x/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/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.
 
@@ -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/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:
+If you are using [`app.vue`](/docs/4.x/directory-structure/app/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>
@@ -93,7 +93,7 @@ Here are some examples to illustrate what a page with a single root element look
 
 ## Dynamic Routes
 
-If you place anything within square brackets, it will be turned into a [dynamic route](https://router.vuejs.org/guide/essentials/dynamic-matching.html) parameter. You can mix and match multiple parameters and even non-dynamic text within a file name or directory.
+If you place anything within square brackets, it will be turned into a [dynamic route](https://router.vuejs.org/guide/essentials/dynamic-matching) parameter. You can mix and match multiple parameters and even non-dynamic text within a file name or directory.
 
 If you want a parameter to be _optional_, you must enclose it in double square brackets - for example, `~/pages/[[slug]]/index.vue` or `~/pages/[[slug]].vue` will match both `/` and `/test`.
 
@@ -154,7 +154,7 @@ Navigating to `/hello/world` would render:
 
 ## Nested Routes
 
-It is possible to display [nested routes](https://next.router.vuejs.org/guide/essentials/nested-routes.html) with `<NuxtPage>`.
+It is possible to display [nested routes](https://router.vuejs.org/guide/essentials/nested-routes) with `<NuxtPage>`.
 
 Example:
 
@@ -268,9 +268,9 @@ console.log(route.meta.title) // My home page
 </script>
 ```
 
-If you are using nested routes, the page metadata from all these routes will be merged into a single object. For more on route meta, see the [vue-router docs](https://router.vuejs.org/guide/advanced/meta.html#route-meta-fields).
+If you are using nested routes, the page metadata from all these routes will be merged into a single object. For more on route meta, see the [vue-router docs](https://router.vuejs.org/guide/advanced/meta).
 
-Much like `defineEmits` or `defineProps` (see [Vue docs](https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits)), `definePageMeta` is a **compiler macro**. It will be compiled away so you cannot reference it within your component. Instead, the metadata passed to it will be hoisted out of the component.
+Much like `defineEmits` or `defineProps` (see [Vue docs](https://vuejs.org/api/sfc-script-setup#defineprops-defineemits)), `definePageMeta` is a **compiler macro**. It will be compiled away so you cannot reference it within your component. Instead, the metadata passed to it will be hoisted out of the component.
 Therefore, the page meta object cannot reference the component. However, it can reference imported bindings, as well as locally defined **pure functions**.
 
 ::warning
@@ -301,33 +301,33 @@ Of course, you are welcome to define metadata for your own use throughout your a
 
 #### `alias`
 
-You can define page aliases. They allow you to access the same page from different paths. It can be either a string or an array of strings as defined [in the vue-router documentation](https://router.vuejs.org/guide/essentials/redirect-and-alias.html#Alias).
+You can define page aliases. They allow you to access the same page from different paths. It can be either a string or an array of strings as defined [in the vue-router documentation](https://router.vuejs.org/guide/essentials/redirect-and-alias#Alias).
 
 #### `keepalive`
 
-Nuxt will automatically wrap your page in [the Vue `<KeepAlive>` component](https://vuejs.org/guide/built-ins/keep-alive.html#keepalive) if you set `keepalive: true` in your `definePageMeta`. This might be useful to do, for example, in a parent route that has dynamic child routes, if you want to preserve page state across route changes.
+Nuxt will automatically wrap your page in [the Vue `<KeepAlive>` component](https://vuejs.org/guide/built-ins/keep-alive#keepalive) if you set `keepalive: true` in your `definePageMeta`. This might be useful to do, for example, in a parent route that has dynamic child routes, if you want to preserve page state across route changes.
 
-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)).
+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#keepalive)).
 
 You can set a default value for this property [in your `nuxt.config`](/docs/4.x/api/nuxt-config#keepalive).
 
 #### `key`
 
-[See above](/docs/4.x/guide/directory-structure/app/pages#child-route-keys).
+[See above](/docs/4.x/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/4.x/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/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 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#transition) or read [more about how transitions work](https://vuejs.org/guide/built-ins/transition#transition).
 
 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/4.x/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#Global-Before-Guards)), or an array of strings/functions. [More about named middleware](/docs/4.x/directory-structure/app/middleware).
 
 #### `name`
 
@@ -335,7 +335,7 @@ You may define a name for this page's route.
 
 #### `path`
 
-You may define a path matcher, if you have a more complex pattern than can be expressed with the file name. See [the `vue-router` docs](https://router.vuejs.org/guide/essentials/route-matching-syntax.html#custom-regex-in-params) for more information.
+You may define a path matcher, if you have a more complex pattern than can be expressed with the file name. See [the `vue-router` docs](https://router.vuejs.org/guide/essentials/route-matching-syntax#Custom-regex-in-params) for more information.
 
 #### `props`
 
@@ -401,11 +401,11 @@ function navigate () {
 
 ## Client-Only Pages
 
-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.
+You can define a page as [client only](/docs/4.x/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/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.
+You can define a page as [server only](/docs/4.x/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.)

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

@@ -134,7 +134,7 @@ export default defineNuxtPlugin({
 
 ## Using Composables
 
-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:
+You can use [composables](/docs/4.x/directory-structure/app/composables) as well as [utils](/docs/4.x/directory-structure/app/utils) within Nuxt plugins:
 
 ```ts [app/plugins/hello.ts]
 export default defineNuxtPlugin((nuxtApp) => {
@@ -200,12 +200,12 @@ const { $hello } = useNuxtApp()
 ```
 
 ::important
-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.
+Note that we highly recommend using [`composables`](/docs/4.x/directory-structure/app/composables) instead of providing helpers to avoid polluting the global namespace and keep your main bundle entry small.
 ::
 
 ::warning
 **If your plugin provides a `ref` or `computed`, it will not be unwrapped in a component `<template>`.** :br
-This is due to how Vue works with refs that aren't top-level to the template. You can read more about it [in the Vue documentation](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#caveat-when-unwrapping-in-templates).
+This is due to how Vue works with refs that aren't top-level to the template. You can read more about it [in the Vue documentation](https://vuejs.org/guide/essentials/reactivity-fundamentals#caveat-when-unwrapping-in-templates).
 ::
 
 ## Typing Plugins
@@ -234,10 +234,6 @@ declare module 'vue' {
 export {}
 ```
 
-::note
-If you are using WebStorm, you may need to augment `@vue/runtime-core` until [this issue](https://youtrack.jetbrains.com/issue/WEB-59818/VUE-TypeScript-WS-PS-does-not-correctly-display-type-of-globally-injected-properties) is resolved.
-::
-
 ## Vue Plugins
 
 If you want to use Vue plugins, like [vue-gtag](https://github.com/MatteoGabriele/vue-gtag) to add Google Analytics tags, you can use a Nuxt plugin to do so.

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

@@ -5,7 +5,7 @@ description: Use the utils/ directory to auto-import your utility functions thro
 navigation.icon: i-vscode-icons-folder-type-tools
 ---
 
-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.
+The main purpose of the [`app/utils/` directory](/docs/4.x/directory-structure/app/utils) is to allow a semantic distinction between your Vue composables and other auto-imported utility functions.
 
 ## Usage
 
@@ -40,10 +40,10 @@ You can now use auto imported utility functions in `.js`, `.ts` and `.vue` files
 :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/4.x/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/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/4.x/guide/directory-structure/server#server-utilities) directory.
+Only `server/utils` are auto-imported in the [`server/`](/docs/4.x/directory-structure/server#server-utilities) directory.
 ::

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

@@ -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/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.
+With Nuxt, the [`app/pages/`](/docs/4.x/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>
@@ -25,7 +25,7 @@ With Nuxt, the [`app/pages/`](/docs/4.x/guide/directory-structure/app/pages) dir
 
 ### Usage with Pages
 
-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:
+When you have a [`app/pages/`](/docs/4.x/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,7 +51,7 @@ 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/4.x/guide/directory-structure/app/pages"}
+::read-more{to="/docs/4.x/directory-structure/app/pages"}
 Learn more about how to structure your pages using the `app/pages/` directory.
 ::
 
@@ -67,6 +67,6 @@ When your application requires different layouts for different pages, you can us
 </template>
 ```
 
-::read-more{to="/docs/4.x/guide/directory-structure/app/layouts"}
+::read-more{to="/docs/4.x/directory-structure/app/layouts"}
 Learn more about how to structure your layouts using the `app/layouts/` directory.
 ::

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

@@ -11,9 +11,7 @@ During the lifespan of your application, some errors may appear unexpectedly at
 <script setup lang="ts">
 import type { NuxtError } from '#app'
 
-const props = defineProps({
-  error: Object as () => NuxtError,
-})
+const props = defineProps<{ error: NuxtError }>()
 </script>
 
 <template>

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

@@ -5,7 +5,7 @@ description: Use the content/ directory to create a file-based CMS for your appl
 navigation.icon: i-vscode-icons-folder-type-log
 ---
 
-[Nuxt Content](https://content.nuxt.com) reads the [`content/` directory](/docs/4.x/guide/directory-structure/content) in your project and parses `.md`, `.yml`, `.csv` and `.json` files to create a file-based CMS for your application.
+[Nuxt Content](https://content.nuxt.com) reads the `content/` directory in your project and parses `.md`, `.yml`, `.csv` and `.json` files to create a file-based CMS for your application.
 
 - Render your content with built-in components.
 - Query your content with a MongoDB-like API.
@@ -36,7 +36,7 @@ The module automatically loads and parses them.
 
 ## Render Content
 
-To render content pages, add a [catch-all route](/docs/4.x/guide/directory-structure/app/pages/#catch-all-route) using the [`<ContentRenderer>`](https://content.nuxt.com/docs/components/content-renderer) component:
+To render content pages, add a [catch-all route](/docs/4.x/directory-structure/app/pages/#catch-all-route) using the [`<ContentRenderer>`](https://content.nuxt.com/docs/components/content-renderer) component:
 
 ```vue [app/pages/[...slug\\].vue]
 <script lang="ts" setup>

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

@@ -11,7 +11,7 @@ The auto-registered files patterns are:
 - `modules/*/index.ts`
 - `modules/*.ts`
 
-You don't need to add those local modules to your [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config) separately.
+You don't need to add those local modules to your [`nuxt.config.ts`](/docs/4.x/directory-structure/nuxt-config) separately.
 
 ::code-group
 
@@ -59,7 +59,7 @@ modules/
   2.second-module.ts
 ```
 
-:read-more{to="/docs/4.x/guide/going-further/modules"}
+:read-more{to="/docs/4.x/guide/modules"}
 
 ::tip{icon="i-lucide-video" to="https://vueschool.io/lessons/creating-your-first-module-from-scratch?friend=nuxt" target="_blank"}
 Watch Vue School video about Nuxt private modules.

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

@@ -5,8 +5,8 @@ head.title: "node_modules/"
 navigation.icon: i-vscode-icons-folder-type-node
 ---
 
-The package manager ([`npm`](https://docs.npmjs.com/cli/commands/npm) or [`yarn`](https://yarnpkg.com) or [`pnpm`](https://pnpm.io/cli/install) or [`bun`](https://bun.sh/package-manager)) creates this directory to store the dependencies of your project.
+The package manager ([`npm`](https://docs.npmjs.com/cli/commands/npm/) or [`yarn`](https://yarnpkg.com) or [`pnpm`](https://pnpm.io/cli/install) or [`bun`](https://bun.com/package-manager)) creates this directory to store the dependencies of your project.
 
 ::important
-This directory should be added to your [`.gitignore`](/docs/4.x/guide/directory-structure/gitignore) file to avoid pushing the dependencies to your repository.
+This directory should be added to your [`.gitignore`](/docs/4.x/directory-structure/gitignore) file to avoid pushing the dependencies to your repository.
 ::

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

@@ -22,6 +22,6 @@ useSeoMeta({
 </script>
 ```
 
-::tip{to="https://v2.nuxt.com/docs/directory-structure/static" target="_blank"}
+::tip{to="https://v2.nuxt.com/docs/directory-structure/static/" target="_blank"}
 This is known as the [`static/`] directory in Nuxt 2.
 ::

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

@@ -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/4.x/guide/directory-structure/app/pages#dynamic-routes) do.
+Note that currently server routes do not support the full functionality of dynamic routes as [pages](/docs/4.x/directory-structure/app/pages#dynamic-routes) do.
 ::
 
 ## Server Middleware
@@ -132,9 +132,9 @@ export const defineWrappedResponseHandler = <T extends EventHandlerRequest, D> (
 
 ## Server Types
 
-::tip
-This feature is available from Nuxt >= 3.5
-::
+Auto-imports and other types are different for the `server/` directory, as it is running in a different context from the `app/` directory.
+
+By default, Nuxt 4 generates a [`tsconfig.json`](/docs/4.x/directory-structure/tsconfig) which includes a project reference covering the `server/` folder which ensures accurate typings.
 
 ## Recipes
 
@@ -158,7 +158,7 @@ You can now universally call this API on `/api/hello/nuxt` and get `Hello, nuxt!
 
 ### Matching HTTP Method
 
-Handle file names can be suffixed with `.get`, `.post`, `.put`, `.delete`, ... to match request's [HTTP Method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods).
+Handle file names can be suffixed with `.get`, `.post`, `.put`, `.delete`, ... to match request's [HTTP Method](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Methods).
 
 ```ts [server/api/test.get.ts]
 export default defineEventHandler(() => 'Test get handler')
@@ -226,7 +226,7 @@ export default defineEventHandler(async (event) => {
 })
 ```
 
-::tip{to="https://unjs.io/blog/2023-08-15-h3-towards-the-edge-of-the-web#runtime-type-safe-request-utils"}
+::tip{to="https://unjs.io/blog/2023-08-15-h3-towards-the-edge-of-the-web/#runtime-type-safe-request-utils"}
 Alternatively, use `readValidatedBody` with a schema validator such as Zod for runtime and type safety.
 ::
 
@@ -454,7 +454,7 @@ Never combine `next()` callback with a legacy middleware that is `async` or retu
 
 ### Server Storage
 
-Nitro provides a cross-platform [storage layer](https://nitro.build/guide/storage). In order to configure additional storage mount points, you can use `nitro.storage`, or [server plugins](/docs/4.x/guide/directory-structure/server#server-plugins).
+Nitro provides a cross-platform [storage layer](https://nitro.build/guide/storage). In order to configure additional storage mount points, you can use `nitro.storage`, or [server plugins](/docs/4.x/directory-structure/server#server-plugins).
 
 **Example of adding a Redis storage:**
 

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

@@ -35,7 +35,7 @@ export default function (input: string) {
 }
 ```
 
-You can now use [auto-imported](/docs/4.x/guide/directory-structure/shared) utilities in your Nuxt app and `server/` directory.
+You can now use [auto-imported](/docs/4.x/directory-structure/shared) utilities in your Nuxt app and `server/` directory.
 
 ```vue [app/app.vue]
 <script setup lang="ts">
@@ -62,10 +62,10 @@ 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 [`app/composables/`](/docs/4.x/guide/directory-structure/app/composables) and [`app/utils/`](/docs/4.x/guide/directory-structure/app/utils) directories.
+The way `shared/utils` and `shared/types` auto-imports work and are scanned is identical to the [`app/composables/`](/docs/4.x/directory-structure/app/composables) and [`app/utils/`](/docs/4.x/directory-structure/app/utils) directories.
 ::
 
-:read-more{to="/docs/4.x/guide/directory-structure/app/composables#how-files-are-scanned"}
+:read-more{to="/docs/4.x/directory-structure/app/composables#how-files-are-scanned"}
 
 ```bash [Directory Structure]
 -| shared/

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

@@ -6,7 +6,7 @@ navigation.icon: i-vscode-icons-file-type-dotenv
 ---
 
 ::important
-This file should be added to your [`.gitignore`](/docs/4.x/guide/directory-structure/gitignore) file to avoid pushing secrets to your repository.
+This file should be added to your [`.gitignore`](/docs/4.x/directory-structure/gitignore) file to avoid pushing secrets to your repository.
 ::
 
 ## Dev, Build and Generate Time
@@ -75,5 +75,5 @@ Note that for a purely static site, it is not possible to set runtime configurat
 
 ::note
 If you want to use environment variables set at build time but do not care about updating these down the line (or only need to update them reactively _within_ your app) then `appConfig` may be a better choice. You can define `appConfig` both within your `nuxt.config` (using environment variables) and also within an `~/app.config.ts` file in your project.
-:read-more{to="/docs/4.x/guide/directory-structure/app-config"}
+:read-more{to="/docs/4.x/directory-structure/app/app-config"}
 ::

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

@@ -8,7 +8,7 @@ navigation.icon: i-vscode-icons-file-type-nuxt
 
 The `.nuxtignore` file tells Nuxt to ignore files in your project’s root directory ([`rootDir`](/docs/4.x/api/nuxt-config#rootdir)) during the build phase.
 
-It is subject to the same specification as [`.gitignore`](/docs/4.x/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/4.x/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/4.x/api/nuxt-config#ignoreoptions), [`ignorePrefix`](/docs/4.x/api/nuxt-config#ignoreprefix) and [`ignore`](/docs/4.x/api/nuxt-config#ignore) in your `nuxt.config` file.

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

@@ -8,7 +8,7 @@ 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/4.x/guide/directory-structure/nuxt-config).
+For more advanced configurations, use [`nuxt.config`](/docs/4.x/directory-structure/nuxt-config).
 ::
 
 ## Usage

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

@@ -31,4 +31,4 @@ export default defineNuxtConfig({
 Discover all the available options in the **Nuxt configuration** documentation.
 ::
 
-To ensure your configuration is up to date, Nuxt will make a full restart when detecting changes in the main configuration file, the [`.env`](/docs/4.x/guide/directory-structure/env), [`.nuxtignore`](/docs/4.x/guide/directory-structure/nuxtignore) and [`.nuxtrc`](/docs/4.x/guide/directory-structure/nuxtrc) dotfiles.
+To ensure your configuration is up to date, Nuxt will make a full restart when detecting changes in the main configuration file, the [`.env`](/docs/4.x/directory-structure/env), [`.nuxtignore`](/docs/4.x/directory-structure/nuxtignore) and [`.nuxtrc`](/docs/4.x/directory-structure/nuxtrc) dotfiles.

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

@@ -27,6 +27,6 @@ The minimal `package.json` of your Nuxt application should looks like:
 }
 ```
 
-::read-more{icon="i-simple-icons-npm" to="https://docs.npmjs.com/cli/configuring-npm/package-json" target="_blank"}
+::read-more{icon="i-simple-icons-npm" to="https://docs.npmjs.com/cli/configuring-npm/package-json/" target="_blank"}
 Read more about the `package.json` file.
 ::

package/2.directory-structure/3.tsconfig.md

@@ -0,0 +1,69 @@
+---
+title: "tsconfig.json"
+description: "Learn how Nuxt manages TypeScript configuration across different parts of your project."
+head.title: "tsconfig.json"
+navigation.icon: i-vscode-icons-file-type-tsconfig
+---
+
+Nuxt [automatically generates](/docs/4.x/guide/concepts/typescript#auto-generated-types) multiple TypeScript configuration files (`.nuxt/tsconfig.app.json`, `.nuxt/tsconfig.server.json`, `.nuxt/tsconfig.node.json` and `.nuxt/tsconfig.shared.json`) that include recommended basic TypeScript configuration for your project, references to [auto-imports](/docs/4.x/guide/concepts/auto-imports), [API route types](/docs/4.x/guide/concepts/server-engine#typed-api-routes), path aliases, and more.
+
+Your Nuxt project should include the following `tsconfig.json` file at the root of the project:
+
+```json [tsconfig.json]
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}
+```
+
+::warning
+We do not recommend modifying the contents of this file directly, as doing so could overwrite important settings that Nuxt or other modules rely on. Instead, extend it via `nuxt.config.ts`.
+::
+
+::read-more{to="/docs/4.x/guide/concepts/typescript#project-references"}
+Read more about the different type contexts of a Nuxt project here.
+::
+
+## Extending TypeScript Configuration
+
+You can customize the TypeScript configuration of your Nuxt project for each context (`app`, `shared`, `node`, and `server`) in the `nuxt.config.ts` file.
+<!-- @case-police-ignore tsConfig -->
+```ts twoslash [nuxt.config.ts]
+export default defineNuxtConfig({
+  typescript: {
+    // customize tsconfig.app.json
+    tsConfig: {
+      // ...
+    },
+    // customize tsconfig.shared.json
+    sharedTsConfig: {
+      // ...
+    },
+    // customize tsconfig.node.json
+    nodeTsConfig: {
+      // ...
+    },
+  },
+  nitro: {
+    typescript: {
+      // customize tsconfig.server.json
+      tsConfig: {
+        // ...
+      },
+    },
+  },
+})
+```

package/2.directory-structure/index.md

@@ -0,0 +1,61 @@
+---
+title: 'Nuxt Directory Structure'
+description: 'Learn about the directory structure of a Nuxt application and how to use it.'
+navigation: false
+---
+
+Nuxt applications have a specific directory structure that is used to organize the code. This structure is designed to be easy to understand and to be used in a consistent way.
+
+## Root Directory
+
+The root directory of a Nuxt application is the directory that contains the `nuxt.config.ts` file. This file is used to configure the Nuxt application.
+
+## App Directory
+
+The `app/` directory is the main directory of the Nuxt application. It contains the following subdirectories:
+- [`assets/`](/docs/4.x/directory-structure/app/assets): website's assets that the build tool (Vite or webpack) will process
+- [`components/`](/docs/4.x/directory-structure/app/components): Vue components of the application
+- [`composables/`](/docs/4.x/directory-structure/app/composables): add your Vue composables
+- [`layouts/`](/docs/4.x/directory-structure/app/layouts): Vue components that wrap around your pages and avoid re-rendering between pages
+- [`middleware/`](/docs/4.x/directory-structure/app/middleware): run code before navigating to a particular route
+- [`pages/`](/docs/4.x/directory-structure/app/pages): file-based routing to create routes within your web application
+- [`plugins/`](/docs/4.x/directory-structure/app/plugins): use Vue plugins and more at the creation of your Nuxt application
+- [`utils/`](/docs/4.x/directory-structure/app/utils): add functions throughout your application that can be used in your components, composables, and pages.
+
+This directory also includes specific files:
+- [`app.config.ts`](/docs/4.x/directory-structure/app/app-config): a reactive configuration within your application
+- [`app.vue`](/docs/4.x/directory-structure/app/app): the root component of your Nuxt application
+- [`error.vue`](/docs/4.x/directory-structure/app/error): the error page of your Nuxt application
+
+## Public Directory
+
+The [`public/`](/docs/4.x/directory-structure/public) directory is the directory that contains the public files of the Nuxt application. Files contained within this 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`).
+
+## Server Directory
+
+The [`server/`](/docs/4.x/directory-structure/server) directory is the directory that contains the server-side code of the Nuxt application. It contains the following subdirectories:
+- [`api/`](/docs/4.x/directory-structure/server#server-routes): contains the API routes of the application.
+- [`routes/`](/docs/4.x/directory-structure/server#server-routes): contains the server routes of the application (e.g. dynamic `/sitemap.xml`).
+- [`middleware/`](/docs/4.x/directory-structure/server#server-middleware): run code before a server route is processed
+- [`plugins/`](/docs/4.x/directory-structure/server#server-plugins): use plugins and more at the creation of the Nuxt server
+- [`utils/`](/docs/4.x/directory-structure/server#server-utilities): add functions throughout your application that can be used in your server  code.
+
+## Shared Directory
+
+The [`shared/`](/docs/4.x/directory-structure/shared) directory is the directory that contains the shared code of the Nuxt application and Nuxt server. This code can be used in both the Vue app and the Nitro server.
+
+## Content Directory
+
+The [`content/`](/docs/4.x/directory-structure/content) directory is enabled by the [Nuxt Content](https://content.nuxt.com) module. It is used to create a file-based CMS for your application using Markdown files.
+
+## Modules Directory
+
+The [`modules/`](/docs/4.x/directory-structure/modules) directory is the directory that contains the local modules of the Nuxt application. Modules are used to extend the functionality of the Nuxt application.
+
+## Nuxt Files
+
+- [`nuxt.config.ts`](/docs/4.x/directory-structure/nuxt-config) file is the main configuration file for the Nuxt application.
+- [`.nuxtrc`](/docs/4.x/directory-structure/nuxtrc) file is another syntax for configuring the Nuxt application (useful for global configurations).
+- [`.nuxtignore`](/docs/4.x/directory-structure/nuxtignore) file is used to ignore files in the root directory during the build phase.

package/{2.guide → 3.guide}/0.index.md

@@ -7,19 +7,22 @@ surround: false
 ---
 
 ::card-group{class="sm:grid-cols-1"}
-  ::card{icon="i-lucide-folders" title="Directory Structure" to="/docs/4.x/guide/directory-structure"}
-  Learn about Nuxt directory structure and what benefits each directory or file offers.
-  ::
   ::card{icon="i-lucide-medal" title="Key Concepts" to="/docs/4.x/guide/concepts"}
   Discover the main concepts behind Nuxt, from auto-import, hybrid rendering to its TypeScript support.
   ::
-  ::card{icon="i-lucide-star" title="Going Further" to="/docs/4.x/guide/going-further"}
-  Master Nuxt with advanced concepts like experimental features, hooks, modules, and more.
+  ::card{icon="i-lucide-square-check" title="Best Practices" to="/docs/4.x/guide/best-practices"}
+  Learn about best practices when developing with Nuxt.
+  ::
+  ::card{icon="i-lucide-bot" title="Working with AI" to="/docs/4.x/guide/ai"}
+  Integrate AI tools into your Nuxt workflow with MCP Server and LLMs.txt.
+  ::
+  ::card{icon="i-lucide-box" title="Module Author Guide" to="/docs/4.x/guide/modules"}
+  Learn how to create Nuxt modules to integrate, enhance or extend any Nuxt application.
   ::
   ::card{icon="i-lucide-book-open" title="Recipes" to="/docs/4.x/guide/recipes"}
   Find solutions to common problems and learn how to implement them in your Nuxt project.
   ::
-  ::card{icon="i-lucide-square-check" title="Best Practices" to="/docs/4.x/guide/best-practices"}
-  Learn about best practices when developing with Nuxt
+  ::card{icon="i-lucide-star" title="Going Further" to="/docs/4.x/guide/going-further"}
+  Master Nuxt with advanced concepts like experimental features, hooks, and more.
   ::
 ::