@nuxt/docs 4.0.3 → 4.1.1

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-route.md

@@ -12,6 +12,12 @@ links:
 Within the template of a Vue component, you can access the route using `$route`.
 ::
 
+The `useRoute` composable is a wrapper around the identically named composable from `vue-router`, providing access to the current route in a Nuxt application.
+
+The key difference is that in Nuxt, the composable ensures that the route is updated **only after** the page content has changed after navigation.
+In contrast, the `vue-router` version updates the route **immediately**, which can lead to synchronization issues between different parts of the template
+that rely on the route metadata, for example.
+
 ## Example
 
 In the following example, we call an API via [`useFetch`](/docs/api/composables/use-fetch) using a dynamic page parameter - `slug` - as part of the URL.
@@ -45,8 +51,37 @@ Apart from dynamic parameters and query parameters, `useRoute()` also provides t
 - `path`: encoded pathname section of the URL
 - `redirectedFrom`: route location that was attempted to access before ending up on the current route location
 
-::note
-Browsers don't send [URL fragments](https://url.spec.whatwg.org/#concept-url-fragment) (for example `#foo`) when making requests. So using `route.fullPath` in your template can trigger hydration issues because this will include the fragment on client but not the server.
+## Common Pitfalls
+
+### Route Synchronization Issues
+
+It’s important to use the `useRoute()` composable from Nuxt rather than the one from `vue-router` to avoid synchronization issues during page navigation.
+Importing `useRoute` directly from `vue-router` bypasses Nuxt's implementation.
+
+```ts twoslash
+// ❌ do not use `useRoute` from `vue-router`
+// @errors: 2300
+import { useRoute } from 'vue-router'
+// ✅ use Nuxt's `useRoute` composable
+import { useRoute } from '#app'
+```
+
+### Calling `useRoute` in Middleware
+
+Using `useRoute` in middleware is not recommended because it can lead to unexpected behavior.
+There is no concept of a "current route" in middleware.
+The `useRoute()` composable should only be used in the setup function of a Vue component or in a Nuxt plugin.
+
+::warning
+This applies to any composable that uses `useRoute()` internally too.
 ::
 
+::read-more{to="/docs/4.x/guide/directory-structure/app/middleware"}
+Read more about accessing the route in the middleware section.
+::
+
+### Hydration Issues with `route.fullPath`
+
+Browsers don't send [URL fragments](https://url.spec.whatwg.org/#concept-url-fragment) (for example `#foo`) when making requests. So using `route.fullPath` to affect the template can trigger hydration issues because this will include the fragment on client but not the server.
+
 :read-more{icon="i-simple-icons-vuedotjs" to="https://router.vuejs.org/api/type-aliases/RouteLocationNormalizedLoaded.html"}

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'

package/3.api/3.utils/$fetch.md

