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

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/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 [`app/pages/` directory](/docs/guide/directory-structure/app/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

@@ -90,7 +90,7 @@ NUXT_API_SECRET=api_secret_token
 
 These variables are exposed to the rest of your application using the [`useRuntimeConfig()`](/docs/api/composables/use-runtime-config) composable.
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup lang="ts">
 const runtimeConfig = useRuntimeConfig()
 </script>
@@ -118,7 +118,7 @@ export default defineAppConfig({
 
 These variables are exposed to the rest of your application using the [`useAppConfig`](/docs/api/composables/use-app-config) composable.
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup lang="ts">
 const appConfig = useAppConfig()
 </script>

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

@@ -10,7 +10,7 @@ navigation.icon: i-lucide-panels-top-left
 
 By default, Nuxt will treat this file as the **entrypoint** and render its content for every route of the application.
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <div>
    <h1>Welcome to the homepage</h1>
@@ -26,11 +26,11 @@ 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/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 [`app/components/`](/docs/guide/directory-structure/app/components) directory, and they will be automatically available across your application without having to explicitly import them.
 
 ::code-group
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <div>
     <h1>Welcome to the homepage</h1>
@@ -41,7 +41,7 @@ Most components are reusable pieces of the user interface, like buttons and menu
 </template>
 ```
 
-```vue [components/AppAlert.vue]
+```vue [app/components/AppAlert.vue]
 <template>
   <span>
     <slot />
@@ -55,13 +55,13 @@ 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/guide/directory-structure/pages) directory represents a different route displaying its content.
+Pages represent views for each specific route pattern. Every file in the [`app/pages/`](/docs/guide/directory-structure/app/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/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/guide/directory-structure/pages) directory.
+To use pages, create an `app/pages/index.vue` file and add `<NuxtPage />` component to the [`app/app.vue`](/docs/guide/directory-structure/app) (or remove `app/app.vue` for default entry). You can now create more pages and their corresponding routes by adding new files in the [`app/pages/`](/docs/guide/directory-structure/app/pages) directory.
 
 ::code-group
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <template>
   <div>
     <h1>Welcome to the homepage</h1>
@@ -72,7 +72,7 @@ To use pages, create `pages/index.vue` file and add `<NuxtPage />` component to
 </template>
 ```
 
-```vue [pages/about.vue]
+```vue [app/pages/about.vue]
 <template>
   <section>
     <p>This page will be displayed at the /about route.</p>
@@ -88,15 +88,15 @@ To use pages, create `pages/index.vue` file and add `<NuxtPage />` component to
 
 ![Layouts are wrapper around pages](/assets/docs/getting-started/views/layouts.svg)
 
-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.
+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 `app/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/guide/directory-structure/app) with [`<NuxtPage />`](/docs/api/components/nuxt-page) instead.
+If you only have a single layout in your application, we recommend using [`app/app.vue`](/docs/guide/directory-structure/app) with [`<NuxtPage />`](/docs/api/components/nuxt-page) instead.
 ::
 
 ::code-group
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <div>
     <NuxtLayout>
@@ -106,7 +106,7 @@ If you only have a single layout in your application, we recommend using [`app.v
 </template>
 ```
 
-```vue [layouts/default.vue]
+```vue [app/layouts/default.vue]
 <template>
   <div>
     <AppHeader />
@@ -116,7 +116,7 @@ If you only have a single layout in your application, we recommend using [`app.v
 </template>
 ```
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <template>
   <div>
     <h1>Welcome to the homepage</h1>
@@ -127,7 +127,7 @@ If you only have a single layout in your application, we recommend using [`app.v
 </template>
 ```
 
-```vue [pages/about.vue]
+```vue [app/pages/about.vue]
 <template>
   <section>
     <p>This page will be displayed at the /about route.</p>
@@ -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/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/guide/directory-structure/app/layouts).
 
 ## Advanced: Extending the HTML Template
 

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

@@ -7,7 +7,7 @@ navigation.icon: i-lucide-image
 Nuxt uses two directories to handle assets like stylesheets, fonts or images.
 
 - The [`public/`](/docs/guide/directory-structure/public) directory content is served at the server root as-is.
-- The [`assets/`](/docs/guide/directory-structure/assets) directory contains by convention every asset that you want the build tool (Vite or webpack) to process.
+- The [`app/assets/`](/docs/guide/directory-structure/app/assets) directory contains by convention every asset that you want the build tool (Vite or webpack) to process.
 
 ## Public Directory
 
@@ -19,7 +19,7 @@ You can get a file in the [`public/`](/docs/guide/directory-structure/public) di
 
 For example, referencing an image file in the `public/img/` directory, available at the static URL `/img/nuxt.png`:
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <img src="/img/nuxt.png" alt="Discover Nuxt" />
 </template>
@@ -29,20 +29,20 @@ 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/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 [`app/assets/`](/docs/guide/directory-structure/app/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/guide/directory-structure/assets) directory by using the `~/assets/` path.
+In your application's code, you can reference a file located in the [`app/assets/`](/docs/guide/directory-structure/app/assets) directory by using the `~/assets/` path.
 
 ### Example
 
 For example, referencing an image file that will be processed if a build tool is configured to handle this file extension:
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <img src="~/assets/img/nuxt.png" alt="Discover Nuxt" />
 </template>
 ```
 
 ::note
-Nuxt won't serve files in the [`assets/`](/docs/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 [`app/assets/`](/docs/guide/directory-structure/app/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,14 +9,14 @@ 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/guide/directory-structure/assets).
+If you're writing local stylesheets, the natural place to put them is the [`app/assets/` directory](/docs/guide/directory-structure/app/assets).
 
 ### Importing Within Components
 
 You can import stylesheets in your pages, layouts and components directly.
 You can use a JavaScript import, or a CSS [`@import` statement](https://developer.mozilla.org/en-US/docs/Web/CSS/@import).
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script>
 // Use a static import for server-side compatibility
 import '~/assets/css/first.css'
@@ -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/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 [`app/assets/` directory](/docs/guide/directory-structure/app/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({
@@ -99,7 +99,7 @@ bun install animate.css
 
 Then you can reference it directly in your pages, layouts and components:
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script>
 import 'animate.css'
 </script>
@@ -185,10 +185,10 @@ npm install -D stylus
 
 ::
 
-The natural place to write your stylesheets is the `assets` directory.
+The natural place to write your stylesheets is the `app/assets` directory.
 You can then import your source files in your `app.vue` (or layouts files) using your preprocessor's syntax.
 
-```vue [pages/app.vue]
+```vue [app/pages/app.vue]
 <style lang="scss">
 @use "~/assets/scss/main.scss";
 </style>
@@ -208,7 +208,7 @@ In both cases, the compiled stylesheets will be inlined in the HTML rendered by
 
 If you need to inject code in pre-processed files, like a [Sass partial](https://sass-lang.com/documentation/at-rules/use#partials) with color variables, you can do so with the Vite [preprocessors options](https://vite.dev/config/shared-options.html#css-preprocessoroptions).
 
-Create some partials in your `assets` directory:
+Create some partials in your `app/assets` directory:
 
 ::code-group{sync="preprocessor"}
 
@@ -492,7 +492,7 @@ Use different styles for different layouts.
 </style>
 ```
 
-:read-more{to="/docs/guide/directory-structure/layouts"}
+:read-more{to="/docs/guide/directory-structure/app/layouts"}
 
 ## Third Party Libraries And Modules
 

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/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 [`app/pages/`](/docs/guide/directory-structure/app/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/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 [`app/pages/` directory](/docs/guide/directory-structure/app/pages), based on their filename.
 
 This file system routing uses naming conventions to create dynamic and nested routes:
 
@@ -43,7 +43,7 @@ This file system routing uses naming conventions to create dynamic and nested ro
 
 ::
 
-:read-more{to="/docs/guide/directory-structure/pages"}
+:read-more{to="/docs/guide/directory-structure/app/pages"}
 
 ## Navigation
 
@@ -51,7 +51,7 @@ The [`<NuxtLink>`](/docs/api/components/nuxt-link) component links pages between
 
 When a [`<NuxtLink>`](/docs/api/components/nuxt-link) enters the viewport on the client side, Nuxt will automatically prefetch components and payload (generated pages) of the linked pages ahead of time, resulting in faster navigation.
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <template>
   <header>
     <nav>
@@ -93,8 +93,8 @@ Route middleware runs within the Vue part of your Nuxt app. Despite the similar
 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/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/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 [`app/middleware/`](/docs/guide/directory-structure/app/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 [`app/middleware/`](/docs/guide/directory-structure/app/middleware) directory (with a `.global` suffix) and will be automatically run on every route change.
 
 Example of an `auth` middleware protecting the `/dashboard` page:
 
@@ -125,7 +125,7 @@ definePageMeta({
 
 ::
 
-:read-more{to="/docs/guide/directory-structure/middleware"}
+:read-more{to="/docs/guide/directory-structure/app/middleware"}
 
 ## Route Validation
 

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

@@ -60,7 +60,7 @@ export default defineNuxtConfig({
 
 The [`useHead`](/docs/api/composables/use-head) composable function supports reactive input, allowing you to manage your head tags programmatically.
 
-```vue twoslash [app.vue]
+```vue twoslash [app/app.vue]
 <script setup lang="ts">
 useHead({
   title: 'My App',
@@ -83,7 +83,7 @@ The [`useSeoMeta`](/docs/api/composables/use-seo-meta) composable lets you defin
 
 This helps you avoid typos and common mistakes, such as using `name` instead of `property`.
 
-```vue twoslash [app.vue]
+```vue twoslash [app/app.vue]
 <script setup lang="ts">
 useSeoMeta({
   title: 'My Amazing Site',
@@ -109,7 +109,7 @@ the capitalization of these components ensuring we don't use invalid native HTML
 
 <!-- @case-police-ignore html -->
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 const title = ref('Hello World')
 </script>
@@ -183,7 +183,7 @@ Reactivity is supported on all properties, by providing a computed value, a gett
   </script>
   ```
 
-  ```vue [Components]
+  ```vue [app/Components]
   <script setup lang="ts">
   const description = ref('My amazing site.')
   </script>
@@ -267,7 +267,7 @@ useHead({
 
 ### With `definePageMeta`
 
-Within your [`pages/` directory](/docs/guide/directory-structure/pages), you can use `definePageMeta` along with [`useHead`](/docs/api/composables/use-head) to set metadata based on the current route.
+Within your [`app/pages/` directory](/docs/guide/directory-structure/app/pages), you can use `definePageMeta` along with [`useHead`](/docs/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):
 
@@ -293,13 +293,13 @@ useHead({
 
 :link-example{to="/docs/examples/features/meta-tags"}
 
-:read-more{to="/docs/guide/directory-structure/pages/#page-metadata"}
+:read-more{to="/docs/guide/directory-structure/app/pages/#page-metadata"}
 
 ### Dynamic Title
 
 In the example below, `titleTemplate` is set either as a string with the `%s` placeholder or as a `function`, which allows greater flexibility in setting the page title dynamically for each route of your Nuxt app:
 
-```vue twoslash [app.vue]
+```vue twoslash [app/app.vue]
 <script setup lang="ts">
 useHead({
   // as a string,
@@ -309,7 +309,7 @@ useHead({
 </script>
 ```
 
-```vue twoslash [app.vue]
+```vue twoslash [app/app.vue]
 <script setup lang="ts">
 useHead({
   // or as a function
@@ -348,7 +348,7 @@ The example below shows how you might enable Google Fonts using either the `link
   </script>
   ```
 
-  ```vue [Components]
+  ```vue [app/Components]
   <template>
     <div>
       <Link rel="preconnect" href="https://fonts.googleapis.com" />

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/guide/directory-structure/pages).
+You can enable page transitions to apply an automatic transition for all your [pages](/docs/guide/directory-structure/app/pages).
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -28,7 +28,7 @@ To start adding transition between your pages, add the following CSS to your [`a
 
 ::code-group
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <NuxtPage />
 </template>
@@ -46,7 +46,7 @@ To start adding transition between your pages, add the following CSS to your [`a
 </style>
 ```
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <template>
   <div>
     <h1>Home page</h1>
@@ -55,7 +55,7 @@ To start adding transition between your pages, add the following CSS to your [`a
 </template>
 ```
 
-```vue [pages/about.vue]
+```vue [app/pages/about.vue]
 <template>
   <div>
     <h1>About page</h1>
@@ -86,7 +86,7 @@ definePageMeta({
 </script>
 ```
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <NuxtPage />
 </template>
@@ -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/guide/directory-structure/layouts).
+You can enable layout transitions to apply an automatic transition for all your [layouts](/docs/guide/directory-structure/app/layouts).
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -129,7 +129,7 @@ To start adding transition between your pages and layouts, add the following CSS
 
 ::code-group
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <NuxtLayout>
     <NuxtPage />
@@ -148,7 +148,7 @@ To start adding transition between your pages and layouts, add the following CSS
 </style>
 ```
 
-```vue [layouts/default.vue]
+```vue [app/layouts/default.vue]
 <template>
   <div>
     <pre>default layout</pre>
@@ -163,7 +163,7 @@ div {
 </style>
 ```
 
-```vue [layouts/orange.vue]
+```vue [app/layouts/orange.vue]
 <template>
   <div>
     <pre>orange layout</pre>
@@ -180,7 +180,7 @@ div {
 </style>
 ```
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <template>
   <div>
     <h1>Home page</h1>
@@ -189,7 +189,7 @@ div {
 </template>
 ```
 
-```vue [pages/about.vue]
+```vue [app/pages/about.vue]
 <script setup lang="ts">
 definePageMeta({
   layout: 'orange'
@@ -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/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/guide/directory-structure/app/middleware) to assign a different transition name to `to.meta.pageTransition`.
 
 ::code-group
 
@@ -363,7 +363,7 @@ definePageMeta({
 </style>
 ```
 
-```vue [layouts/default.vue]
+```vue [app/layouts/default.vue]
 <script setup lang="ts">
 const route = useRoute()
 const id = computed(() => Number(route.params.id || 1))
@@ -394,7 +394,7 @@ The page now applies the `slide-left` transition when going to the next id and `
 
 When `<NuxtPage />` is used in `app.vue`, transitions can be configured with the `transition` prop to activate transitions globally.
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <div>
     <NuxtLayout>
@@ -431,7 +431,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/guide/directory-structure/pages), but you can set a different global default.
+By default, view transitions are enabled for all [pages](/docs/guide/directory-structure/app/pages), but you can set a different global default.
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({

package/1.getting-started/10.data-fetching.md

@@ -26,7 +26,7 @@ The payload is a JavaScript object accessible through [`useNuxtApp().payload`](/
 Use the [Nuxt DevTools](https://devtools.nuxt.com) to inspect this data in the **Payload tab**.
 ::
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 const { data } = await useFetch('/api/data')
 
@@ -132,7 +132,7 @@ Be very careful before proxying headers to an external API and just include head
 
 The [`useFetch`](/docs/api/composables/use-fetch) composable uses `$fetch` under-the-hood to make SSR-safe network calls in the setup function.
 
-```vue twoslash [app.vue]
+```vue twoslash [app/app.vue]
 <script setup lang="ts">
 const { data: count } = await useFetch('/api/count')
 </script>
@@ -163,7 +163,7 @@ It's developer experience sugar for the most common use case. (You can find out
 
 There are some cases when using the [`useFetch`](/docs/api/composables/use-fetch) composable is not appropriate, for example when a CMS or a third-party provide their own query layer. In this case, you can use [`useAsyncData`](/docs/api/composables/use-async-data) to wrap your calls and still keep the benefits provided by the composable.
 
-```vue [pages/users.vue]
+```vue [app/pages/users.vue]
 <script setup lang="ts">
 const { data, error } = await useAsyncData('users', () => myGetFunction('users'))
 
@@ -180,7 +180,7 @@ Since the autogenerated key only takes into account the file and line where `use
 Setting a key can be useful to share the same data between components using [`useNuxtData`](/docs/api/composables/use-nuxt-data) or to [refresh specific data](/docs/api/utils/refresh-nuxt-data#refresh-specific-data).
 ::
 
-```vue [pages/users/[id\\].vue]
+```vue [app/pages/users/[id\\].vue]
 <script setup lang="ts">
 const { id } = useRoute().params
 
@@ -252,7 +252,7 @@ If you have not fetched data on the server (for example, with `server: false`),
 
 By default, data fetching composables will wait for the resolution of their asynchronous function before navigating to a new page by using Vue's Suspense. This feature can be ignored on client-side navigation with the `lazy` option. In that case, you will have to manually handle loading state using the `status` value.
 
-```vue twoslash [app.vue]
+```vue twoslash [app/app.vue]
 <script setup lang="ts">
 const { status, data: posts } = useFetch('/api/posts', {
   lazy: true
@@ -581,7 +581,7 @@ However, when calling `useFetch` with a relative URL on the server, Nuxt will us
 
  If you want to pass on/proxy cookies in the other direction, from an internal request back to the client, you will need to handle this yourself.
 
-```ts [composables/fetch.ts]
+```ts [app/composables/fetch.ts]
 import { appendResponseHeader } from 'h3'
 import type { H3Event } from 'h3'
 
@@ -660,7 +660,7 @@ export default defineEventHandler(() => {
 })
 ```
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 // Type of `data` is inferred as string even though we returned a Date object
 const { data } = await useFetch('/api/foo')
@@ -691,7 +691,7 @@ export default defineEventHandler(() => {
 
 ```
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 // Type of `data` is inferred as
 // {
@@ -729,7 +729,7 @@ export default defineEventHandler(() => {
 })
 ```
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 import superjson from 'superjson'
 

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

@@ -35,7 +35,7 @@ Instead use `const useX = () => useState('x')`
 
 In this example, we use a component-local counter state. Any other component that uses `useState('counter')` shares the same reactive state.
 
-```vue twoslash [app.vue]
+```vue twoslash [app/app.vue]
 <script setup lang="ts">
 const counter = useState('counter', () => Math.round(Math.random() * 1000))
 </script>
@@ -63,7 +63,7 @@ To globally invalidate cached state, see [`clearNuxtState`](/docs/api/utils/clea
 
 Most of the time, you will want to initialize your state with data that resolves asynchronously. You can use the [`app.vue`](/docs/guide/directory-structure/app) component with the [`callOnce`](/docs/api/utils/call-once) util to do so.
 
-```vue twoslash [app.vue]
+```vue twoslash [app/app.vue]
 <script setup lang="ts">
 const websiteConfig = useState('config')
 
@@ -104,7 +104,7 @@ export const useWebsiteStore = defineStore('websiteStore', {
   }
 })
 ```
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 const website = useWebsiteStore()
 
@@ -123,7 +123,7 @@ await callOnce(website.fetch)
 ## Advanced Usage
 
 ::code-group
-```ts [composables/locale.ts]
+```ts [app/composables/locale.ts]
 import type { Ref } from 'vue'
 
 export const useLocale = () => {
@@ -165,7 +165,7 @@ export const useLocaleDate = (date: Ref<Date> | Date, locale = useLocale()) => {
 }
 ```
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 const locales = useLocales()
 const locale = useLocale()
@@ -191,13 +191,13 @@ const date = useLocaleDate(new Date('2016-10-26'))
 
 ## Shared State
 
-By using [auto-imported composables](/docs/guide/directory-structure/composables) we can define global type-safe states and import them across the app.
+By using [auto-imported composables](/docs/guide/directory-structure/app/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')
 ```
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 // ---cut-start---
 const useColor = () => useState<string>('color', () => 'pink')

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

@@ -215,7 +215,7 @@ The `#error` slot will receive `error` as a prop. (If you set `error = null` it
 If you navigate to another route, the error will be cleared automatically.
 ::
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <template>
   <!-- some content -->
   <NuxtErrorBoundary @error="someErrorLogger">