@nuxt/docs-nightly 4.1.1-29282072.39113ab4 → 4.1.1-29283054.32d56553

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/guide/directory-structure/components) directory
-- Create utility and composable library using [`composables/`](/docs/guide/directory-structure/composables) and [`utils/`](/docs/guide/directory-structure/utils) directories
+- Create a component library using [`app/components/`](/docs/guide/directory-structure/app/components) directory
+- Create utility and composable library using [`app/composables/`](/docs/guide/directory-structure/app/composables) and [`app/utils/`](/docs/guide/directory-structure/app/utils) directories
 - Create Nuxt module presets
 - Share standard setup across projects
 - Create Nuxt themes

package/1.getting-started/15.prerendering.md

@@ -109,7 +109,7 @@ As a shorthand, you can also configure this in a page file using [`defineRouteRu
 This feature is experimental and in order to use it you must enable the `experimental.inlineRouteRules` option in your `nuxt.config`.
 ::
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup>
 // Or set at the page level
 defineRouteRules({
@@ -141,7 +141,7 @@ export default defineNuxtConfig({
 
 You can use this at runtime within a [Nuxt context](/docs/guide/going-further/nuxt-app#the-nuxt-context) to add more routes for Nitro to prerender.
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup>
 prerenderRoutes(["/some/other/url"]);
 prerenderRoutes("/api/content/article/my-article");

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

@@ -516,7 +516,7 @@ If you prefer to use `@vue/test-utils` on its own for unit testing in Nuxt, and
    },
    ```
 
-4. Create a simple `<HelloWorld>` component `components/HelloWorld.vue` with the following content:
+4. Create a simple `<HelloWorld>` component `app/components/HelloWorld.vue` with the following content:
 
    ```vue
    <template>

package/1.getting-started/18.upgrade.md

@@ -104,7 +104,7 @@ This command will execute all codemods in sequence, with the option to deselect
 
 🚦 **Impact Level**: Significant
 
-Nuxt now defaults to a new directory structure, with backwards compatibility (so if Nuxt detects you are using the old structure, such as with a top-level `pages/` directory, this new structure will not apply).
+Nuxt now defaults to a new directory structure, with backwards compatibility (so if Nuxt detects you are using the old structure, such as with a top-level `app/pages/` directory, this new structure will not apply).
 
 👉 [See full RFC](https://github.com/nuxt/nuxt/issues/26444)
 
@@ -168,7 +168,7 @@ With this new structure, the `~` alias now points to the `app/` directory by def
 #### Migration Steps
 
 1. Create a new directory called `app/`.
-1. Move your `assets/`, `components/`, `composables/`, `layouts/`, `middleware/`, `pages/`, `plugins/` and `utils/` folders under it, as well as `app.vue`, `error.vue`, `app.config.ts`. If you have an `app/router-options.ts` or `app/spa-loading-template.html`, these paths remain the same.
+1. Move your `assets/`, `components/`, `composables/`, `app/layouts/`, `app/middleware/`, `app/pages/`, `app/plugins/` and `utils/` folders under it, as well as `app.vue`, `error.vue`, `app.config.ts`. If you have an `app/router-options.ts` or `app/spa-loading-template.html`, these paths remain the same.
 1. Make sure your `nuxt.config.ts`, `content/`, `layers/`, `modules/`, `public/` and `server/` folders remain outside the `app/` folder, in the root of your project.
 1. Remember to update any third-party configuration files to work with the new directory structure, such as your `tailwindcss` or `eslint` configuration (if required - `@nuxtjs/tailwindcss` should automatically configure `tailwindcss` correctly).
 
@@ -223,7 +223,7 @@ These changes have been made to improve memory usage and increase consistency wi
 
    It may be beneficial to extract any calls to `useAsyncData` that share an explicit key (and have custom options) into their own composable:
 
-   ```ts [composables/useUserData.ts]
+   ```ts [app/composables/useUserData.ts]
    export function useUserData(userId: string) {
      return useAsyncData(
        `user-${userId}`,
@@ -658,7 +658,7 @@ Please report an issue if you are doing this, as we do not plan to keep this as
 
 Previously it was possible to pass `dedupe: boolean` to `refresh`. These were aliases of `cancel` (`true`) and `defer` (`false`).
 
-```ts twoslash [app.vue]
+```ts twoslash [app/app.vue]
 // @errors: 2322
 const { refresh } = await useAsyncData(async () => ({ message: 'Hello, Nuxt!' }))
 
@@ -889,13 +889,13 @@ The data is still available, but can be accessed with `useNuxtApp().payload`:
 
 #### What Changed
 
-Child folders in your `middleware/` folder are also scanned for `index` files and these are now also registered as middleware in your project.
+Child folders in your `app/middleware/` folder are also scanned for `index` files and these are now also registered as middleware in your project.
 
 #### Reasons for Change
 
-Nuxt scans a number of folders automatically, including `middleware/` and `plugins/`.
+Nuxt scans a number of folders automatically, including `app/middleware/` and `app/plugins/`.
 
-Child folders in your `plugins/` folder are scanned for `index` files and we wanted to make this behavior consistent between scanned directories.
+Child folders in your `app/plugins/` folder are scanned for `index` files and we wanted to make this behavior consistent between scanned directories.
 
 #### Migration Steps
 

package/2.guide/1.concepts/1.auto-imports.md

@@ -5,13 +5,13 @@ description: "Nuxt auto-imports components, composables, helper functions and Vu
 
 Nuxt auto-imports components, composables and [Vue.js APIs](https://vuejs.org/api) to use across your application without explicitly importing them.
 
-```vue twoslash [app.vue]
+```vue twoslash [app/app.vue]
 <script setup lang="ts">
 const count = ref(1) // ref is auto-imported
 </script>
 ```
 
-Thanks to its opinionated directory structure, Nuxt can auto-import your [`components/`](/docs/guide/directory-structure/components), [`composables/`](/docs/guide/directory-structure/composables) and [`utils/`](/docs/guide/directory-structure/utils).
+Thanks to its opinionated directory structure, Nuxt can auto-import your [`app/components/`](/docs/guide/directory-structure/app/components), [`app/composables/`](/docs/guide/directory-structure/app/composables) and [`app/utils/`](/docs/guide/directory-structure/app/utils).
 
 Contrary to a classic global declaration, Nuxt preserves typings, IDEs completions and hints, and **only includes what is used in your production code**.
 
@@ -101,9 +101,9 @@ export const useMyComposable = () => {
 
 Nuxt directly auto-imports files created in defined directories:
 
-- `components/` for [Vue components](/docs/guide/directory-structure/components).
-- `composables/` for [Vue composables](/docs/guide/directory-structure/composables).
-- `utils/` for helper functions and other utilities.
+- `app/components/` for [Vue components](/docs/guide/directory-structure/app/components).
+- `app/composables/` for [Vue composables](/docs/guide/directory-structure/app/composables).
+- `app/utils/` for helper functions and other utilities.
 
 :link-example{to="/docs/examples/features/auto-imports"}
 
@@ -167,7 +167,7 @@ With this configuration:
 
 Nuxt also automatically imports components from your `~/components` directory, although this is configured separately from auto-importing composables and utility functions.
 
-:read-more{to="/docs/guide/directory-structure/components"}
+:read-more{to="/docs/guide/directory-structure/app/components"}
 
 To disable auto-importing components from your own `~/components` directory, you can set `components.dirs` to an empty array (though note that this will not affect components added by modules).
 

package/2.guide/1.concepts/10.nuxt-lifecycle.md

@@ -38,7 +38,7 @@ Returning a value from middleware will terminate the request and send the return
 
 The Vue and Nuxt instances are created first. Afterward, Nuxt executes its server plugins. This includes:
 - Built-in plugins, such as Vue Router and `unhead`.
-- Custom plugins located in the `plugins/` directory, including those without a suffix (e.g., `myPlugin.ts`) and those with the `.server` suffix (e.g., `myServerPlugin.server.ts`).
+- Custom plugins located in the `app/plugins/` directory, including those without a suffix (e.g., `myPlugin.ts`) and those with the `.server` suffix (e.g., `myServerPlugin.server.ts`).
 
 Plugins execute in a specific order and may have dependencies on one another. For more details, including execution order and parallelism, refer to the [Plugins documentation](/docs/guide/directory-structure/plugins).
 
@@ -70,11 +70,11 @@ In Nuxt, there are three types of middleware:
 
 Nuxt executes all global middleware on the initial page load (both on server and client) and then again before any client-side navigation. Named and anonymous middleware are executed only on the routes specified in the middleware property of the page(route) meta defined in the corresponding page components.
 
-For details about each type and examples, see the [Middleware documentation](/docs/guide/directory-structure/middleware).
+For details about each type and examples, see the [Middleware documentation](/docs/guide/directory-structure/app/middleware).
 
 Any redirection on the server will result in a `Location:` header being sent to the browser; the browser then makes a fresh request to this new location. All application state will be reset when this happens, unless persisted in a cookie.
 
-:read-more{to="/docs/guide/directory-structure/middleware"}
+:read-more{to="/docs/guide/directory-structure/app/middleware"}
 
 ### Step 6: Render Page and Components
 
@@ -114,7 +114,7 @@ This part of the lifecycle is fully executed in the browser, no matter which Nux
 
 This step is similar to the server-side execution and includes both built-in and custom plugins.
 
-Custom plugins in the `plugins/` directory, such as those without a suffix (e.g., `myPlugin.ts`) and with the `.client` suffix (e.g., `myClientPlugin.client.ts`), are executed on the client side.
+Custom plugins in the `app/plugins/` directory, such as those without a suffix (e.g., `myPlugin.ts`) and with the `.client` suffix (e.g., `myClientPlugin.client.ts`), are executed on the client side.
 
 ::callout{icon="i-lucide-lightbulb"}
 After this step, Nuxt calls the [`app:created`](/docs/api/advanced/hooks#app-hooks-runtime) hook, which can be used to execute additional logic.
@@ -130,11 +130,11 @@ This step is the same as the server-side execution and includes the `validate` m
 
 Nuxt middleware runs on both the server and the client. If you want certain code to run in specific environments, consider splitting it by using `import.meta.client` for the client and `import.meta.server` for the server.
 
-:read-more{to="/docs/guide/directory-structure/middleware#when-middleware-runs"}
+:read-more{to="/docs/guide/directory-structure/app/middleware#when-middleware-runs"}
 
 ### Step 4: Mount Vue Application and Hydration
 
-Calling `app.mount('#__nuxt')` mounts the Vue application to the DOM. If the application uses SSR or SSG mode, Vue performs a hydration step to make the client-side application interactive. During hydration, Vue recreates the application (excluding [Server Components](/docs/guide/directory-structure/components#server-components)), matches each component to its corresponding DOM nodes, and attaches DOM event listeners.
+Calling `app.mount('#__nuxt')` mounts the Vue application to the DOM. If the application uses SSR or SSG mode, Vue performs a hydration step to make the client-side application interactive. During hydration, Vue recreates the application (excluding [Server Components](/docs/guide/directory-structure/app/components#server-components)), matches each component to its corresponding DOM nodes, and attaches DOM event listeners.
 
 To ensure proper hydration, it's important to maintain consistency between the data on the server and the client. For API requests, it is recommended to use `useAsyncData`, `useFetch`, or other SSR-friendly composables. These methods ensure that the data fetched on the server side is reused during hydration, avoiding repeated requests. Any new requests should only be triggered after hydration, preventing hydration errors.
 

package/2.guide/1.concepts/2.vuejs-development.md

@@ -25,13 +25,13 @@ We chose to build Nuxt on top of Vue for these reasons:
 
 ### Auto-imports
 
-Every Vue component created in the [`components/`](/docs/guide/directory-structure/components) directory of a Nuxt project will be available in your project without having to import it. If a component is not used anywhere, your production’s code will not include it.
+Every Vue component created in the [`app/components/`](/docs/guide/directory-structure/app/components) directory of a Nuxt project will be available in your project without having to import it. If a component is not used anywhere, your production’s code will not include it.
 
 :read-more{to="/docs/guide/concepts/auto-imports"}
 
 ### Vue Router
 
-Most applications need multiple pages and a way to navigate between them. This is called **routing**. Nuxt uses a [`pages/`](/docs/guide/directory-structure/pages) directory and naming conventions to directly create routes mapped to your files using the official [Vue Router library](https://router.vuejs.org).
+Most applications need multiple pages and a way to navigate between them. This is called **routing**. Nuxt uses an [`app/pages/`](/docs/guide/directory-structure/app/pages) directory and naming conventions to directly create routes mapped to your files using the official [Vue Router library](https://router.vuejs.org).
 
 :read-more{to="/docs/getting-started/routing"}
 
@@ -92,7 +92,7 @@ const increment = () => count.value++
 The goal of Nuxt is to provide a great developer experience around the Composition API.
 
 - Use auto-imported [Reactivity functions](https://vuejs.org/api/reactivity-core.html) from Vue and Nuxt [built-in composables](/docs/api/composables/use-async-data).
-- Write your own auto-imported reusable functions in the [`composables/` directory](/docs/guide/directory-structure/composables).
+- Write your own auto-imported reusable functions in the [`app/composables/` directory](/docs/guide/directory-structure/app/composables).
 
 ### TypeScript Support
 

package/2.guide/1.concepts/3.rendering.md

@@ -23,7 +23,7 @@ Universal rendering allows a Nuxt application to provide quick page load times w
 
 It is normal to ask which parts of a Vue file runs on the server and/or the client in universal rendering mode.
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 const counter = ref(0); // executes in server and client environments
 
@@ -42,7 +42,7 @@ const handleClick = () => {
 
 On the initial request, the `counter` ref is initialized in the server since it is rendered inside the `<p>` tag. The contents of `handleClick` is never executed here. During hydration in the browser, the `counter` ref is re-initialized. The `handleClick` finally binds itself to the button; Therefore it is reasonable to deduce that the body of `handleClick` will always run in a browser environment.
 
-[Middlewares](/docs/guide/directory-structure/middleware) and [pages](/docs/guide/directory-structure/pages) run in the server and on the client during hydration. [Plugins](/docs/guide/directory-structure/plugins) can be rendered on the server or client or both. [Components](/docs/guide/directory-structure/components) can be forced to run on the client only as well. [Composables](/docs/guide/directory-structure/composables) and [utilities](/docs/guide/directory-structure/utils) are rendered based on the context of their usage.
+[Middlewares](/docs/guide/directory-structure/app/middleware) and [pages](/docs/guide/directory-structure/app/pages) run in the server and on the client during hydration. [Plugins](/docs/guide/directory-structure/plugins) can be rendered on the server or client or both. [Components](/docs/guide/directory-structure/app/components) can be forced to run on the client only as well. [Composables](/docs/guide/directory-structure/app/composables) and [utilities](/docs/guide/directory-structure/app/utils) are rendered based on the context of their usage.
 
 **Benefits of server-side rendering:**
 - **Performance**: Users can get immediate access to the page's content because browsers can display static content much faster than JavaScript-generated content. At the same time, Nuxt preserves the interactivity of a web application during the hydration process.

package/2.guide/1.concepts/8.typescript.md

@@ -70,7 +70,7 @@ Watch a video from Daniel Roe explaining built-in Nuxt aliases.
 ::
 
 ::note
-Nitro also [auto-generates types](/docs/guide/concepts/server-engine#typed-api-routes) for API routes. Plus, Nuxt also generates types for globally available components and [auto-imports from your composables](/docs/guide/directory-structure/composables), plus other core functionality.
+Nitro also [auto-generates types](/docs/guide/concepts/server-engine#typed-api-routes) for API routes. Plus, Nuxt also generates types for globally available components and [auto-imports from your composables](/docs/guide/directory-structure/app/composables), plus other core functionality.
 ::
 
 ::note

package/2.guide/2.directory-structure/1.app/1.components.md

@@ -13,7 +13,7 @@ Nuxt automatically imports any components in this directory (along with componen
 ---| AppFooter.vue
 ```
 
-```html [app.vue]
+```html [app/app.vue]
 <template>
   <div>
     <AppHeader />
@@ -65,7 +65,7 @@ If you want to use the Vue `<component :is="someComputedComponent">`{lang=vue} s
 
 For example:
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup lang="ts">
 import { SomeComponent } from '#components'
 
@@ -107,7 +107,7 @@ To dynamically import a component (also known as lazy-loading a component) all y
 
 By using the `Lazy` prefix you can delay loading the component code until the right moment, which can be helpful for optimizing your JavaScript bundle size.
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup lang="ts">
 const show = ref(false)
 </script>
@@ -141,7 +141,7 @@ Currently Nuxt's built-in lazy hydration only works in single-file components (S
 
 Hydrates the component when it becomes visible in the viewport.
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <template>
   <div>
     <LazyMyComponent hydrate-on-visible />
@@ -163,7 +163,7 @@ Hydrates the component when the browser is idle. This is suitable if you need th
 
 You can also pass a number which serves as a max timeout.
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <template>
   <div>
     <LazyMyComponent hydrate-on-idle />
@@ -179,7 +179,7 @@ Under the hood, this uses Vue's built-in [`hydrateOnIdle` strategy](https://vuej
 
 Hydrates the component after a specified interaction (e.g., click, mouseover).
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <template>
   <div>
     <LazyMyComponent hydrate-on-interaction="mouseover" />
@@ -197,7 +197,7 @@ Under the hood, this uses Vue's built-in [`hydrateOnInteraction` strategy](https
 
 Hydrates the component when the window matches a media query.
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <template>
   <div>
     <LazyMyComponent hydrate-on-media-query="(max-width: 768px)" />
@@ -213,7 +213,7 @@ Under the hood, this uses Vue's built-in [`hydrateOnMediaQuery` strategy](https:
 
 Hydrates the component after a specified delay (in milliseconds).
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <template>
   <div>
     <LazyMyComponent :hydrate-after="2000" />
@@ -225,7 +225,7 @@ Hydrates the component after a specified delay (in milliseconds).
 
 Hydrates the component based on a boolean condition.
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <template>
   <div>
     <LazyMyComponent :hydrate-when="isReady" />
@@ -244,7 +244,7 @@ function myFunction() {
 
 Never hydrates the component.
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <template>
   <div>
     <LazyMyComponent hydrate-never />
@@ -256,7 +256,7 @@ Never hydrates the component.
 
 All delayed hydration components emit a `@hydrated` event when they are hydrated.
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <template>
   <div>
     <LazyMyComponent hydrate-on-visible @hydrated="onHydrate" />
@@ -291,7 +291,7 @@ Delayed hydration can offer performance benefits, but it's essential to use it c
 
 You can also explicitly import components from `#components` if you want or need to bypass Nuxt's auto-importing functionality.
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup lang="ts">
 import { NuxtLink, LazyMountainsList } from '#components'
 
@@ -359,7 +359,7 @@ export default defineNuxtModule({
 })
 ```
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <div>
     <!--  the component uses the name we specified and is auto-imported  -->
@@ -395,7 +395,7 @@ If a component is meant to be rendered only client-side, you can add the `.clien
 --| Comments.client.vue
 ```
 
-```vue [pages/example.vue]
+```vue [app/pages/example.vue]
 <template>
   <div>
     <!-- this component will only be rendered on client side -->
@@ -451,7 +451,7 @@ Now you can register server-only components with the `.server` suffix and use th
 ---| HighlightedMarkdown.server.vue
 ```
 
-```vue [pages/example.vue]
+```vue [app/pages/example.vue]
 <template>
   <div>
     <!--
@@ -489,7 +489,7 @@ This feature needs `experimental.componentIslands.selectiveClient` within your c
 
 You can partially hydrate a component by setting a `nuxt-client` attribute on the component you wish to be loaded client-side.
 
-```vue [components/ServerWithClient.vue]
+```vue [app/components/ServerWithClient.vue]
 <template>
   <div>
     <HighlightedMarkdown markdown="# Headline" />
@@ -530,7 +530,7 @@ In this case, the `.server` + `.client` components are two 'halves' of a compone
 ---| Comments.server.vue
 ```
 
-```vue [pages/example.vue]
+```vue [app/pages/example.vue]
 <template>
   <div>
     <!-- this component will render Comments.server on the server then Comments.client once mounted in the browser -->
@@ -592,7 +592,7 @@ export default defineNuxtConfig({
 })
 ```
 
-... and directly use the module components (prefixed with `awesome-`) in our `pages/index.vue`:
+... and directly use the module components (prefixed with `awesome-`) in our `app/pages/index.vue`:
 
 ```vue
 <template>

package/2.guide/2.directory-structure/1.app/1.composables.md

@@ -9,7 +9,7 @@ navigation.icon: i-lucide-folder
 
 **Method 1:** Using named export
 
-```js [composables/useFoo.ts]
+```js [app/composables/useFoo.ts]
 export const useFoo = () => {
   return useState('foo', () => 'bar')
 }
@@ -17,7 +17,7 @@ export const useFoo = () => {
 
 **Method 2:** Using default export
 
-```js [composables/use-foo.ts or composables/useFoo.ts]
+```js [app/composables/use-foo.ts or composables/useFoo.ts]
 // It will be available as useFoo() (camelCase of file name without extension)
 export default function () {
   return useState('foo', () => 'bar')
@@ -26,7 +26,7 @@ export default function () {
 
 **Usage:** You can now use auto imported composable in `.js`, `.ts` and `.vue` files
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 const foo = useFoo()
 </script>
@@ -39,7 +39,7 @@ const foo = useFoo()
 ```
 
 ::note
-The `composables/` directory in Nuxt does not provide any additional reactivity capabilities to your code. Instead, any reactivity within composables is achieved using Vue's Composition API mechanisms, such as ref and reactive. Note that reactive code is also not limited to the boundaries of the `composables/` directory. You are free to employ reactivity features wherever they're needed in your application.
+The `app/composables/` directory in Nuxt does not provide any additional reactivity capabilities to your code. Instead, any reactivity within composables is achieved using Vue's Composition API mechanisms, such as ref and reactive. Note that reactive code is also not limited to the boundaries of the `app/composables/` directory. You are free to employ reactivity features wherever they're needed in your application.
 ::
 
 :read-more{to="/docs/guide/concepts/auto-imports"}
@@ -62,7 +62,7 @@ If you create a composable without having the dev server running, TypeScript wil
 
 You can use a composable within another composable using auto imports:
 
-```js [composables/test.ts]
+```js [app/composables/test.ts]
 export const useFoo = () => {
   const nuxtApp = useNuxtApp()
   const bar = useBar()
@@ -73,7 +73,7 @@ export const useFoo = () => {
 
 You can access [plugin injections](/docs/guide/directory-structure/plugins#providing-helpers) from composables:
 
-```js [composables/test.ts]
+```js [app/composables/test.ts]
 export const useHello = () => {
   const nuxtApp = useNuxtApp()
   return nuxtApp.$hello
@@ -82,7 +82,7 @@ export const useHello = () => {
 
 ## How Files Are Scanned
 
-Nuxt only scans files at the top level of the [`composables/` directory](/docs/guide/directory-structure/composables), e.g.:
+Nuxt only scans files at the top level of the [`app/composables/` directory](/docs/guide/directory-structure/app/composables), e.g.:
 
 ```bash [Directory Structure]
 -| composables/
@@ -92,18 +92,18 @@ Nuxt only scans files at the top level of the [`composables/` directory](/docs/g
 -----| utils.ts   // not scanned
 ```
 
-Only `composables/index.ts` and `composables/useFoo.ts` would be searched for imports.
+Only `app/composables/index.ts` and `app/composables/useFoo.ts` would be searched for imports.
 
 To get auto imports working for nested modules, you could either re-export them (recommended) or configure the scanner to include nested directories:
 
-**Example:** Re-export the composables you need from the `composables/index.ts` file:
+**Example:** Re-export the composables you need from the `app/composables/index.ts` file:
 
-```ts [composables/index.ts]
+```ts [app/composables/index.ts]
 // Enables auto import for this export
 export { utils } from './nested/utils.ts'
 ```
 
-**Example:** Scan nested directories inside the `composables/` folder:
+**Example:** Scan nested directories inside the `app/composables/` folder:
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({

package/2.guide/2.directory-structure/1.app/1.layouts.md

@@ -13,7 +13,7 @@ For best performance, components placed in this directory will be automatically
 
 Layouts are enabled by adding [`<NuxtLayout>`](/docs/api/components/nuxt-layout) to your [`app.vue`](/docs/guide/directory-structure/app):
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <NuxtLayout>
     <NuxtPage />
@@ -30,7 +30,7 @@ The layout name is normalized to kebab-case, so `someLayout` becomes `some-layou
 ::
 
 ::note
-If no layout is specified, `layouts/default.vue` will be used.
+If no layout is specified, `app/layouts/default.vue` will be used.
 ::
 
 ::important
@@ -45,7 +45,7 @@ Unlike other components, your layouts must have a single root element to allow N
 
 Add a `~/layouts/default.vue`:
 
-```vue [layouts/default.vue]
+```vue [app/layouts/default.vue]
 <template>
   <div>
     <p>Some default layout content shared across all pages</p>
@@ -74,13 +74,13 @@ definePageMeta({
 </script>
 ```
 
-::read-more{to="/docs/guide/directory-structure/pages#page-metadata"}
+::read-more{to="/docs/guide/directory-structure/app/pages#page-metadata"}
 Learn more about `definePageMeta`.
 ::
 
 You can directly override the default layout for all pages using the `name` property of [`<NuxtLayout>`](/docs/api/components/nuxt-layout):
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 // You might choose this based on an API call or logged-in status
 const layout = "custom";
@@ -140,7 +140,7 @@ If you are using pages, you can take full control by setting `layout: false` and
 
 ::code-group
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup lang="ts">
 definePageMeta({
   layout: false,
@@ -158,7 +158,7 @@ definePageMeta({
 </template>
 ```
 
-```vue [layouts/custom.vue]
+```vue [app/layouts/custom.vue]
 <template>
   <div>
     <header>

package/2.guide/2.directory-structure/1.app/1.middleware.md

@@ -10,8 +10,8 @@ Nuxt provides a customizable **route middleware** framework you can use througho
 There are three kinds of route middleware:
 
 1. Anonymous (or inline) route middleware are defined directly within the page.
-2. Named route middleware, placed in the `middleware/` and automatically loaded via asynchronous import when used on a page.
-3. Global route middleware, placed in the `middleware/` with a `.global` suffix and is run on every route change.
+2. Named route middleware, placed in the `app/middleware/` and automatically loaded via asynchronous import when used on a page.
+3. Global route middleware, placed in the `app/middleware/` with a `.global` suffix and is run on every route change.
 
 The first two kinds of route middleware can be defined in [`definePageMeta`](/docs/api/utils/define-page-meta).
 
@@ -74,7 +74,7 @@ Middleware runs in the following order:
 
 For example, assuming you have the following middleware and component:
 
-```bash [middleware/ directory]
+```bash [app/middleware/ directory]
 -| middleware/
 ---| analytics.global.ts
 ---| setup.global.ts