@@ -22,7 +22,7 @@ Using `$fetch` in components without wrapping it with [`useAsyncData`](/docs/api
 
 We recommend using [`useFetch`](/docs/api/composables/use-fetch) or [`useAsyncData`](/docs/api/composables/use-async-data) + `$fetch` to prevent double data fetching when fetching the component data.
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 // During SSR data is fetched twice, once on the server and once on the client.
 const dataTwice = await $fetch('/api/item')
@@ -39,7 +39,7 @@ const { data } = await useFetch('/api/item')
 
 You can use `$fetch` in any methods that are executed only on client-side.
 
-```vue [pages/contact.vue]
+```vue [app/pages/contact.vue]
 <script setup lang="ts">
 async function contactForm() {
   await $fetch('/api/contact', {
@@ -70,7 +70,7 @@ However, during Server-Side Rendering, due to security risks such as **Server-Si
 
 ::code-group
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup lang="ts">
 // This will NOT forward headers or cookies during SSR
 const { data } = await useAsyncData(() => $fetch('/api/cookies'))
@@ -87,7 +87,7 @@ export default defineEventHandler((event) => {
 
 If you need to forward headers and cookies on the server, you must manually pass them:
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup lang="ts">
 // This will forward the user's headers and cookies to `/api/cookies`
 const requestFetch = useRequestFetch()

package/3.api/3.utils/abort-navigation.md

@@ -9,7 +9,7 @@ links:
 ---
 
 ::warning
-`abortNavigation` is only usable inside a [route middleware handler](/docs/guide/directory-structure/middleware).
+`abortNavigation` is only usable inside a [route middleware handler](/docs/guide/directory-structure/app/middleware).
 ::
 
 ## Type
@@ -30,7 +30,7 @@ abortNavigation(err?: Error | string): false
 
 The example below shows how you can use `abortNavigation` in a route middleware to prevent unauthorized route access:
 
-```ts [middleware/auth.ts]
+```ts [app/middleware/auth.ts]
 export default defineNuxtRouteMiddleware((to, from) => {
   const user = useState('user')
 
@@ -48,7 +48,7 @@ export default defineNuxtRouteMiddleware((to, from) => {
 
 You can pass the error as a string:
 
-```ts [middleware/auth.ts]
+```ts [app/middleware/auth.ts]
 export default defineNuxtRouteMiddleware((to, from) => {
   const user = useState('user')
 
@@ -62,7 +62,7 @@ export default defineNuxtRouteMiddleware((to, from) => {
 
 You can pass the error as an [`Error`](https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Global_Objects/Error) object, e.g. caught by the `catch`-block:
 
-```ts [middleware/auth.ts]
+```ts [app/middleware/auth.ts]
 export default defineNuxtRouteMiddleware((to, from) => {
   try {
     /* code that might throw an error */

package/3.api/3.utils/add-route-middleware.md

@@ -9,7 +9,7 @@ links:
 ---
 
 ::note
-Route middleware are navigation guards stored in the [`middleware/`](/docs/guide/directory-structure/middleware) directory of your Nuxt application (unless [set otherwise](/docs/api/nuxt-config#middleware)).
+Route middleware are navigation guards stored in the [`app/middleware/`](/docs/guide/directory-structure/app/middleware) directory of your Nuxt application (unless [set otherwise](/docs/api/nuxt-config#middleware)).
 ::
 
 ## Type
@@ -51,7 +51,7 @@ An optional `options` argument lets you set the value of `global` to `true` to i
 
 Named route middleware is defined by providing a string as the first argument and a function as the second:
 
-```ts [plugins/my-plugin.ts]
+```ts [app/plugins/my-plugin.ts]
 export default defineNuxtPlugin(() => {
   addRouteMiddleware('named-middleware', () => {
     console.log('named middleware added in Nuxt plugin')
@@ -59,7 +59,7 @@ export default defineNuxtPlugin(() => {
 })
 ```
 
-When defined in a plugin, it overrides any existing middleware of the same name located in the `middleware/` directory.
+When defined in a plugin, it overrides any existing middleware of the same name located in the `app/middleware/` directory.
 
 ### Global Route Middleware
 
@@ -67,7 +67,7 @@ Global route middleware can be defined in two ways:
 
 - Pass a function directly as the first argument without a name. It will automatically be treated as global middleware and applied on every route change.
 
-  ```ts [plugins/my-plugin.ts]
+  ```ts [app/plugins/my-plugin.ts]
   export default defineNuxtPlugin(() => {
     addRouteMiddleware((to, from) => {
       console.log('anonymous global middleware that runs on every route change')
@@ -77,7 +77,7 @@ Global route middleware can be defined in two ways:
 
 - Set an optional, third argument `{ global: true }` to indicate whether the route middleware is global.
 
-  ```ts [plugins/my-plugin.ts]
+  ```ts [app/plugins/my-plugin.ts]
   export default defineNuxtPlugin(() => {
     addRouteMiddleware('global-middleware', (to, from) => {
         console.log('global middleware that runs on every route change')

package/3.api/3.utils/call-once.md

@@ -26,7 +26,7 @@ This is useful for code that should be executed only once, such as logging an ev
 
 The default mode of `callOnce` is to run code only once. For example, if the code runs on the server it won't run again on the client. It also won't run again if you `callOnce` more than once on the client, for example by navigating back to this page.
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 const websiteConfig = useState('config')
 
@@ -39,7 +39,7 @@ await callOnce(async () => {
 
 It is also possible to run on every navigation while still avoiding the initial server/client double load. For this, it is possible to use the `navigation` mode:
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 const websiteConfig = useState('config')
 

package/3.api/3.utils/create-error.md

@@ -25,7 +25,7 @@ If you throw an error created with `createError`:
 
 ### Example
 
-```vue [pages/movies/[slug\\].vue]
+```vue [app/pages/movies/[slug\\].vue]
 <script setup lang="ts">
 const route = useRoute()
 const { data } = await useFetch(`/api/movies/${route.params.slug}`)

package/3.api/3.utils/define-nuxt-component.md

@@ -22,7 +22,7 @@ Using `<script setup lang="ts">` is the recommended way of declaring Vue compone
 
 If you choose not to use `setup()` in your app, you can use the `asyncData()` method within your component definition:
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script lang="ts">
 export default defineNuxtComponent({
   async asyncData() {
@@ -40,7 +40,7 @@ export default defineNuxtComponent({
 
 If you choose not to use `setup()` in your app, you can use the `head()` method within your component definition:
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script lang="ts">
 export default defineNuxtComponent({
   head(nuxtApp) {

package/3.api/3.utils/define-nuxt-route-middleware.md

@@ -8,7 +8,7 @@ links:
     size: xs
 ---
 
-Route middleware are stored in the [`middleware/`](/docs/guide/directory-structure/middleware) of your Nuxt application (unless [set otherwise](/docs/api/nuxt-config#middleware)).
+Route middleware are stored in the [`app/middleware/`](/docs/guide/directory-structure/app/middleware) of your Nuxt application (unless [set otherwise](/docs/api/nuxt-config#middleware)).
 
 ## Type
 
@@ -36,7 +36,7 @@ Learn more about available properties of `RouteLocationNormalized` in the **[Vue
 
 You can use route middleware to throw errors and show helpful error messages:
 
-```ts [middleware/error.ts]
+```ts [app/middleware/error.ts]
 export default defineNuxtRouteMiddleware((to) => {
   if (to.params.id === '1') {
     throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
@@ -50,7 +50,7 @@ The above route middleware will redirect a user to the custom error page defined
 
 Use [`useState`](/docs/api/composables/use-state) in combination with `navigateTo` helper function inside the route middleware to redirect users to different routes based on their authentication status:
 
-```ts [middleware/auth.ts]
+```ts [app/middleware/auth.ts]
 export default defineNuxtRouteMiddleware((to, from) => {
   const auth = useState('auth')
 

package/3.api/3.utils/define-page-meta.md

@@ -8,9 +8,9 @@ links:
     size: xs
 ---
 
-`definePageMeta` is a compiler macro that you can use to set metadata for your **page** components located in the [`pages/`](/docs/guide/directory-structure/pages) directory (unless [set otherwise](/docs/api/nuxt-config#pages)). This way you can set custom metadata for each static or dynamic route of your Nuxt application.
+`definePageMeta` is a compiler macro that you can use to set metadata for your **page** components located in the [`app/pages/`](/docs/guide/directory-structure/app/pages) directory (unless [set otherwise](/docs/api/nuxt-config#pages)). This way you can set custom metadata for each static or dynamic route of your Nuxt application.
 
-```vue [pages/some-page.vue]
+```vue [app/pages/some-page.vue]
 <script setup lang="ts">
 definePageMeta({
   layout: 'default'
@@ -18,7 +18,7 @@ definePageMeta({
 </script>
 ```
 
-:read-more{to="/docs/guide/directory-structure/pages#page-metadata"}
+:read-more{to="/docs/guide/directory-structure/app/pages#page-metadata"}
 
 ## Type
 
@@ -56,7 +56,7 @@ interface PageMeta {
 
   - **Type**: `string`
 
-    You may define a name for this page's route. By default, name is generated based on path inside the [`pages/` directory](/docs/guide/directory-structure/pages).
+    You may define a name for this page's route. By default, name is generated based on path inside the [`app/pages/` directory](/docs/guide/directory-structure/app/pages).
 
   **`path`**
 
@@ -104,7 +104,7 @@ interface PageMeta {
 
   - **Type**: `MiddlewareKey` | [`NavigationGuard`](https://router.vuejs.org/api/interfaces/NavigationGuard.html#navigationguard) | `Array<MiddlewareKey | NavigationGuard>`
 
-    Define anonymous or named middleware directly within `definePageMeta`. Learn more about [route middleware](/docs/guide/directory-structure/middleware).
+    Define anonymous or named middleware directly within `definePageMeta`. Learn more about [route middleware](/docs/guide/directory-structure/app/middleware).
 
   **`pageTransition`**
 
@@ -142,7 +142,7 @@ interface PageMeta {
 
   - **Type**: `any`
 
-    Apart from the above properties, you can also set **custom** metadata. You may wish to do so in a type-safe way by [augmenting the type of the `meta` object](/docs/guide/directory-structure/pages/#typing-custom-metadata).
+    Apart from the above properties, you can also set **custom** metadata. You may wish to do so in a type-safe way by [augmenting the type of the `meta` object](/docs/guide/directory-structure/app/pages/#typing-custom-metadata).
 
 ## Examples
 
@@ -154,7 +154,7 @@ The example below demonstrates:
 - how `keepalive` property makes sure that the `<modal>` component is not cached when switching between multiple components;
 - adding `pageType` as a custom property:
 
-```vue [pages/some-page.vue]
+```vue [app/pages/some-page.vue]
 <script setup lang="ts">
 definePageMeta({
   key: (route) => route.fullPath,
@@ -170,9 +170,9 @@ definePageMeta({
 
 ### Defining Middleware
 
-The example below shows how the middleware can be defined using a `function` directly within the `definePageMeta` or set as a `string` that matches the middleware file name located in the `middleware/` directory:
+The example below shows how the middleware can be defined using a `function` directly within the `definePageMeta` or set as a `string` that matches the middleware file name located in the `app/middleware/` directory:
 
-```vue [pages/some-page.vue]
+```vue [app/pages/some-page.vue]
 <script setup lang="ts">
 definePageMeta({
   // define middleware as a function
@@ -207,7 +207,7 @@ The two routes "/test-category" and "/1234-post" match both `[postId]-[postSlug]
 
 To make sure that we are only matching digits (`\d+`) for `postId` in the `[postId]-[postSlug]` route, we can add the following to the `[postId]-[postSlug].vue` page template:
 
-```vue [pages/[postId\\]-[postSlug\\].vue]
+```vue [app/pages/[postId\\]-[postSlug\\].vue]
 <script setup lang="ts">
 definePageMeta({
   path: '/:postId(\\d+)-:postSlug' 
@@ -219,9 +219,9 @@ For more examples see [Vue Router's Matching Syntax](https://router.vuejs.org/gu
 
 ### Defining Layout
 
-You can define the layout that matches the layout's file name located (by default) in the [`layouts/` directory](/docs/guide/directory-structure/layouts). You can also disable the layout by setting the `layout` to `false`:
+You can define the layout that matches the layout's file name located (by default) in the [`app/layouts/` directory](/docs/guide/directory-structure/app/layouts). You can also disable the layout by setting the `layout` to `false`:
 
-```vue [pages/some-page.vue]
+```vue [app/pages/some-page.vue]
 <script setup lang="ts">
 definePageMeta({
   // set custom layout