@nuxt/docs-nightly 4.1.1-29282087.9ed08339 → 4.1.1-29283054.32d56553

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

@@ -17,7 +17,7 @@ Nuxt will automatically create a route for every page in your `~/pages/` directo
 
 ::code-group
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <template>
   <h1>Index page</h1>
 </template>
@@ -44,11 +44,11 @@ export default defineComponent({
 
 ::
 
-The `pages/index.vue` file will be mapped to the `/` route of your application.
+The `app/pages/index.vue` file will be mapped to the `/` route of your application.
 
 If you are using [`app.vue`](/docs/guide/directory-structure/app), make sure to use the [`<NuxtPage/>`](/docs/api/components/nuxt-page) component to display the current page:
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <div>
     <!-- Markup shared across all pages, ex: NavBar -->
@@ -65,7 +65,7 @@ Here are some examples to illustrate what a page with a single root element look
 
 ::code-group
 
-```vue [pages/working.vue]
+```vue [app/pages/working.vue]
 <template>
   <div>
     <!-- This page correctly has only one single root element -->
@@ -74,14 +74,14 @@ Here are some examples to illustrate what a page with a single root element look
 </template>
 ```
 
-```vue [pages/bad-1.vue]
+```vue [app/pages/bad-1.vue]
 <template>
   <!-- This page will not render when route changes during client side navigation, because of this comment -->
   <div>Page content</div>
 </template>
 ```
 
-```vue [pages/bad-2.vue]
+```vue [app/pages/bad-2.vue]
 <template>
   <div>This page</div>
   <div>Has more than one root element</div>
@@ -106,7 +106,7 @@ If you want a parameter to be _optional_, you must enclose it in double square b
 
 Given the example above, you can access group/id within your component via the `$route` object:
 
-```vue [pages/users-[group\\]/[id\\].vue]
+```vue [app/pages/users-[group\\]/[id\\].vue]
 <template>
   <p>{{ $route.params.group }} - {{ $route.params.id }}</p>
 </template>
@@ -140,7 +140,7 @@ Named parent routes will take priority over nested dynamic routes. For the `/foo
 
 If you need a catch-all route, you create it by using a file named like `[...slug].vue`. This will match _all_ routes under that path.
 
-```vue [pages/[...slug\\].vue]
+```vue [app/pages/[...slug\\].vue]
 <template>
   <p>{{ $route.params.slug }}</p>
 </template>
@@ -184,7 +184,7 @@ This file tree will generate these routes:
 ]
 ```
 
-To display the `child.vue` component, you have to insert the `<NuxtPage>` component inside `pages/parent.vue`:
+To display the `child.vue` component, you have to insert the `<NuxtPage>` component inside `app/pages/parent.vue`:
 
 ```vue {}[pages/parent.vue]
 <template>
@@ -315,7 +315,7 @@ You can set a default value for this property [in your `nuxt.config`](/docs/api/
 
 #### `layout`
 
-You can define the layout used to render the route. This can be either false (to disable any layout), a string or a ref/computed, if you want to make it reactive in some way. [More about layouts](/docs/guide/directory-structure/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/guide/directory-structure/app/layouts).
 
 #### `layoutTransition` and `pageTransition`
 
@@ -325,7 +325,7 @@ You can set default values for these properties [in your `nuxt.config`](/docs/ap
 
 #### `middleware`
 
-You can define middleware to apply before loading this page. It will be merged with all the other middleware used in any matching parent/child routes. It can be a string, a function (an anonymous/inlined middleware function following [the global before guard pattern](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards)), or an array of strings/functions. [More about named middleware](/docs/guide/directory-structure/middleware).
+You can define middleware to apply before loading this page. It will be merged with all the other middleware used in any matching parent/child routes. It can be a string, a function (an anonymous/inlined middleware function following [the global before guard pattern](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards)), or an array of strings/functions. [More about named middleware](/docs/guide/directory-structure/app/middleware).
 
 #### `name`
 
@@ -360,7 +360,7 @@ To navigate between pages of your app, you should use the [`<NuxtLink>`](/docs/a
 
 This component is included with Nuxt and therefore you don't have to import it as you do with other components.
 
-A simple link to the `index.vue` page in your `pages` folder:
+A simple link to the `index.vue` page in your `app/pages` folder:
 
 ```vue
 <template>
@@ -399,11 +399,11 @@ function navigate(){
 
 ## Client-Only Pages
 
-You can define a page as [client only](/docs/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/guide/directory-structure/app/components#client-components) by giving it a `.client.vue` suffix. None of the content of this page will be rendered on the server.
 
 ## Server-Only Pages
 
-You can define a page as [server only](/docs/guide/directory-structure/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/guide/directory-structure/app/components#server-components) by giving it a `.server.vue` suffix. While you will be able to navigate to the page using client-side navigation, controlled by `vue-router`, it will be rendered with a server component automatically, meaning the code required to render the page will not be in your client-side bundle.
 
 ::warning
 Server-only pages must have a single root element. (HTML comments are considered elements as well.)
@@ -417,7 +417,7 @@ As your app gets bigger and more complex, your routing might require more flexib
 
 ## Multiple Pages Directories
 
-By default, all your pages should be in one `pages` directory at the root of your project.
+By default, all your pages should be in one `app/pages` directory at the root of your project.
 
 However, you can use [Nuxt Layers](/docs/getting-started/layers) to create groupings of your app's pages:
 

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

@@ -5,7 +5,7 @@ head.title: "plugins/"
 navigation.icon: i-lucide-folder
 ---
 
-Nuxt automatically reads the files in the `plugins/` directory and loads them at the creation of the Vue application.
+Nuxt automatically reads the files in the `app/plugins/` directory and loads them at the creation of the Vue application.
 
 ::note
 All plugins inside are auto-registered, you don't need to add them to your `nuxt.config` separately.
@@ -30,7 +30,7 @@ Only files at the top level of the directory (or index files within any subdirec
 
 Only `foo.ts` and `bar/index.ts` would be registered.
 
-To add plugins in subdirectories, you can use the [`plugins`](/docs/api/nuxt-config#plugins-1) option in `nuxt.config.ts`:
+To add plugins in subdirectories, you can use the [`app/plugins`](/docs/api/nuxt-config#plugins-1) option in `nuxt.config.ts`:
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -134,9 +134,9 @@ export default defineNuxtPlugin({
 
 ## Using Composables
 
-You can use [composables](/docs/guide/directory-structure/composables) as well as [utils](/docs/guide/directory-structure/utils) within Nuxt plugins:
+You can use [composables](/docs/guide/directory-structure/app/composables) as well as [utils](/docs/guide/directory-structure/app/utils) within Nuxt plugins:
 
-```ts [plugins/hello.ts]
+```ts [app/plugins/hello.ts]
 export default defineNuxtPlugin((nuxtApp) => {
   const foo = useFoo()
 })
@@ -186,7 +186,7 @@ export default defineNuxtPlugin({
 
 You can then use the helper in your components:
 
-```vue [components/Hello.vue]
+```vue [app/components/Hello.vue]
 <script setup lang="ts">
 // alternatively, you can also use it here
 const { $hello } = useNuxtApp()
@@ -200,7 +200,7 @@ const { $hello } = useNuxtApp()
 ```
 
 ::important
-Note that we highly recommend using [`composables`](/docs/guide/directory-structure/composables) instead of providing helpers to avoid polluting the global namespace and keep your main bundle entry small.
+Note that we highly recommend using [`composables`](/docs/guide/directory-structure/app/composables) instead of providing helpers to avoid polluting the global namespace and keep your main bundle entry small.
 ::
 
 ::warning
@@ -261,7 +261,7 @@ bun add -D vue-gtag-next
 
 Then create a plugin file:
 
-```ts [plugins/vue-gtag.client.ts]
+```ts [app/plugins/vue-gtag.client.ts]
 import VueGtag, { trackRouter } from 'vue-gtag-next'
 
 export default defineNuxtPlugin((nuxtApp) => {

package/2.guide/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-lucide-folder
 ---
 
-The main purpose of the [`utils/` directory](/docs/guide/directory-structure/utils) is to allow a semantic distinction between your Vue composables and other auto-imported utility functions.
+The main purpose of the [`app/utils/` directory](/docs/guide/directory-structure/app/utils) is to allow a semantic distinction between your Vue composables and other auto-imported utility functions.
 
 ## Usage
 
@@ -29,7 +29,7 @@ export default function (arr: Array<any>) {
 
 You can now use auto imported utility functions in `.js`, `.ts` and `.vue` files
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <p>{{ formatNumber(1234) }}</p>
 </template>
@@ -40,7 +40,7 @@ You can now use auto imported utility functions in `.js`, `.ts` and `.vue` files
 :link-example{to="/docs/examples/features/auto-imports"}
 
 ::tip
-The way `utils/` auto-imports work and are scanned is identical to the [`composables/`](/docs/guide/directory-structure/composables) directory.
+The way `app/utils/` auto-imports work and are scanned is identical to the [`app/composables/`](/docs/guide/directory-structure/app/composables) directory.
 ::
 
 ::important

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

@@ -37,7 +37,7 @@ export default defineAppConfig({
 
 We can now universally access `theme` both when server-rendering the page and in the browser using [`useAppConfig`](/docs/api/composables/use-app-config) composable.
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup lang="ts">
 const appConfig = useAppConfig()
 
@@ -47,7 +47,7 @@ console.log(appConfig.theme)
 
 The [`updateAppConfig`](/docs/api/utils/update-app-config) utility can be used to update the `app.config` at runtime.
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup>
 const appConfig = useAppConfig() // { foo: 'bar' }
 

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

@@ -6,16 +6,16 @@ navigation.icon: i-lucide-file
 ---
 
 ::tip
-If you have a `pages/` directory, the `app.vue` file is optional. Nuxt will automatically include a default `app.vue`, but you can still add your own to customize the structure and content as needed.
+If you have a `app/pages/` directory, the `app.vue` file is optional. Nuxt will automatically include a default `app.vue`, but you can still add your own to customize the structure and content as needed.
 ::
 
 ## Usage
 
 ### Minimal Usage
 
-With Nuxt, the [`pages/`](/docs/guide/directory-structure/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/guide/directory-structure/app/pages) directory is optional. If it is not present, Nuxt will not include the [vue-router](https://router.vuejs.org) dependency. This is useful when building a landing page or an application that does not require routing.
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <h1>Hello World!</h1>
 </template>
@@ -25,9 +25,9 @@ With Nuxt, the [`pages/`](/docs/guide/directory-structure/pages) directory is op
 
 ### Usage with Pages
 
-When you have a [`pages/`](/docs/guide/directory-structure/pages) directory, you need to use the [`<NuxtPage>`](/docs/api/components/nuxt-page) component to display the current page:
+When you have a [`app/pages/`](/docs/guide/directory-structure/app/pages) directory, you need to use the [`<NuxtPage>`](/docs/api/components/nuxt-page) component to display the current page:
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <NuxtPage />
 </template>
@@ -35,7 +35,7 @@ When you have a [`pages/`](/docs/guide/directory-structure/pages) directory, you
 
 You can also define the common structure of your application directly in `app.vue`. This is useful when you want to include global elements such as a header or footer:
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <header>
     Header content
@@ -51,15 +51,15 @@ You can also define the common structure of your application directly in `app.vu
 Remember that `app.vue` acts as the main component of your Nuxt application. Anything you add to it (JS and CSS) will be global and included in every page.
 ::
 
-::read-more{to="/docs/guide/directory-structure/pages"}
-Learn more about how to structure your pages using the `pages/` directory.
+::read-more{to="/docs/guide/directory-structure/app/pages"}
+Learn more about how to structure your pages using the `app/pages/` directory.
 ::
 
 ### Usage with Layouts
 
-When your application requires different layouts for different pages, you can use the `layouts/` directory with the [`<NuxtLayout>`](/docs/api/components/nuxt-layout) component. This allows you to define multiple layouts and apply them per page.
+When your application requires different layouts for different pages, you can use the `app/layouts/` directory with the [`<NuxtLayout>`](/docs/api/components/nuxt-layout) component. This allows you to define multiple layouts and apply them per page.
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <NuxtLayout>
     <NuxtPage />
@@ -67,6 +67,6 @@ When your application requires different layouts for different pages, you can us
 </template>
 ```
 
-::read-more{to="/docs/guide/directory-structure/layouts"}
-Learn more about how to structure your layouts using the `layouts/` directory.
+::read-more{to="/docs/guide/directory-structure/app/layouts"}
+Learn more about how to structure your layouts using the `app/layouts/` directory.
 ::

package/2.guide/2.directory-structure/1.content.md

@@ -36,9 +36,9 @@ The module automatically loads and parses them.
 
 ## Render Content
 
-To render content pages, add a [catch-all route](/docs/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/guide/directory-structure/app/pages/#catch-all-route) using the [`<ContentRenderer>`](https://content.nuxt.com/docs/components/content-renderer) component:
 
-```vue [pages/[...slug\\].vue]
+```vue [app/pages/[...slug\\].vue]
 <script lang="ts" setup>
 const route = useRoute()
 const { data: page } = await useAsyncData(route.path, () => {

package/2.guide/2.directory-structure/1.public.md

@@ -14,7 +14,7 @@ Files contained within the `public/` directory are served at the root and are no
 ---| robots.txt
 ```
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 useSeoMeta({
   ogImage: '/og-image.png'

package/2.guide/2.directory-structure/1.server.md

@@ -31,7 +31,7 @@ export default defineEventHandler((event) => {
 
 You can now universally call this API in your pages and components:
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup lang="ts">
 const { data } = await useFetch('/api/hello')
 </script>
@@ -58,7 +58,7 @@ export default defineEventHandler(() => 'Hello World!')
 Given the example above, the `/hello` route will be accessible at <http://localhost:3000/hello>.
 
 ::note
-Note that currently server routes do not support the full functionality of dynamic routes as [pages](/docs/guide/directory-structure/pages#dynamic-routes) do.
+Note that currently server routes do not support the full functionality of dynamic routes as [pages](/docs/guide/directory-structure/app/pages#dynamic-routes) do.
 ::
 
 ## Server Middleware
@@ -232,7 +232,7 @@ Alternatively, use `readValidatedBody` with a schema validator such as Zod for r
 
 You can now universally call this API using:
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 async function submit() {
   const { body } = await $fetch('/api/submit', {

package/2.guide/2.directory-structure/1.shared.md

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

package/2.guide/3.going-further/1.experimental-features.md

@@ -61,7 +61,7 @@ This feature will likely be removed in a near future.
 
 Emits `app:chunkError` hook when there is an error loading vite/webpack chunks. Default behavior is to perform a reload of the new route on navigation to a new route when a chunk fails to load.
 
-If you set this to `'automatic-immediate'` Nuxt will reload the current route immediately, instead of waiting for a navigation. This is useful for chunk errors that are not triggered by navigation, e.g., when your Nuxt app fails to load a [lazy component](/docs/guide/directory-structure/components#dynamic-imports). A potential downside of this behavior is undesired reloads, e.g., when your app does not need the chunk that caused the error.
+If you set this to `'automatic-immediate'` Nuxt will reload the current route immediately, instead of waiting for a navigation. This is useful for chunk errors that are not triggered by navigation, e.g., when your Nuxt app fails to load a [lazy component](/docs/guide/directory-structure/app/components#dynamic-imports). A potential downside of this behavior is undesired reloads, e.g., when your app does not need the chunk that caused the error.
 
 You can disable automatic handling by setting this to `false`, or handle chunk errors manually by setting it to `manual`.
 
@@ -220,7 +220,7 @@ export default defineNuxtConfig({
 })
 ```
 
-:read-more{to="/docs/guide/directory-structure/components#server-components"}
+:read-more{to="/docs/guide/directory-structure/app/components#server-components"}
 
 ::read-more{icon="i-simple-icons-github" to="https://github.com/nuxt/nuxt/issues/19772" target="_blank"}
 You can follow the server components roadmap on GitHub.
@@ -423,7 +423,7 @@ export default defineNuxtConfig({
 })
 ```
 
-This allows modules to access additional metadata from the page metadata in the build context. If you are using this within a module, it's recommended also to [augment the `NuxtPage` types with your keys](/docs/guide/directory-structure/pages#typing-custom-metadata).
+This allows modules to access additional metadata from the page metadata in the build context. If you are using this within a module, it's recommended also to [augment the `NuxtPage` types with your keys](/docs/guide/directory-structure/app/pages#typing-custom-metadata).
 
 ## normalizeComponentNames
 
@@ -531,7 +531,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::read-more{icon="i-simple-icons-github" color="gray" to="/docs/guide/directory-structure/components#delayed-or-lazy-hydration"}
+::read-more{icon="i-simple-icons-github" color="gray" to="/docs/guide/directory-structure/app/components#delayed-or-lazy-hydration"}
 Read more about lazy hydration.
 ::
 
@@ -575,7 +575,7 @@ export default defineNuxtConfig({
 })
 ```
 
-```ts [app.vue]
+```ts [app/app.vue]
 function something (_method: () => unknown) {
   return () => 'decorated'
 }

package/2.guide/3.going-further/10.runtime-config.md

@@ -97,7 +97,7 @@ The behavior is different between the client-side and server-side:
 - On server-side, the entire runtime config is available, but it is read-only to avoid context sharing.
 ::
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup lang="ts">
 const config = useRuntimeConfig()
 
@@ -122,7 +122,7 @@ if (import.meta.server) {
 
 If you want to use the runtime config within any (custom) plugin, you can use [`useRuntimeConfig()`](/docs/api/composables/use-runtime-config) inside of your `defineNuxtPlugin` function.
 
-```ts [plugins/config.ts]
+```ts [app/plugins/config.ts]
 export default defineNuxtPlugin((nuxtApp) => {
   const config = useRuntimeConfig()
 

package/2.guide/3.going-further/2.hooks.md

@@ -41,7 +41,7 @@ Explore all available Nuxt hooks.
 
 App hooks can be mainly used by [Nuxt Plugins](/docs/guide/directory-structure/plugins) to hook into rendering lifecycle but could also be used in Vue composables.
 
-```js [plugins/test.ts]
+```js [app/plugins/test.ts]
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.hook('page:start', () => {
     /* your code goes here */

package/2.guide/3.going-further/6.nuxt-app.md

@@ -23,7 +23,7 @@ Jump over the `NuxtApp` interface documentation.
 
 Many composables and utilities, both built-in and user-made, may require access to the Nuxt instance. This doesn't exist everywhere on your application, because a fresh instance is created on every request.
 
-Currently, the Nuxt context is only accessible in [plugins](/docs/guide/directory-structure/plugins), [Nuxt hooks](/docs/guide/going-further/hooks), [Nuxt middleware](/docs/guide/directory-structure/middleware) (if wrapped in `defineNuxtRouteMiddleware`), and [setup functions](https://vuejs.org/api/composition-api-setup.html) (in pages and components).
+Currently, the Nuxt context is only accessible in [plugins](/docs/guide/directory-structure/plugins), [Nuxt hooks](/docs/guide/going-further/hooks), [Nuxt middleware](/docs/guide/directory-structure/app/middleware) (if wrapped in `defineNuxtRouteMiddleware`), and [setup functions](https://vuejs.org/api/composition-api-setup.html) (in pages and components).
 
 If a composable is called without access to the context, you may get an error stating that 'A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function.' In that case, you can also explicitly call functions within this context by using [`nuxtApp.runWithContext`](/docs/api/composables/use-nuxt-app#runwithcontext).
 
@@ -31,7 +31,7 @@ If a composable is called without access to the context, you may get an error st
 
 Within composables, plugins and components you can access `nuxtApp` with [`useNuxtApp()`](/docs/api/composables/use-nuxt-app):
 
-```ts [composables/useMyComposable.ts]
+```ts [app/composables/useMyComposable.ts]
 export function useMyComposable () {
   const nuxtApp = useNuxtApp()
   // access runtime nuxt app instance

package/2.guide/3.going-further/7.layers.md

@@ -15,13 +15,13 @@ export default defineNuxtConfig({})
 
 Additionally, certain other files in the layer directory will be auto-scanned and used by Nuxt for the project extending this layer.
 
-- [`app/components/*`](/docs/guide/directory-structure/components)   - Extend the default components
-- [`app/composables/*`](/docs/guide/directory-structure/composables)  - Extend the default composables
-- [`app/layouts/*`](/docs/guide/directory-structure/layouts)  - Extend the default layouts
-- [`app/middleware/*`](/docs/guide/directory-structure/middleware)  - Extend the default middleware
-- [`app/pages/*`](/docs/guide/directory-structure/pages)        - Extend the default pages
+- [`app/components/*`](/docs/guide/directory-structure/app/components)   - Extend the default components
+- [`app/composables/*`](/docs/guide/directory-structure/app/composables)  - Extend the default composables
+- [`app/layouts/*`](/docs/guide/directory-structure/app/layouts)  - Extend the default layouts
+- [`app/middleware/*`](/docs/guide/directory-structure/app/middleware)  - Extend the default middleware
+- [`app/pages/*`](/docs/guide/directory-structure/app/pages)        - Extend the default pages
 - [`app/plugins/*`](/docs/guide/directory-structure/plugins)        - Extend the default plugins
-- [`app/utils/*`](/docs/guide/directory-structure/utils)   - Extend the default utils
+- [`app/utils/*`](/docs/guide/directory-structure/app/utils)   - Extend the default utils
 - [`app/app.config.ts`](/docs/guide/directory-structure/app-config)  - Extend the default app config
 - [`server/*`](/docs/guide/directory-structure/server)       - Extend the default server endpoints & middleware
 - [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config)- Extend the default nuxt config
@@ -38,7 +38,7 @@ Additionally, certain other files in the layer directory will be auto-scanned an
   })
   ```
 
-  ```vue [app.vue]
+  ```vue [app/app.vue]
     <template>
       <BaseComponent/>
     </template>

package/2.guide/4.recipes/1.custom-routing.md

@@ -5,7 +5,7 @@ description: "In Nuxt, your routing is defined by the structure of your files in
 
 ## Adding custom routes
 
-In Nuxt, your routing is defined by the structure of your files inside the [pages directory](/docs/guide/directory-structure/pages). However, since it uses [vue-router](https://router.vuejs.org) under the hood, Nuxt offers you several ways to add custom routes in your project.
+In Nuxt, your routing is defined by the structure of your files inside the [app/pages directory](/docs/guide/directory-structure/app/pages). However, since it uses [vue-router](https://router.vuejs.org) under the hood, Nuxt offers you several ways to add custom routes in your project.
 
 ### Router Config
 

package/2.guide/4.recipes/2.vite-plugin.md

@@ -52,7 +52,7 @@ For example, we can have a `config.yaml` that stores configuration data and impo
 greeting: "Hello, Nuxt with Vite!"
 ```
 
-```vue [components/Hello.vue]
+```vue [app/components/Hello.vue]
 <script setup>
 import config from '~/data/hello.yaml'
 </script>

package/2.guide/4.recipes/3.custom-usefetch.md

@@ -23,7 +23,7 @@ Let's pretend here that:
 - We are storing the JWT token in a session with [nuxt-auth-utils](https://github.com/atinux/nuxt-auth-utils)
 - If the API responds with a `401` status code, we redirect the user to the `/login` page
 
-```ts [plugins/api.ts]
+```ts [app/plugins/api.ts]
 export default defineNuxtPlugin((nuxtApp) => {
   const { session } = useUserSession()
 
@@ -53,7 +53,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 
 With this Nuxt plugin, `$api` is exposed from `useNuxtApp()` to make API calls directly from the Vue components:
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup>
 const { $api } = useNuxtApp()
 const { data: modules } = await useAsyncData('modules', () => $api('/modules'))
@@ -68,7 +68,7 @@ Wrapping with [`useAsyncData`](/docs/api/composables/use-async-data) **avoid dou
 
 Now that `$api` has the logic we want, let's create a `useAPI` composable to replace the usage of `useAsyncData` + `$api`:
 
-```ts [composables/useAPI.ts]
+```ts [app/composables/useAPI.ts]
 import type { UseFetchOptions } from 'nuxt/app'
 
 export function useAPI<T>(
@@ -84,7 +84,7 @@ export function useAPI<T>(
 
 Let's use the new composable and have a nice and clean component:
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup>
 const { data: modules } = await useAPI('/modules')
 </script>

package/2.guide/4.recipes/4.sessions-and-authentication.md

@@ -91,7 +91,7 @@ const { loggedIn, session, user, clear, fetch } = useUserSession()
 
 Let's create a login page with a form to submit the login data to our `/api/login` route.
 
-```vue [pages/login.vue]
+```vue [app/pages/login.vue]
 <script setup lang="ts">
 const { loggedIn, user, fetch: refreshSession } = useUserSession()
 const credentials = reactive({
@@ -143,13 +143,13 @@ export default defineEventHandler(async (event) => {
 
 ## Protect App Routes
 
-Our data is safe with the server-side route in place, but without doing anything else, unauthenticated users would probably get some odd data when trying to access the `/users` page. We should create a [client-side middleware](https://nuxt.com/docs/guide/directory-structure/middleware) to protect the route on the client side and redirect users to the login page.
+Our data is safe with the server-side route in place, but without doing anything else, unauthenticated users would probably get some odd data when trying to access the `/users` page. We should create a [client-side middleware](https://nuxt.com/docs/guide/directory-structure/app/middleware) to protect the route on the client side and redirect users to the login page.
 
 `nuxt-auth-utils` provides a convenient `useUserSession` composable which we'll use to check if the user is logged in, and redirect them if they are not.
 
 We'll create a middleware in the `/middleware` directory. Unlike on the server, client-side middleware is not automatically applied to all endpoints, and we'll need to specify where we want it applied.
 
-```typescript [middleware/authenticated.ts]
+```typescript [app/middleware/authenticated.ts]
 export default defineNuxtRouteMiddleware(() => {
   const { loggedIn } = useUserSession()
 
@@ -166,7 +166,7 @@ Now that we have our app middleware to protect our routes, we can use it on our
 
 We'll use [`definePageMeta`](/docs/api/utils/define-page-meta) to apply the middleware to the route that we want to protect.
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup lang="ts">
 definePageMeta({
   middleware: ['authenticated'],

package/2.guide/5.best-practices/performance.md

@@ -90,7 +90,7 @@ const show = ref(false)
 
 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.
 
-:read-more{title="Lazy loading components" to="/docs/guide/directory-structure/components#dynamic-imports"}
+:read-more{title="Lazy loading components" to="/docs/guide/directory-structure/app/components#dynamic-imports"}
 
 ### Lazy Hydration
 
@@ -106,7 +106,7 @@ It is not always necessary to hydrate (or make interactive) all the components o
 
 To optimize your app, you may want to delay the hydration of some components until they're visible, or until the browser is done with more important tasks.
 
-:read-more{title="Lazy hydration" to="/docs/guide/directory-structure/components#delayed-or-lazy-hydration"}
+:read-more{title="Lazy hydration" to="/docs/guide/directory-structure/app/components#delayed-or-lazy-hydration"}
 
 ### Fetching data
 

package/3.api/1.components/1.client-only.md

@@ -35,7 +35,7 @@ The content of the default slot will be tree-shaken out of the server build. (Th
 
 - `#fallback`: specify a content to be rendered on the server and displayed until `<ClientOnly>` is mounted in the browser.
 
-```vue [pages/example.vue]
+```vue [app/pages/example.vue]
 <template>
   <div>
     <Sidebar />
@@ -58,7 +58,7 @@ The content of the default slot will be tree-shaken out of the server build. (Th
 
 Components inside `<ClientOnly>` are rendered only after being mounted. To access the rendered elements in the DOM, you can watch a template ref:
 
-```vue [pages/example.vue]
+```vue [app/pages/example.vue]
 <script setup lang="ts">
 const nuxtWelcomeRef = useTemplateRef('nuxtWelcomeRef')
 

package/3.api/1.components/1.dev-only.md

@@ -12,7 +12,7 @@ Nuxt provides the `<DevOnly>` component to render a component only during develo
 
 The content will not be included in production builds.
 
-```vue [pages/example.vue]
+```vue [app/pages/example.vue]
 <template>
   <div>
     <Sidebar />

package/3.api/1.components/1.nuxt-client-fallback.md

@@ -18,7 +18,7 @@ Nuxt provides the `<NuxtClientFallback>` component to render its content on the
 This component is experimental and in order to use it you must enable the `experimental.clientFallback` option in your `nuxt.config`.
 ::
 
-```vue [pages/example.vue]
+```vue [app/pages/example.vue]
 <template>
   <div>
     <Sidebar />