@nuxt/docs 3.20.1 → 3.20.2

package/1.getting-started/01.introduction.md

@@ -19,7 +19,7 @@ If you want to play around with Nuxt in your browser, you can [try it out in one
 
 Nuxt uses conventions and an opinionated directory structure to automate repetitive tasks and allow developers to focus on pushing features. The configuration file can still customize and override its default behaviors.
 
-- **File-based routing:** define routes based on the structure of your [`pages/` directory](/docs/3.x/guide/directory-structure/pages). This can make it easier to organize your application and avoid the need for manual route configuration.
+- **File-based routing:** define routes based on the structure of your [`pages/` directory](/docs/3.x/directory-structure/pages). This can make it easier to organize your application and avoid the need for manual route configuration.
 - **Code splitting:** Nuxt automatically splits your code into smaller chunks, which can help reduce the initial load time of your application.
 - **Server-side rendering out of the box:** Nuxt comes with built-in SSR capabilities, so you don't have to set up a separate server yourself.
 - **Auto-imports:** write Vue composables and components in their respective directories and use them without having to import them with the benefits of tree-shaking and optimized JS bundles.

package/1.getting-started/03.configuration.md

@@ -4,11 +4,11 @@ description: Nuxt is configured with sensible defaults to make you productive.
 navigation.icon: i-lucide-cog
 ---
 
-By default, Nuxt is configured to cover most use cases. The [`nuxt.config.ts`](/docs/3.x/guide/directory-structure/nuxt-config) file can override or extend this default configuration.
+By default, Nuxt is configured to cover most use cases. The [`nuxt.config.ts`](/docs/3.x/directory-structure/nuxt-config) file can override or extend this default configuration.
 
 ## Nuxt Configuration
 
-The [`nuxt.config.ts`](/docs/3.x/guide/directory-structure/nuxt-config) file is located at the root of a Nuxt project and can override or extend the application's behavior.
+The [`nuxt.config.ts`](/docs/3.x/directory-structure/nuxt-config) file is located at the root of a Nuxt project and can override or extend the application's behavior.
 
 A minimal configuration file exports the `defineNuxtConfig` function containing an object with your configuration. The `defineNuxtConfig` helper is globally available without import.
 
@@ -145,7 +145,7 @@ Non primitive JS types         | ❌ No            | ✅ Yes
 
 ## External Configuration Files
 
-Nuxt uses [`nuxt.config.ts`](/docs/3.x/guide/directory-structure/nuxt-config) file as the single source of truth for configurations and skips reading external configuration files. During the course of building your project, you may have a need to configure those. The following table highlights common configurations and, where applicable, how they can be configured with Nuxt.
+Nuxt uses [`nuxt.config.ts`](/docs/3.x/directory-structure/nuxt-config) file as the single source of truth for configurations and skips reading external configuration files. During the course of building your project, you may have a need to configure those. The following table highlights common configurations and, where applicable, how they can be configured with Nuxt.
 
 Name                                         | Config File               |  How To Configure
 ---------------------------------------------|---------------------------|-------------------------

package/1.getting-started/04.views.md

@@ -26,7 +26,7 @@ If you are familiar with Vue, you might wonder where `main.js` is (the file that
 
 ![Components are reusable pieces of UI](/assets/docs/getting-started/views/components.svg)
 
-Most components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the [`components/`](/docs/3.x/guide/directory-structure/components) directory, and they will be automatically available across your application without having to explicitly import them.
+Most components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the [`components/`](/docs/3.x/directory-structure/components) directory, and they will be automatically available across your application without having to explicitly import them.
 
 ::code-group
 
@@ -55,9 +55,9 @@ Most components are reusable pieces of the user interface, like buttons and menu
 
 ![Pages are views tied to a specific route](/assets/docs/getting-started/views/pages.svg)
 
-Pages represent views for each specific route pattern. Every file in the [`pages/`](/docs/3.x/guide/directory-structure/pages) directory represents a different route displaying its content.
+Pages represent views for each specific route pattern. Every file in the [`pages/`](/docs/3.x/directory-structure/pages) directory represents a different route displaying its content.
 
-To use pages, create `pages/index.vue` file and add `<NuxtPage />` component to the [`app.vue`](/docs/3.x/guide/directory-structure/app) (or remove `app.vue` for default entry). You can now create more pages and their corresponding routes by adding new files in the [`pages/`](/docs/3.x/guide/directory-structure/pages) directory.
+To use pages, create `pages/index.vue` file and add `<NuxtPage />` component to the [`app.vue`](/docs/3.x/directory-structure/app) (or remove `app.vue` for default entry). You can now create more pages and their corresponding routes by adding new files in the [`pages/`](/docs/3.x/directory-structure/pages) directory.
 
 ::code-group
 
@@ -91,7 +91,7 @@ To use pages, create `pages/index.vue` file and add `<NuxtPage />` component to
 Layouts are wrappers around pages that contain a common User Interface for several pages, such as header and footer displays. Layouts are Vue files using `<slot />` components to display the **page** content. The `layouts/default.vue` file will be used by default. Custom layouts can be set as part of your page metadata.
 
 ::note
-If you only have a single layout in your application, we recommend using [`app.vue`](/docs/3.x/guide/directory-structure/app) with [`<NuxtPage />`](/docs/3.x/api/components/nuxt-page) instead.
+If you only have a single layout in your application, we recommend using [`app.vue`](/docs/3.x/directory-structure/app) with [`<NuxtPage />`](/docs/3.x/api/components/nuxt-page) instead.
 ::
 
 ::code-group
@@ -137,7 +137,7 @@ If you only have a single layout in your application, we recommend using [`app.v
 
 ::
 
-If you want to create more layouts and learn how to use them in your pages, find more information in the [Layouts section](/docs/3.x/guide/directory-structure/layouts).
+If you want to create more layouts and learn how to use them in your pages, find more information in the [Layouts section](/docs/3.x/directory-structure/layouts).
 
 ## Advanced: Extending the HTML Template
 

package/1.getting-started/05.assets.md

@@ -6,14 +6,14 @@ navigation.icon: i-lucide-image
 
 Nuxt uses two directories to handle assets like stylesheets, fonts or images.
 
-- The [`public/`](/docs/3.x/guide/directory-structure/public) directory content is served at the server root as-is.
-- The [`assets/`](/docs/3.x/guide/directory-structure/assets) directory contains by convention every asset that you want the build tool (Vite or webpack) to process.
+- The [`public/`](/docs/3.x/directory-structure/public) directory content is served at the server root as-is.
+- The [`assets/`](/docs/3.x/directory-structure/assets) directory contains by convention every asset that you want the build tool (Vite or webpack) to process.
 
 ## Public Directory
 
-The [`public/`](/docs/3.x/guide/directory-structure/public) directory is used as a public server for static assets publicly available at a defined URL of your application.
+The [`public/`](/docs/3.x/directory-structure/public) directory is used as a public server for static assets publicly available at a defined URL of your application.
 
-You can get a file in the [`public/`](/docs/3.x/guide/directory-structure/public) directory from your application's code or from a browser by the root URL `/`.
+You can get a file in the [`public/`](/docs/3.x/directory-structure/public) directory from your application's code or from a browser by the root URL `/`.
 
 ### Example
 
@@ -32,9 +32,9 @@ For example, referencing an image file in the `public/img/` directory, available
 
 Nuxt uses [Vite](https://vite.dev/guide/assets.html) (default) or [webpack](https://webpack.js.org/guides/asset-management) to build and bundle your application. The main function of these build tools is to process JavaScript files, but they can be extended through [plugins](https://vite.dev/plugins) (for Vite) or [loaders](https://webpack.js.org/loaders) (for webpack) to process other kinds of assets, like stylesheets, fonts or SVGs. This step transforms the original file, mainly for performance or caching purposes (such as stylesheet minification or browser cache invalidation).
 
-By convention, Nuxt uses the [`assets/`](/docs/3.x/guide/directory-structure/assets) directory to store these files but there is no auto-scan functionality for this directory, and you can use any other name for it.
+By convention, Nuxt uses the [`assets/`](/docs/3.x/directory-structure/assets) directory to store these files but there is no auto-scan functionality for this directory, and you can use any other name for it.
 
-In your application's code, you can reference a file located in the [`assets/`](/docs/3.x/guide/directory-structure/assets) directory by using the `~/assets/` path.
+In your application's code, you can reference a file located in the [`assets/`](/docs/3.x/directory-structure/assets) directory by using the `~/assets/` path.
 
 ### Example
 
@@ -50,5 +50,5 @@ For example, referencing an image file that will be processed if a build tool is
 ```
 
 ::note
-Nuxt won't serve files in the [`assets/`](/docs/3.x/guide/directory-structure/assets) directory at a static URL like `/assets/my-file.png`. If you need a static URL, use the [`public/`](#public-directory) directory.
+Nuxt won't serve files in the [`assets/`](/docs/3.x/directory-structure/assets) directory at a static URL like `/assets/my-file.png`. If you need a static URL, use the [`public/`](#public-directory) directory.
 ::

package/1.getting-started/06.styling.md

@@ -9,7 +9,7 @@ You can use CSS preprocessors, CSS frameworks, UI libraries and Nuxt modules to
 
 ## Local Stylesheets
 
-If you're writing local stylesheets, the natural place to put them is the [`assets/` directory](/docs/3.x/guide/directory-structure/assets).
+If you're writing local stylesheets, the natural place to put them is the [`assets/` directory](/docs/3.x/directory-structure/assets).
 
 ### Importing Within Components
 
@@ -37,7 +37,7 @@ The stylesheets will be inlined in the HTML rendered by Nuxt.
 ### The CSS Property
 
 You can also use the `css` property in the Nuxt configuration.
-The natural place for your stylesheets is the [`assets/` directory](/docs/3.x/guide/directory-structure/assets). You can then reference its path and Nuxt will include it to all the pages of your application.
+The natural place for your stylesheets is the [`assets/` directory](/docs/3.x/directory-structure/assets). You can then reference its path and Nuxt will include it to all the pages of your application.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -515,7 +515,7 @@ Here are a few modules to help you get started:
 - [Nuxt UI](https://ui.nuxt.com): A UI Library for Modern Web Apps
 - [Panda CSS](https://panda-css.com/docs/installation/nuxt): CSS-in-JS engine that generates atomic CSS at build time
 
-Nuxt modules provide you with a good developer experience out of the box, but remember that if your favorite tool doesn't have a module, it doesn't mean that you can't use it with Nuxt! You can configure it yourself for your own project. Depending on the tool, you might need to use a [Nuxt plugin](/docs/3.x/guide/directory-structure/plugins) and/or [make your own module](/docs/3.x/guide/going-further/modules). Share them with the [community](/modules) if you do!
+Nuxt modules provide you with a good developer experience out of the box, but remember that if your favorite tool doesn't have a module, it doesn't mean that you can't use it with Nuxt! You can configure it yourself for your own project. Depending on the tool, you might need to use a [Nuxt plugin](/docs/3.x/directory-structure/plugins) and/or [make your own module](/docs/3.x/guide/going-further/modules). Share them with the [community](/modules) if you do!
 
 ### Easily Load Webfonts
 

package/1.getting-started/07.routing.md

@@ -4,11 +4,11 @@ description: Nuxt file-system routing creates a route for every file in the page
 navigation.icon: i-lucide-milestone
 ---
 
-One core feature of Nuxt is the file system router. Every Vue file inside the [`pages/`](/docs/3.x/guide/directory-structure/pages) directory creates a corresponding URL (or route) that displays the contents of the file. By using dynamic imports for each page, Nuxt leverages code-splitting to ship the minimum amount of JavaScript for the requested route.
+One core feature of Nuxt is the file system router. Every Vue file inside the [`pages/`](/docs/3.x/directory-structure/pages) directory creates a corresponding URL (or route) that displays the contents of the file. By using dynamic imports for each page, Nuxt leverages code-splitting to ship the minimum amount of JavaScript for the requested route.
 
 ## Pages
 
-Nuxt routing is based on [vue-router](https://router.vuejs.org) and generates the routes from every component created in the [`pages/` directory](/docs/3.x/guide/directory-structure/pages), based on their filename.
+Nuxt routing is based on [vue-router](https://router.vuejs.org) and generates the routes from every component created in the [`pages/` directory](/docs/3.x/directory-structure/pages), based on their filename.
 
 This file system routing uses naming conventions to create dynamic and nested routes:
 
@@ -91,14 +91,14 @@ Route middleware runs within the Vue part of your Nuxt app. Despite the similar
 ::
 
 ::important
-Route middleware does **not** run for server routes (e.g. `/api/*`) or other server requests. To apply middleware to these requests, use [server middleware](/docs/3.x/guide/directory-structure/server#server-middleware) instead.
+Route middleware does **not** run for server routes (e.g. `/api/*`) or other server requests. To apply middleware to these requests, use [server middleware](/docs/3.x/directory-structure/server#server-middleware) instead.
 ::
 
 There are three kinds of route middleware:
 
 1. Anonymous (or inline) route middleware, which are defined directly in the pages where they are used.
-2. Named route middleware, which are placed in the [`middleware/`](/docs/3.x/guide/directory-structure/middleware) directory and will be automatically loaded via asynchronous import when used on a page. (**Note**: The route middleware name is normalized to kebab-case, so `someMiddleware` becomes `some-middleware`.)
-3. Global route middleware, which are placed in the [`middleware/`](/docs/3.x/guide/directory-structure/middleware) directory (with a `.global` suffix) and will be automatically run on every route change.
+2. Named route middleware, which are placed in the [`middleware/`](/docs/3.x/directory-structure/middleware) directory and will be automatically loaded via asynchronous import when used on a page. (**Note**: The route middleware name is normalized to kebab-case, so `someMiddleware` becomes `some-middleware`.)
+3. Global route middleware, which are placed in the [`middleware/`](/docs/3.x/directory-structure/middleware) directory (with a `.global` suffix) and will be automatically run on every route change.
 
 Example of an `auth` middleware protecting the `/dashboard` page:
 

package/1.getting-started/08.seo-meta.md

@@ -9,7 +9,7 @@ and numerous configuration options to manage your app's head and SEO meta tags.
 
 ## Nuxt Config
 
-Providing an [`app.head`](/docs/3.x/api/nuxt-config#head) property in your [`nuxt.config.ts`](/docs/3.x/guide/directory-structure/nuxt-config) allows you to statically customize the head for your entire app.
+Providing an [`app.head`](/docs/3.x/api/nuxt-config#head) property in your [`nuxt.config.ts`](/docs/3.x/directory-structure/nuxt-config) allows you to statically customize the head for your entire app.
 
 ::important
 This method does not allow you to provide reactive data. We recommend using `useHead()` in `app.vue`.
@@ -273,7 +273,7 @@ useHead({
 
 ### With `definePageMeta`
 
-Within your [`pages/` directory](/docs/3.x/guide/directory-structure/pages), you can use `definePageMeta` along with [`useHead`](/docs/3.x/api/composables/use-head) to set metadata based on the current route.
+Within your [`pages/` directory](/docs/3.x/directory-structure/pages), you can use `definePageMeta` along with [`useHead`](/docs/3.x/api/composables/use-head) to set metadata based on the current route.
 
 For example, you can first set the current page title (this is extracted at build time via a macro, so it can't be set dynamically):
 

package/1.getting-started/09.transitions.md

@@ -10,7 +10,7 @@ Nuxt leverages Vue's [`<Transition>`](https://vuejs.org/guide/built-ins/transiti
 
 ## Page Transitions
 
-You can enable page transitions to apply an automatic transition for all your [pages](/docs/3.x/guide/directory-structure/pages).
+You can enable page transitions to apply an automatic transition for all your [pages](/docs/3.x/directory-structure/pages).
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -24,7 +24,7 @@ export default defineNuxtConfig({
 If you are changing layouts as well as page, the page transition you set here will not run. Instead, you should set a [layout transition](/docs/3.x/getting-started/transitions#layout-transitions).
 ::
 
-To start adding transition between your pages, add the following CSS to your [`app.vue`](/docs/3.x/guide/directory-structure/app):
+To start adding transition between your pages, add the following CSS to your [`app.vue`](/docs/3.x/directory-structure/app):
 
 ::code-group
 
@@ -115,7 +115,7 @@ Moving to the about page will add the 3d rotation effect:
 
 ## Layout Transitions
 
-You can enable layout transitions to apply an automatic transition for all your [layouts](/docs/3.x/guide/directory-structure/layouts).
+You can enable layout transitions to apply an automatic transition for all your [layouts](/docs/3.x/directory-structure/layouts).
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -125,7 +125,7 @@ export default defineNuxtConfig({
 })
 ```
 
-To start adding transition between your pages and layouts, add the following CSS to your [`app.vue`](/docs/3.x/guide/directory-structure/app):
+To start adding transition between your pages and layouts, add the following CSS to your [`app.vue`](/docs/3.x/directory-structure/app):
 
 ::code-group
 
@@ -315,7 +315,7 @@ Learn more about additional [JavaScript hooks](https://vuejs.org/guide/built-ins
 
 ## Dynamic Transitions
 
-To apply dynamic transitions using conditional logic, you can leverage inline [middleware](/docs/3.x/guide/directory-structure/middleware) to assign a different transition name to `to.meta.pageTransition`.
+To apply dynamic transitions using conditional logic, you can leverage inline [middleware](/docs/3.x/directory-structure/middleware) to assign a different transition name to `to.meta.pageTransition`.
 
 ::code-group
 
@@ -434,7 +434,7 @@ The possible values are: `false`, `true`, or `'always'`.
 
 If set to true, Nuxt will not apply transitions if the user's browser matches `prefers-reduced-motion: reduce` (recommended). If set to `always`, Nuxt will always apply the transition and it is up to you to respect the user's preference.
 
-By default, view transitions are enabled for all [pages](/docs/3.x/guide/directory-structure/pages), but you can set a different global default.
+By default, view transitions are enabled for all [pages](/docs/3.x/directory-structure/pages), but you can set a different global default.
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({

package/1.getting-started/11.state-management.md

@@ -61,7 +61,7 @@ To globally invalidate cached state, see [`clearNuxtState`](/docs/3.x/api/utils/
 
 ### Initializing State
 
-Most of the time, you will want to initialize your state with data that resolves asynchronously. You can use the [`app.vue`](/docs/3.x/guide/directory-structure/app) component with the [`callOnce`](/docs/3.x/api/utils/call-once) util to do so.
+Most of the time, you will want to initialize your state with data that resolves asynchronously. You can use the [`app.vue`](/docs/3.x/directory-structure/app) component with the [`callOnce`](/docs/3.x/api/utils/call-once) util to do so.
 
 ```vue twoslash [app.vue]
 <script setup lang="ts">
@@ -198,7 +198,7 @@ const date = useLocaleDate(new Date('2016-10-26'))
 
 ## Shared State
 
-By using [auto-imported composables](/docs/3.x/guide/directory-structure/composables) we can define global type-safe states and import them across the app.
+By using [auto-imported composables](/docs/3.x/directory-structure/composables) we can define global type-safe states and import them across the app.
 
 ```ts twoslash [composables/states.ts]
 export const useColor = () => useState<string>('color', () => 'pink')

package/1.getting-started/12.error-handling.md

@@ -8,7 +8,7 @@ Nuxt is a full-stack framework, which means there are several sources of unpreve
 
 - Errors during the Vue rendering lifecycle (SSR & CSR)
 - Server and client startup errors (SSR + CSR)
-- Errors during Nitro server lifecycle ([`server/`](/docs/3.x/guide/directory-structure/server) directory)
+- Errors during Nitro server lifecycle ([`server/`](/docs/3.x/directory-structure/server) directory)
 - Errors downloading JS chunks
 
 ::tip
@@ -45,7 +45,7 @@ Note that the `vue:error` hook is based on [`onErrorCaptured`](https://vuejs.org
 Nuxt will call the `app:error` hook if there are any errors in starting your Nuxt application.
 
 This includes:
-- running [Nuxt plugins](/docs/3.x/guide/directory-structure/plugins)
+- running [Nuxt plugins](/docs/3.x/directory-structure/plugins)
 - processing `app:created` and `app:beforeMount` hooks
 - rendering your Vue app to HTML (during SSR)
 - mounting the app (on client-side), though you should handle this case with `onErrorCaptured` or with `vue:error`
@@ -107,7 +107,7 @@ const handleError = () => clearError({ redirect: '/' })
 </template>
 ```
 
-::read-more{to="/docs/guide/directory-structure/error"}
+::read-more{to="/docs/3.x/directory-structure/error"}
 Read more about `error.vue` and its uses.
 ::
 

package/1.getting-started/14.layers.md

@@ -9,8 +9,8 @@ One of the core features of Nuxt is the layers and extending support. You can ex
 ## Use Cases
 
 - Share reusable configuration presets across projects using `nuxt.config` and `app.config`
-- Create a component library using [`components/`](/docs/3.x/guide/directory-structure/components) directory
-- Create utility and composable library using [`composables/`](/docs/3.x/guide/directory-structure/composables) and [`utils/`](/docs/3.x/guide/directory-structure/utils) directories
+- Create a component library using [`components/`](/docs/3.x/directory-structure/components) directory
+- Create utility and composable library using [`composables/`](/docs/3.x/directory-structure/composables) and [`utils/`](/docs/3.x/directory-structure/utils) directories
 - Create Nuxt module presets
 - Share standard setup across projects
 - Create Nuxt themes
@@ -30,7 +30,7 @@ In addition, named layer aliases to the `srcDir` of each of these layers will au
 Named layer aliases were introduced in Nuxt v3.16.0.
 ::
 
-In addition, you can extend from a layer by adding the [extends](/docs/3.x/api/nuxt-config#extends) property to your [`nuxt.config`](/docs/3.x/guide/directory-structure/nuxt-config) file.
+In addition, you can extend from a layer by adding the [extends](/docs/3.x/api/nuxt-config#extends) property to your [`nuxt.config`](/docs/3.x/directory-structure/nuxt-config) file.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({

package/1.getting-started/16.deployment.md

@@ -95,7 +95,7 @@ Nuxt can be deployed to several cloud providers with a minimal amount of configu
 
 In addition to Node.js servers and static hosting services, a Nuxt project can be deployed with several well-tested presets and minimal amount of configuration.
 
-You can explicitly set the desired preset in the [`nuxt.config.ts`](/docs/3.x/guide/directory-structure/nuxt-config) file:
+You can explicitly set the desired preset in the [`nuxt.config.ts`](/docs/3.x/directory-structure/nuxt-config) file:
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({

package/1.getting-started/17.testing.md

@@ -267,7 +267,7 @@ it('can also mount an app', async () => {
 
 This should be used together with utilities from Testing Library, e.g. `screen` and `fireEvent`. Install [@testing-library/vue](https://testing-library.com/docs/vue-testing-library/intro) in your project to use these.
 
-Additionally, Testing Library also relies on testing globals for cleanup. You should turn these on in your [Vitest config](https://vitest.dev/config/#globals).
+Additionally, Testing Library also relies on testing globals for cleanup. You should turn these on in your [Vitest config](https://vitest.dev/config/globals).
 
 The passed in component will be rendered inside a `<div id="test-wrapper"></div>`.
 

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

@@ -6,7 +6,7 @@ navigation.icon: i-vscode-icons-folder-type-temp
 ---
 
 ::important
-This directory should be added to your [`.gitignore`](/docs/3.x/guide/directory-structure/gitignore) file to avoid pushing the dev build output to your repository.
+This directory should be added to your [`.gitignore`](/docs/3.x/directory-structure/gitignore) file to avoid pushing the dev build output to your repository.
 ::
 
 This directory is interesting if you want to learn more about the files Nuxt generates based on your directory structure.

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

@@ -6,7 +6,7 @@ navigation.icon: i-vscode-icons-folder-type-package
 ---
 
 ::important
-This directory should be added to your [`.gitignore`](/docs/3.x/guide/directory-structure/gitignore) file to avoid pushing the build output to your repository.
+This directory should be added to your [`.gitignore`](/docs/3.x/directory-structure/gitignore) file to avoid pushing the build output to your repository.
 ::
 
 Use this directory to deploy your Nuxt application to production.

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

@@ -9,8 +9,8 @@ The directory usually contains the following types of files:
 
 - Stylesheets (CSS, SASS, etc.)
 - Fonts
-- Images that won't be served from the [`public/`](/docs/3.x/guide/directory-structure/public) directory.
+- Images that won't be served from the [`public/`](/docs/3.x/directory-structure/public) directory.
 
-If you want to serve assets from the server, we recommend taking a look at the [`public/`](/docs/3.x/guide/directory-structure/public) directory.
+If you want to serve assets from the server, we recommend taking a look at the [`public/`](/docs/3.x/directory-structure/public) directory.
 
 :read-more{to="/docs/getting-started/assets"}

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

@@ -358,7 +358,7 @@ Any nested directories need to be added first as they are scanned in order.
 
 ## npm Packages
 
-If you want to auto-import components from an npm package, you can use [`addComponent`](/docs/3.x/api/kit/components#addcomponent) in a [local module](/docs/3.x/guide/directory-structure/modules) to register them.
+If you want to auto-import components from an npm package, you can use [`addComponent`](/docs/3.x/api/kit/components#addcomponent) in a [local module](/docs/3.x/directory-structure/modules) to register them.
 
 ::code-group
 

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

@@ -71,7 +71,7 @@ export const useFoo = () => {
 
 ### Access plugin injections
 
-You can access [plugin injections](/docs/3.x/guide/directory-structure/plugins#providing-helpers) from composables:
+You can access [plugin injections](/docs/3.x/directory-structure/plugins#providing-helpers) from composables:
 
 ```ts [composables/test.ts]
 export const useHello = () => {
@@ -82,7 +82,7 @@ export const useHello = () => {
 
 ## How Files Are Scanned
 
-Nuxt only scans files at the top level of the [`composables/` directory](/docs/3.x/guide/directory-structure/composables), e.g.:
+Nuxt only scans files at the top level of the [`composables/` directory](/docs/3.x/directory-structure/composables), e.g.:
 
 ```bash [Directory Structure]
 -| composables/

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/3.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](/docs/3.x/directory-structure/content) 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/3.x/guide/directory-structure/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/3.x/directory-structure/pages/#catch-all-route) using the [`<ContentRenderer>`](https://content.nuxt.com/docs/components/content-renderer) component:
 
 ```vue [pages/[...slug\\].vue]
 <script lang="ts" setup>

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

@@ -11,7 +11,7 @@ For best performance, components placed in this directory will be automatically
 
 ## Enable Layouts
 
-Layouts are enabled by adding [`<NuxtLayout>`](/docs/3.x/api/components/nuxt-layout) to your [`app.vue`](/docs/3.x/guide/directory-structure/app):
+Layouts are enabled by adding [`<NuxtLayout>`](/docs/3.x/api/components/nuxt-layout) to your [`app.vue`](/docs/3.x/directory-structure/app):
 
 ```vue [app.vue]
 <template>
@@ -34,7 +34,7 @@ If no layout is specified, `layouts/default.vue` will be used.
 ::
 
 ::important
-If you only have a single layout in your application, we recommend using [`app.vue`](/docs/3.x/guide/directory-structure/app) instead.
+If you only have a single layout in your application, we recommend using [`app.vue`](/docs/3.x/directory-structure/app) instead.
 ::
 
 ::important

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

@@ -20,7 +20,7 @@ Name of middleware are normalized to kebab-case: `myMiddleware` becomes `my-midd
 ::
 
 ::note
-Route middleware run within the Vue part of your Nuxt app. Despite the similar name, they are completely different from [server middleware](/docs/3.x/guide/directory-structure/server#server-middleware), which are run in the Nitro server part of your app.
+Route middleware run within the Vue part of your Nuxt app. Despite the similar name, they are completely different from [server middleware](/docs/3.x/directory-structure/server#server-middleware), which are run in the Nitro server part of your app.
 ::
 
 :video-accordion{title="Watch a video from Vue School on all 3 kinds of middleware" videoId="761471577" platform="vimeo"}

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

@@ -2,7 +2,7 @@
 title: 'modules'
 head.title: 'modules/'
 description: Use the modules/ directory to automatically register local modules within your application.
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-nuxt
 ---
 
 It is a good place to place any local modules you develop while building your application.
@@ -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/3.x/guide/directory-structure/nuxt-config) separately.
+You don't need to add those local modules to your [`nuxt.config.ts`](/docs/3.x/directory-structure/nuxt-config) separately.
 
 ::code-group
 

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

@@ -8,5 +8,5 @@ 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.com/package-manager)) creates this directory to store the dependencies of your project.
 
 ::important
-This directory should be added to your [`.gitignore`](/docs/3.x/guide/directory-structure/gitignore) file to avoid pushing the dependencies to your repository.
+This directory should be added to your [`.gitignore`](/docs/3.x/directory-structure/gitignore) file to avoid pushing the dependencies to your repository.
 ::

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

@@ -6,7 +6,7 @@ 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/3.x/guide/directory-structure/app). To force the pages system, set `pages: true` in `nuxt.config` or have a [`app/router.options.ts`](/docs/3.x/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/3.x/directory-structure/app). To force the pages system, set `pages: true` in `nuxt.config` or have a [`app/router.options.ts`](/docs/3.x/guide/recipes/custom-routing#using-approuteroptions).
 ::
 
 ## Usage
@@ -46,7 +46,7 @@ export default defineComponent({
 
 The `pages/index.vue` file will be mapped to the `/` route of your application.
 
-If you are using [`app.vue`](/docs/3.x/guide/directory-structure/app), make sure to use the [`<NuxtPage/>`](/docs/3.x/api/components/nuxt-page) component to display the current page:
+If you are using [`app.vue`](/docs/3.x/directory-structure/app), make sure to use the [`<NuxtPage/>`](/docs/3.x/api/components/nuxt-page) component to display the current page:
 
 ```vue [app.vue]
 <template>
@@ -317,7 +317,7 @@ You can set a default value for this property [in your `nuxt.config`](/docs/3.x/
 
 #### `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/3.x/guide/directory-structure/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/3.x/directory-structure/layouts).
 
 #### `layoutTransition` and `pageTransition`
 
@@ -327,7 +327,7 @@ You can set default values for these properties [in your `nuxt.config`](/docs/3.
 
 #### `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/3.x/guide/directory-structure/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/3.x/directory-structure/middleware).
 
 #### `name`
 
@@ -401,11 +401,11 @@ function navigate () {
 
 ## Client-Only Pages
 
-You can define a page as [client only](/docs/3.x/guide/directory-structure/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/3.x/directory-structure/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/3.x/guide/directory-structure/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/3.x/directory-structure/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.plugins.md

@@ -134,7 +134,7 @@ export default defineNuxtPlugin({
 
 ## Using Composables
 
-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:
+You can use [composables](/docs/3.x/directory-structure/composables) as well as [utils](/docs/3.x/directory-structure/utils) within Nuxt plugins:
 
 ```ts [plugins/hello.ts]
 export default defineNuxtPlugin((nuxtApp) => {
@@ -200,7 +200,7 @@ const { $hello } = useNuxtApp()
 ```
 
 ::important
-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.
+Note that we highly recommend using [`composables`](/docs/3.x/directory-structure/composables) instead of providing helpers to avoid polluting the global namespace and keep your main bundle entry small.
 ::
 
 ::warning

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/3.x/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/directory-structure/pages#dynamic-routes) do.
 ::
 
 ## Server Middleware

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

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

package/{2.guide/1.directory-structure → 2.directory-structure}/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 [`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.
+The main purpose of the [`utils/` directory](/docs/3.x/directory-structure/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/examples/features/auto-imports"}
 
 ::tip
-The way `utils/` auto-imports work and are scanned is identical to the [`composables/`](/docs/3.x/guide/directory-structure/composables) directory.
+The way `utils/` auto-imports work and are scanned is identical to the [`composables/`](/docs/3.x/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/3.x/guide/directory-structure/server#server-utilities) directory.
+Only `server/utils` are auto-imported in the [`server/`](/docs/3.x/directory-structure/server#server-utilities) directory.
 ::

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/3.x/guide/directory-structure/gitignore) file to avoid pushing secrets to your repository.
+This file should be added to your [`.gitignore`](/docs/3.x/directory-structure/gitignore) file to avoid pushing secrets to your repository.
 ::
 
 ## Dev, Build and Generate Time