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

package/3.api/1.components/12.nuxt-route-announcer.md

@@ -16,9 +16,9 @@ This component is available in Nuxt v3.12+.
 
 ## Usage
 
-Add `<NuxtRouteAnnouncer/>` in your [`app.vue`](/docs/guide/directory-structure/app) or [`layouts/`](/docs/guide/directory-structure/layouts) to enhance accessibility by informing assistive technologies about page title changes. This ensures that navigational changes are announced to users relying on screen readers.
+Add `<NuxtRouteAnnouncer/>` in your [`app.vue`](/docs/guide/directory-structure/app) or [`app/layouts/`](/docs/guide/directory-structure/app/layouts) to enhance accessibility by informing assistive technologies about page title changes. This ensures that navigational changes are announced to users relying on screen readers.
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <NuxtRouteAnnouncer />
   <NuxtLayout>

package/3.api/1.components/2.nuxt-page.md

@@ -8,7 +8,7 @@ links:
     size: xs
 ---
 
-`<NuxtPage>` is a built-in component that comes with Nuxt. It lets you display top-level or nested pages located in the [`pages/`](/docs/guide/directory-structure/pages) directory.
+`<NuxtPage>` is a built-in component that comes with Nuxt. It lets you display top-level or nested pages located in the [`app/pages/`](/docs/guide/directory-structure/app/pages) directory.
 
 ::note
 `<NuxtPage>` is a wrapper around [`<RouterView>`](https://router.vuejs.org/api/interfaces/RouterViewProps.html#interface-routerviewprops) from Vue Router. It should be used instead of `<RouterView>` because the former takes additional care of internal states. Otherwise, `useRoute()` may return incorrect paths.
@@ -63,7 +63,7 @@ Nuxt automatically resolves the `name` and `route` by scanning and rendering all
 
 For example, if you pass a key that never changes, the `<NuxtPage>` component will be rendered only once - when it is first mounted.
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <NuxtPage page-key="static" />
 </template>
@@ -81,7 +81,7 @@ Don't use `$route` object here as it can cause problems with how `<NuxtPage>` re
 
 Alternatively, `pageKey` can be passed as a `key` value via [`definePageMeta`](/docs/api/utils/define-page-meta) from the `<script>` section of your Vue component in the `/pages` directory.
 
-```vue [pages/my-page.vue]
+```vue [app/pages/my-page.vue]
 <script setup lang="ts">
 definePageMeta({
   key: route => route.fullPath
@@ -95,7 +95,7 @@ definePageMeta({
 
 To get the `ref` of a page component, access it through `ref.value.pageRef`
 
-````vue [app.vue]
+````vue [app/app.vue]
 <script setup lang="ts">
 const page = ref()
 
@@ -127,7 +127,7 @@ defineExpose({
 
 For example, in the below example, the value of `foobar` will be passed to the `NuxtPage` component and then to the page components.
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <NuxtPage :foobar="123" />
 </template>
@@ -135,7 +135,7 @@ For example, in the below example, the value of `foobar` will be passed to the `
 
 We can access the `foobar` prop in the page component:
 
-```vue [pages/page.vue]
+```vue [app/pages/page.vue]
 <script setup lang="ts">
 const props = defineProps<{ foobar: number }>()
 
@@ -144,11 +144,11 @@ console.log(props.foobar) // Outputs: 123
 
 If you have not defined the prop with `defineProps`, any props passed down to `NuxtPage` can still be accessed directly from the page `attrs`:
 
-```vue [pages/page.vue]
+```vue [app/pages/page.vue]
 <script setup lang="ts">
 const attrs = useAttrs()
 console.log(attrs.foobar) // Outputs: 123
 </script>
 ```
 
-:read-more{to="/docs/guide/directory-structure/pages"}
+:read-more{to="/docs/guide/directory-structure/app/pages"}

package/3.api/1.components/3.nuxt-layout.md

@@ -10,7 +10,7 @@ links:
 
 You can use `<NuxtLayout />` component to activate the `default` layout on `app.vue` or `error.vue`.
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <NuxtLayout>
     some page content
@@ -18,15 +18,15 @@ You can use `<NuxtLayout />` component to activate the `default` layout on `app.
 </template>
 ```
 
-:read-more{to="/docs/guide/directory-structure/layouts"}
+:read-more{to="/docs/guide/directory-structure/app/layouts"}
 
 ## Props
 
-- `name`: Specify a layout name to be rendered, can be a string, reactive reference or a computed property. It **must** match the name of the corresponding layout file in the [`layouts/`](/docs/guide/directory-structure/layouts) directory.
+- `name`: Specify a layout name to be rendered, can be a string, reactive reference or a computed property. It **must** match the name of the corresponding layout file in the [`app/layouts/`](/docs/guide/directory-structure/app/layouts) directory.
   - **type**: `string`
   - **default**: `default`
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup lang="ts">
 // layouts/custom.vue
 const layout = 'custom'
@@ -51,11 +51,11 @@ Please note the layout name is normalized to kebab-case, so if your layout file
 </template>
 ```
 
-::read-more{to="/docs/guide/directory-structure/layouts"}
+::read-more{to="/docs/guide/directory-structure/app/layouts"}
 Read more about dynamic layouts.
 ::
 
-- `fallback`: If an invalid layout is passed to the `name` prop, no layout will be rendered. Specify a `fallback` layout to be rendered in this scenario. It **must** match the name of the corresponding layout file in the [`layouts/`](/docs/guide/directory-structure/layouts) directory.
+- `fallback`: If an invalid layout is passed to the `name` prop, no layout will be rendered. Specify a `fallback` layout to be rendered in this scenario. It **must** match the name of the corresponding layout file in the [`app/layouts/`](/docs/guide/directory-structure/app/layouts) directory.
   - **type**: `string`
   - **default**: `null`
 
@@ -63,7 +63,7 @@ Read more about dynamic layouts.
 
 `NuxtLayout` also accepts any additional props that you may need to pass to the layout. These custom props are then made accessible as attributes.
 
-```vue [pages/some-page.vue]
+```vue [app/pages/some-page.vue]
 <template>
   <div>
     <NuxtLayout name="custom" title="I am a custom layout">
@@ -75,7 +75,7 @@ Read more about dynamic layouts.
 
 In the above example, the value of `title` will be available using `$attrs.title` in the template or `useAttrs().title` in `<script setup>` at custom.vue.
 
-```vue [layouts/custom.vue]
+```vue [app/layouts/custom.vue]
 <script setup lang="ts">
 const layoutCustomProps = useAttrs()
 
@@ -89,7 +89,7 @@ console.log(layoutCustomProps.title) // I am a custom layout
 
 ::code-group
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <template>
   <div>
     <NuxtLayout name="custom">
@@ -99,7 +99,7 @@ console.log(layoutCustomProps.title) // I am a custom layout
 </template>
 ```
 
-```vue [layouts/custom.vue]
+```vue [app/layouts/custom.vue]
 <template>
   <div>
     <!-- named slot -->
@@ -119,7 +119,7 @@ To get the ref of a layout component, access it through `ref.value.layoutRef`.
 
 ::code-group
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 const layout = ref()
 
@@ -135,7 +135,7 @@ function logFoo () {
 </template>
 ```
 
-```vue [layouts/default.vue]
+```vue [app/layouts/default.vue]
 <script setup lang="ts">
 const foo = () => console.log('foo')
 defineExpose({
@@ -153,4 +153,4 @@ defineExpose({
 
 ::
 
-:read-more{to="/docs/guide/directory-structure/layouts"}
+:read-more{to="/docs/guide/directory-structure/app/layouts"}

package/3.api/1.components/4.nuxt-link.md

@@ -17,7 +17,7 @@ links:
 In this example, we use `<NuxtLink>` component to link to another page of the application.
 
 ::code-group
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <template>
   <NuxtLink to="/about">About page</NuxtLink>
 </template>
@@ -34,7 +34,7 @@ In this example, we use `<NuxtLink>` component to link to another page of the ap
 In this example, we pass the `id` param to link to the route `~/pages/posts/[id].vue`.
 
 ::code-group
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <template>
   <NuxtLink :to="{ name: 'posts-id', params: { id: 123 } }">
     Post 123
@@ -65,7 +65,7 @@ The `external` prop explicitly indicates that the link is external. `<NuxtLink>`
 
 For static files in the `/public` directory, such as PDFs or images, use the `external` prop to ensure the link resolves correctly.
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <template>
   <NuxtLink to="/example-report.pdf" external>
     Download Report
@@ -77,7 +77,7 @@ For static files in the `/public` directory, such as PDFs or images, use the `ex
 
 When pointing to a different application on the same domain, using the `external` prop ensures the correct behavior.
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <template>
   <NuxtLink to="/another-app" external>
     Go to Another App
@@ -91,7 +91,7 @@ Using the `external` prop or relying on automatic handling ensures proper naviga
 
 In this example, we use `<NuxtLink>` component to link to a website.
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <NuxtLink to="https://nuxtjs.org">
     Nuxt website
@@ -110,7 +110,7 @@ These defaults have no negative impact on SEO and are considered [best practice]
 
 When you need to overwrite this behavior you can use the `rel` or `noRel` props.
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <NuxtLink to="https://twitter.com/nuxt_js">
     Nuxt Twitter
@@ -129,7 +129,7 @@ When you need to overwrite this behavior you can use the `rel` or `noRel` props.
 
 A `noRel` prop can be used to prevent the default `rel` attribute from being added to the absolute links.
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <NuxtLink to="https://github.com/nuxt" no-rel>
     Nuxt GitHub
@@ -146,7 +146,7 @@ A `noRel` prop can be used to prevent the default `rel` attribute from being add
 
 Nuxt automatically includes smart prefetching. That means it detects when a link is visible (by default), either in the viewport or when scrolling and prefetches the JavaScript for those pages so that they are ready when the user clicks the link. Nuxt only loads the resources when the browser isn't busy and skips prefetching if your connection is offline or if you only have 2g connection.
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <NuxtLink to="/about" no-prefetch>About page not pre-fetched</NuxtLink>
 <NuxtLink to="/about" :prefetch="false">About page not pre-fetched</NuxtLink>
 ```
@@ -286,7 +286,7 @@ export default defineNuxtConfig({
 
 You can overwrite `<NuxtLink>` defaults by creating your own link component using `defineNuxtLink`.
 
-```js [components/MyNuxtLink.ts]
+```js [app/components/MyNuxtLink.ts]
 export default defineNuxtLink({
   componentName: 'MyNuxtLink',
   /* see signature below for more */

package/3.api/1.components/5.nuxt-loading-indicator.md

@@ -10,9 +10,9 @@ links:
 
 ## Usage
 
-Add `<NuxtLoadingIndicator/>` in your [`app.vue`](/docs/guide/directory-structure/app) or [`layouts/`](/docs/guide/directory-structure/layouts).
+Add `<NuxtLoadingIndicator/>` in your [`app.vue`](/docs/guide/directory-structure/app) or [`app/layouts/`](/docs/guide/directory-structure/app/layouts).
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <NuxtLoadingIndicator />
   <NuxtLayout>

package/3.api/1.components/7.nuxt-welcome.md

@@ -10,7 +10,7 @@ links:
 
 It includes links to the Nuxt documentation, source code, and social media accounts.
 
-```vue [app.vue]
+```vue [app/app.vue]
 <template>
   <NuxtWelcome />
 </template>

package/3.api/2.composables/on-prehydrate.md

@@ -42,7 +42,7 @@ export function onPrehydrate(callback: string | ((el: HTMLElement) => void), key
 
 ## Example
 
-```vue twoslash [app.vue]
+```vue twoslash [app/app.vue]
 <script setup lang="ts">
 declare const window: Window
 // ---cut---

package/3.api/2.composables/use-async-data.md

@@ -16,7 +16,7 @@ Within your pages, components, and plugins you can use useAsyncData to get acces
 
 ## Usage
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup lang="ts">
 const { data, status, error, refresh, clear } = await useAsyncData(
   'mountains',
@@ -37,7 +37,7 @@ If you're using a custom useAsyncData wrapper, do not await it in the composable
 
 The built-in `watch` option allows automatically rerunning the fetcher function when any changes are detected.
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup lang="ts">
 const page = ref(1)
 const { data: posts } = await useAsyncData(
@@ -57,7 +57,7 @@ const { data: posts } = await useAsyncData(
 
 You can use a computed ref, plain ref or a getter function as the key, allowing for dynamic data fetching that automatically updates when the key changes:
 
-```vue [pages/[id\\].vue]
+```vue [app/pages/[id\\].vue]
 <script setup lang="ts">
 const route = useRoute()
 const userId = computed(() => `user-${route.params.id}`)

package/3.api/2.composables/use-cookie.md

@@ -80,7 +80,7 @@ Returns a Vue `Ref<T>` representing the cookie value. Updating the ref will upda
 
 The example below creates a cookie called `counter`. If the cookie doesn't exist, it is initially set to a random value. Whenever we update the `counter` variable, the cookie will be updated accordingly.
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 const counter = useCookie('counter')
 

package/3.api/2.composables/use-fetch.md

@@ -17,7 +17,7 @@ It automatically generates a key based on URL and fetch options, provides type h
 
 ## Usage
 
-```vue [pages/modules.vue]
+```vue [app/pages/modules.vue]
 <script setup lang="ts">
 const { data, status, error, refresh, clear } = await useFetch('/api/modules', {
   pick: ['title']
@@ -70,7 +70,7 @@ const { data, status, error, refresh, clear } = await useFetch('/api/auth/login'
 
 You can use a computed ref or a plain ref as the URL, allowing for dynamic data fetching that automatically updates when the URL changes:
 
-```vue [pages/[id\\].vue]
+```vue [app/pages/[id\\].vue]
 <script setup lang="ts">
 const route = useRoute()
 const id = computed(() => route.params.id)

package/3.api/2.composables/use-lazy-async-data.md

@@ -20,7 +20,7 @@ By default, [`useAsyncData`](/docs/api/composables/use-async-data) blocks naviga
 
 ## Example
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup lang="ts">
 /* Navigation will occur before fetching is complete.
   Handle 'pending' and 'error' states directly within your component's template

package/3.api/2.composables/use-lazy-fetch.md

@@ -24,7 +24,7 @@ Awaiting `useLazyFetch` in this mode only ensures the call is initialized. On cl
 
 ## Example
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup lang="ts">
 /* Navigation will occur before fetching is complete.
  * Handle 'pending' and 'error' states directly within your component's template

package/3.api/2.composables/use-nuxt-app.md

@@ -10,7 +10,7 @@ links:
 
 `useNuxtApp` is a built-in composable that provides a way to access shared runtime context of Nuxt, also known as the [Nuxt context](/docs/guide/going-further/nuxt-app#the-nuxt-context), which is available on both client and server side (but not within Nitro routes). It helps you access the Vue app instance, runtime hooks, runtime config variables and internal states, such as `ssrContext` and `payload`.
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 const nuxtApp = useNuxtApp()
 </script>
@@ -52,7 +52,7 @@ Hooks available in `nuxtApp` allows you to customize the runtime aspects of your
 
 See [Runtime Hooks](/docs/api/advanced/hooks#app-hooks-runtime) for available runtime hooks called by Nuxt.
 
-```ts [plugins/test.ts]
+```ts [app/plugins/test.ts]
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.hook('page:start', () => {
     /* your code goes here */
@@ -106,7 +106,7 @@ Nuxt exposes the following properties through `ssrContext`:
 - `data` (object) - When you fetch the data from an API endpoint using either [`useFetch`](/docs/api/composables/use-fetch) or [`useAsyncData`](/docs/api/composables/use-async-data) , resulting payload can be accessed from the `payload.data`. This data is cached and helps you prevent fetching the same data in case an identical request is made more than once.
 
   ::code-group
-  ```vue [app.vue]
+  ```vue [app/app.vue]
   <script setup lang="ts">
   const { data } = await useAsyncData('count', () => $fetch('/api/count'))
   </script>
@@ -124,7 +124,7 @@ Nuxt exposes the following properties through `ssrContext`:
 
 - `state` (object) - When you use [`useState`](/docs/api/composables/use-state) composable in Nuxt to set shared state, this state data is accessed through `payload.state.[name-of-your-state]`.
 
-  ```ts [plugins/my-plugin.ts]
+  ```ts [app/plugins/my-plugin.ts]
   export const useColor = () => useState<string>('color', () => 'pink')
 
   export default defineNuxtPlugin((nuxtApp) => {
@@ -142,7 +142,7 @@ Nuxt exposes the following properties through `ssrContext`:
 
   In the example below, we define a reducer (or a serializer) and a reviver (or deserializer) for the [Luxon](https://moment.github.io/luxon/#/) DateTime class, using a payload plugin.
 
-  ```ts [plugins/date-time-payload.ts]
+  ```ts [app/plugins/date-time-payload.ts]
   /**
    * This kind of plugin runs very early in the Nuxt lifecycle, before we revive the payload.
    * You will not have access to the router or other Nuxt-injected properties.
@@ -164,7 +164,7 @@ Nuxt exposes the following properties through `ssrContext`:
 
 Use `nuxtApp.isHydrating` (boolean) to check if the Nuxt app is hydrating on the client side.
 
-```ts [components/nuxt-error-boundary.ts]
+```ts [app/components/nuxt-error-boundary.ts]
 export default defineComponent({
   setup (_props, { slots, emit }) {
     const nuxtApp = useNuxtApp()
@@ -185,7 +185,7 @@ You are likely here because you got a "Nuxt instance unavailable" message. Pleas
 
 The `runWithContext` method is meant to be used to call a function and give it an explicit Nuxt context. Typically, the Nuxt context is passed around implicitly and you do not need to worry about this. However, when working with complex `async`/`await` scenarios in middleware/plugins, you can run into instances where the current instance has been unset after an async call.
 
-```ts [middleware/auth.ts]
+```ts [app/middleware/auth.ts]
 export default defineNuxtRouteMiddleware(async (to, from) => {
   const nuxtApp = useNuxtApp()
   let user

package/3.api/2.composables/use-nuxt-data.md

@@ -34,14 +34,14 @@ To use `useNuxtData`, ensure that the data-fetching composable (`useFetch`, `use
 
 The example below shows how you can use cached data as a placeholder while the most recent data is being fetched from the server.
 
-```vue [pages/posts.vue]
+```vue [app/pages/posts.vue]
 <script setup lang="ts">
 // We can access same data later using 'posts' key
 const { data } = await useFetch('/api/posts', { key: 'posts' })
 </script>
 ```
 
-```vue [pages/posts/[id\\].vue]
+```vue [app/pages/posts/[id\\].vue]
 <script setup lang="ts">
 // Access to the cached value of useFetch in posts.vue (parent route)
 const { data: posts } = useNuxtData('posts')
@@ -64,14 +64,14 @@ The example below shows how implementing Optimistic Updates can be achieved usin
 
 Optimistic Updates is a technique where the user interface is updated immediately, assuming a server operation will succeed. If the operation eventually fails, the UI is rolled back to its previous state.
 
-```vue [pages/todos.vue]
+```vue [app/pages/todos.vue]
 <script setup lang="ts">
 // We can access same data later using 'todos' key
 const { data } = await useAsyncData('todos', () => $fetch('/api/todos'))
 </script>
 ```
 
-```vue [components/NewTodo.vue]
+```vue [app/components/NewTodo.vue]
 <script setup lang="ts">
 const newTodo = ref('')
 let previousTodos = []

package/3.api/2.composables/use-preview-mode.md

@@ -75,7 +75,7 @@ const { enabled, state } = usePreviewMode({
 
 The example below creates a page where part of a content is rendered only in preview mode.
 
-```vue [pages/some-page.vue]
+```vue [app/pages/some-page.vue]
 <script setup>
 const { enabled, state } = usePreviewMode()
 

package/3.api/2.composables/use-request-fetch.md

@@ -24,7 +24,7 @@ The [`useFetch`](/docs/api/composables/use-fetch) composable uses `useRequestFet
 
 ::code-group
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup lang="ts">
 // This will forward the user's headers to the `/api/cookies` event handler
 // Result: { cookies: { foo: 'bar' } }

package/3.api/2.composables/use-request-header.md

@@ -25,7 +25,7 @@ We can use `useRequestHeader` to easily figure out if a user is authorized or no
 
 The example below reads the `authorization` request header to find out if a person can access a restricted resource.
 
-```ts [middleware/authorized-only.ts]
+```ts [app/middleware/authorized-only.ts]
 export default defineNuxtRouteMiddleware((to, from) => {
   if (!useRequestHeader('authorization')) {
     return navigateTo('/not-authorized')

package/3.api/2.composables/use-request-headers.md

@@ -28,7 +28,7 @@ We can use `useRequestHeaders` to access and proxy the initial request's `author
 
 The example below adds the `authorization` request header to an isomorphic `$fetch` call.
 
-```vue [pages/some-page.vue]
+```vue [app/pages/some-page.vue]
 <script setup lang="ts">
 const { data } = await useFetch('/api/confidential', {
   headers: useRequestHeaders(['authorization'])

package/3.api/2.composables/use-request-url.md

@@ -18,7 +18,7 @@ You can define the [`cache.varies` option](https://nitro.build/guide/cache#optio
 
 ::code-group
 
-```vue [pages/about.vue]
+```vue [app/pages/about.vue]
 <script setup lang="ts">
 const url = useRequestURL()
 </script>

package/3.api/2.composables/use-response-header.md

@@ -24,7 +24,7 @@ header.value = 'my-value';
 
 We can use `useResponseHeader` to easily set a response header on a per-page basis.
 
-```vue [pages/test.vue]
+```vue [app/pages/test.vue]
 <script setup>
 // pages/test.vue
 const header = useResponseHeader('X-My-Header');
@@ -37,9 +37,9 @@ header.value = 'my-value';
 </template>
 ```
 
-We can use `useResponseHeader` for example in Nuxt [middleware](/docs/guide/directory-structure/middleware) to set a response header for all pages.
+We can use `useResponseHeader` for example in Nuxt [middleware](/docs/guide/directory-structure/app/middleware) to set a response header for all pages.
 
-```ts [middleware/my-header-middleware.ts]
+```ts [app/middleware/my-header-middleware.ts]
 export default defineNuxtRouteMiddleware((to, from) => {
   const header = useResponseHeader('X-My-Always-Header');
   header.value = `I'm Always here!`;

package/3.api/2.composables/use-route-announcer.md

@@ -51,7 +51,7 @@ Sets the message with `politeness = "assertive"`
 
 ## Example
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup lang="ts">
   const { message, politeness, set, polite, assertive } = useRouteAnnouncer({
     politeness: 'assertive'

package/3.api/2.composables/use-router.md

@@ -8,7 +8,7 @@ links:
     size: xs
 ---
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup lang="ts">
 const router = useRouter()
 </script>
@@ -16,13 +16,13 @@ const router = useRouter()
 
 If you only need the router instance within your template, use `$router`:
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <template>
   <button @click="$router.back()">Back</button>
 </template>
 ```
 
-If you have a `pages/` directory, `useRouter` is identical in behavior to the one provided by `vue-router`.
+If you have a `app/pages/` directory, `useRouter` is identical in behavior to the one provided by `vue-router`.
 
 ::read-more{icon="i-simple-icons-vuedotjs" to="https://router.vuejs.org/api/interfaces/Router.html#Properties-currentRoute" target="_blank"}
 Read `vue-router` documentation about the `Router` interface.
@@ -78,7 +78,7 @@ Read more about the browser's History API.
 
 However, Nuxt has a concept of **route middleware** that simplifies the implementation of navigation guards and provides a better developer experience.
 
-:read-more{to="/docs/guide/directory-structure/middleware"}
+:read-more{to="/docs/guide/directory-structure/app/middleware"}
 
 ## Promise and Error Handling
 
@@ -89,4 +89,4 @@ However, Nuxt has a concept of **route middleware** that simplifies the implemen
 
 ## Universal Router Instance
 
-If you do not have a `pages/` folder, then [`useRouter`](/docs/api/composables/use-router)  will return a universal router instance with similar helper methods, but be aware that not all features may be supported or behave in exactly the same way as with `vue-router`.
+If you do not have a `app/pages/` folder, then [`useRouter`](/docs/api/composables/use-router)  will return a universal router instance with similar helper methods, but be aware that not all features may be supported or behave in exactly the same way as with `vue-router`.

package/3.api/2.composables/use-runtime-config.md

@@ -10,7 +10,7 @@ links:
 
 ## Usage
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 const config = useRuntimeConfig()
 </script>

package/3.api/2.composables/use-seo-meta.md

@@ -18,7 +18,7 @@ This is the recommended way to add meta tags to your site as it is XSS safe and
 
 ## Usage
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 useSeoMeta({
   title: 'My Amazing Site',
@@ -33,7 +33,7 @@ useSeoMeta({
 
 When inserting tags that are reactive, you should use the computed getter syntax (`() => value`):
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 const title = ref('My title')
 
@@ -56,7 +56,7 @@ In most instances, SEO meta tags don't need to be reactive as search engine robo
 
 For better performance, you can wrap your `useSeoMeta` calls in a server-only condition when the meta tags don't need to be reactive:
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 if (import.meta.server) {
   // These meta tags will only be added during server-side rendering

package/3.api/2.composables/use-server-seo-meta.md

@@ -14,7 +14,7 @@ Just like [`useSeoMeta`](/docs/api/composables/use-seo-meta), `useServerSeoMeta`
 
 In most instances, the meta doesn't need to be reactive as robots will only scan the initial load. So we recommend using [`useServerSeoMeta`](/docs/api/composables/use-server-seo-meta) as a performance-focused utility that will not do anything (or return a `head` object) on the client.
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 useServerSeoMeta({
   robots: 'index, follow'