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

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

package/3.api/3.utils/define-route-rules.md

@@ -14,7 +14,7 @@ This feature is experimental and in order to use it you must enable the `experim
 
 ## Usage
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup lang="ts">
 defineRouteRules({
   prerender: true

package/3.api/3.utils/navigate-to.md

@@ -68,7 +68,7 @@ export default defineNuxtRouteMiddleware((to, from) => {
 
 In this case, `navigateTo` will be executed but not returned, which may lead to unexpected behavior.
 
-:read-more{to="/docs/guide/directory-structure/middleware"}
+:read-more{to="/docs/guide/directory-structure/app/middleware"}
 
 ### Navigating to an External URL
 

package/3.api/3.utils/on-nuxt-ready.md

@@ -13,7 +13,7 @@ links:
 It is ideal for running code that should not block the initial rendering of your app.
 ::
 
-```ts [plugins/ready.client.ts]
+```ts [app/plugins/ready.client.ts]
 export default defineNuxtPlugin(() => {
   onNuxtReady(async () => {
     const myAnalyticsLibrary = await import('my-big-analytics-library')

package/3.api/3.utils/refresh-cookie.md

@@ -22,7 +22,7 @@ This is useful for updating the `useCookie` ref when we know the new cookie valu
 
 ## Usage
 
-```vue [app.vue]
+```vue [app/app.vue]
 <script setup lang="ts">
 const tokenCookie = useCookie('token')
 

package/3.api/3.utils/refresh-nuxt-data.md

@@ -34,7 +34,7 @@ refreshNuxtData(keys?: string | string[])
 
 This example below refreshes all data being fetched using `useAsyncData` and `useFetch` in Nuxt application.
 
-```vue [pages/some-page.vue]
+```vue [app/pages/some-page.vue]
 <script setup lang="ts">
 const refreshing = ref(false)
 
@@ -61,7 +61,7 @@ async function refreshAll () {
 
 This example below refreshes only data where the key matches to `count` and `user`.
 
-```vue [pages/some-page.vue]
+```vue [app/pages/some-page.vue]
 <script setup lang="ts">
 const refreshing = ref(false)
 

package/3.api/3.utils/set-page-layout.md

@@ -12,7 +12,7 @@ links:
 `setPageLayout` allows you to dynamically change the layout of a page. It relies on access to the Nuxt context and therefore can only be called within the [Nuxt context](/docs/guide/going-further/nuxt-app#the-nuxt-context).
 ::
 
-```ts [middleware/custom-layout.ts]
+```ts [app/middleware/custom-layout.ts]
 export default defineNuxtRouteMiddleware((to) => {
   // Set the layout on the route you are navigating _to_
   setPageLayout('other')

package/3.api/4.commands/add.md

@@ -47,21 +47,21 @@ npx nuxt add plugin sockets --client
 * Modifier flags: `--mode client|server` or `--client` or `--server`
 
 ```bash [Terminal]
-# Generates `components/TheHeader.vue`
+# Generates `app/components/TheHeader.vue`
 npx nuxt add component TheHeader
 ```
 
 ## `nuxt add composable`
 
 ```bash [Terminal]
-# Generates `composables/foo.ts`
+# Generates `app/composables/foo.ts`
 npx nuxt add composable foo
 ```
 
 ## `nuxt add layout`
 
 ```bash [Terminal]
-# Generates `layouts/custom.vue`
+# Generates `app/layouts/custom.vue`
 npx nuxt add layout custom
 ```
 
@@ -70,19 +70,19 @@ npx nuxt add layout custom
 * Modifier flags: `--mode client|server` or `--client`or `--server`
 
 ```bash [Terminal]
-# Generates `plugins/analytics.ts`
+# Generates `app/plugins/analytics.ts`
 npx nuxt add plugin analytics
 ```
 
 ## `nuxt add page`
 
 ```bash [Terminal]
-# Generates `pages/about.vue`
+# Generates `app/pages/about.vue`
 npx nuxt add page about
 ```
 
 ```bash [Terminal]
-# Generates `pages/category/[id].vue`
+# Generates `app/pages/category/[id].vue`
 npx nuxt add page "category/[id]"
 ```
 
@@ -91,7 +91,7 @@ npx nuxt add page "category/[id]"
 * Modifier flags: `--global`
 
 ```bash [Terminal]
-# Generates `middleware/auth.ts`
+# Generates `app/middleware/auth.ts`
 npx nuxt add middleware auth
 ```
 

package/3.api/5.kit/7.pages.md

@@ -10,7 +10,7 @@ links:
 
 ## `extendPages`
 
-In Nuxt, routes are automatically generated based on the structure of the files in the `pages` directory. However, there may be scenarios where you'd want to customize these routes. For instance, you might need to add a route for a dynamic page not generated by Nuxt, remove an existing route, or modify the configuration of a route. For such customizations, Nuxt offers the `extendPages` feature, which allows you to extend and alter the pages configuration.
+In Nuxt, routes are automatically generated based on the structure of the files in the `app/pages` directory. However, there may be scenarios where you'd want to customize these routes. For instance, you might need to add a route for a dynamic page not generated by Nuxt, remove an existing route, or modify the configuration of a route. For such customizations, Nuxt offers the `extendPages` feature, which allows you to extend and alter the pages configuration.
 
 ::tip{icon="i-lucide-video" to="https://vueschool.io/lessons/extend-and-alter-nuxt-pages?friend=nuxt" target="_blank"}
 Watch Vue School video about extendPages.

package/3.api/5.kit/8.layout.md

@@ -82,7 +82,7 @@ export default defineNuxtModule({
 
 You can then use this layout in your pages:
 
-```vue [pages/about.vue]
+```vue [app/pages/about.vue]
 <script setup lang="ts">
 definePageMeta({
   layout: 'custom',

package/3.api/5.kit/9.plugins.md

@@ -8,7 +8,7 @@ links:
     size: xs
 ---
 
-Plugins are self-contained code that usually add app-level functionality to Vue. In Nuxt, plugins are automatically imported from the `plugins/` directory. However, if you need to ship a plugin with your module, Nuxt Kit provides the `addPlugin` and `addPluginTemplate` methods. These utils allow you to customize the plugin configuration to better suit your needs.
+Plugins are self-contained code that usually add app-level functionality to Vue. In Nuxt, plugins are automatically imported from the `app/plugins/` directory. However, if you need to ship a plugin with your module, Nuxt Kit provides the `addPlugin` and `addPluginTemplate` methods. These utils allow you to customize the plugin configuration to better suit your needs.
 
 ## `addPlugin`
 

package/3.api/6.nuxt-config.md

@@ -442,7 +442,7 @@ Any components in the directories configured here can be used throughout your pa
 }
 ```
 
-**See**: [`components/` directory documentation](https://nuxt.com/docs/guide/directory-structure/components)
+**See**: [`app/components/` directory documentation](https://nuxt.com/docs/guide/directory-structure/app/components)
 
 ## css
 
@@ -576,21 +576,21 @@ It is better to stick with defaults unless needed.
 The assets directory (aliased as `~assets` in your build).
 
 - **Type**: `string`
-- **Default:** `"assets"`
+- **Default:** `"app/assets"`
 
 ### `layouts`
 
 The layouts directory, each file of which will be auto-registered as a Nuxt layout.
 
 - **Type**: `string`
-- **Default:** `"layouts"`
+- **Default:** `"app/layouts"`
 
 ### `middleware`
 
 The middleware directory, each file of which will be auto-registered as a Nuxt middleware.
 
 - **Type**: `string`
-- **Default:** `"middleware"`
+- **Default:** `"app/middleware"`
 
 ### `modules`
 
@@ -604,14 +604,14 @@ The modules directory, each file in which will be auto-registered as a Nuxt modu
 The directory which will be processed to auto-generate your application page routes.
 
 - **Type**: `string`
-- **Default:** `"pages"`
+- **Default:** `"app/pages"`
 
 ### `plugins`
 
 The plugins directory, each file of which will be auto-registered as a Nuxt plugin.
 
 - **Type**: `string`
-- **Default:** `"plugins"`
+- **Default:** `"app/plugins"`
 
 ### `public`
 
@@ -627,11 +627,6 @@ The shared directory. This directory is shared between the app and the server.
 - **Type**: `string`
 - **Default:** `"shared"`
 
-### `static`
-
-- **Type**: `string`
-- **Default:** `"public"`
-
 ## esbuild
 
 ### `options`
@@ -1376,7 +1371,7 @@ ignoreOptions: {
 
 ## ignorePrefix
 
-Any file in `pages/`, `layouts/`, `middleware/`, and `public/` directories will be ignored during the build process if its filename starts with the prefix specified by `ignorePrefix`. This is intended to prevent certain files from being processed or served in the built application. By default, the `ignorePrefix` is set to '-', ignoring any files starting with '-'.
+Any file in `app/pages/`, `app/layouts/`, `app/middleware/`, and `public/` directories will be ignored during the build process if its filename starts with the prefix specified by `ignorePrefix`. This is intended to prevent certain files from being processed or served in the built application. By default, the `ignorePrefix` is set to '-', ignoring any files starting with '-'.
 
 - **Type**: `string`
 - **Default:** `"-"`
@@ -1385,7 +1380,7 @@ Any file in `pages/`, `layouts/`, `middleware/`, and `public/` directories will
 
 Configure how Nuxt auto-imports composables into your application.
 
-**See**: [Nuxt documentation](https://nuxt.com/docs/guide/directory-structure/composables)
+**See**: [Nuxt documentation](https://nuxt.com/docs/guide/directory-structure/app/composables)
 
 ### `dirs`
 
@@ -1408,7 +1403,7 @@ imports: {
 
 ### `scan`
 
-Whether to scan your `composables/` and `utils/` directories for composables to auto-import. Auto-imports registered by Nuxt or other modules, such as imports from `vue` or `nuxt`, will still be enabled.
+Whether to scan your `app/composables/` and `app/utils/` directories for composables to auto-import. Auto-imports registered by Nuxt or other modules, such as imports from `vue` or `nuxt`, will still be enabled.
 
 - **Type**: `boolean`
 - **Default:** `true`
@@ -1655,7 +1650,7 @@ treeShake: { client: { myPackage: ['useServerOnlyComposable'] } }
 
 ## pages
 
-Whether to use the vue-router integration in Nuxt 3. If you do not provide a value it will be enabled if you have a `pages/` directory in your source folder.
+Whether to use the vue-router integration in Nuxt 3. If you do not provide a value it will be enabled if you have a `app/pages/` directory in your source folder.
 
 Additionally, you can provide a glob pattern or an array of patterns to scan only certain files for pages.
 
@@ -1681,7 +1676,7 @@ and these plugins do not need to be listed in `nuxt.config` unless you
 need to customize their order. All plugins are deduplicated by their src path.
 ::
 
-**See**: [`plugins/` directory documentation](https://nuxt.com/docs/guide/directory-structure/plugins)
+**See**: [`app/plugins/` directory documentation](https://nuxt.com/docs/guide/directory-structure/plugins)
 
 **Example**:
 ```js

package/6.bridge/4.plugins-and-middleware.md

@@ -9,7 +9,7 @@ You can now migrate to the Nuxt 3 plugins API, which is slightly different in fo
 
 Plugins now take only one argument (`nuxtApp`). You can find out more in [the docs](/docs/guide/directory-structure/plugins).
 
-```js [plugins/hello.ts]
+```js [app/plugins/hello.ts]
 export default defineNuxtPlugin(nuxtApp => {
   nuxtApp.provide('injected', () => 'my injected function')
   // now available on `nuxtApp.$injected`
@@ -28,7 +28,7 @@ Although a compatibility interface is provided via `nuxtApp.vueApp` you should a
 
 You can now migrate to the Nuxt 3 middleware API, which is slightly different in format from Nuxt 2.
 
-Middleware now take only two argument (`to`, `from`). You can find out more in [the docs](/docs/guide/directory-structure/middleware).
+Middleware now take only two argument (`to`, `from`). You can find out more in [the docs](/docs/guide/directory-structure/app/middleware).
 
 ```ts twoslash
 export default defineNuxtRouteMiddleware((to) => {
@@ -39,7 +39,7 @@ export default defineNuxtRouteMiddleware((to) => {
 ```
 
 ::important
-Use of `defineNuxtRouteMiddleware` is not supported outside of the middleware directory.
+Use of `defineNuxtRouteMiddleware` is not supported outside of the `app/middleware` directory.
 ::
 
 ## definePageMeta

package/6.bridge/6.meta.md

@@ -106,7 +106,7 @@ Possible breaking change: `head` receives the nuxt app but cannot access the com
 
 If you want to use a function (for full control), then this cannot be set in your nuxt.config, and it is recommended instead to set it within your `/layouts` directory.
 
-```vue [layouts/default.vue]
+```vue [app/layouts/default.vue]
 <script setup lang="ts">
 useHead({
   titleTemplate: (titleChunk) => {

package/7.migration/2.configuration.md

@@ -227,7 +227,7 @@ export const useMainStore = defineStore('main', {
 
 Create a [plugin](/docs/guide/directory-structure/plugins) file to globalize your store:
 
-```ts [plugins/pinia.ts]
+```ts [app/plugins/pinia.ts]
 import { useMainStore } from '~/store'
 
 export default defineNuxtPlugin(({ $pinia }) => {
@@ -243,7 +243,7 @@ If you want to keep using Vuex, you can manually migrate to Vuex 4 following [th
 
 Once it's done you will need to add the following plugin to your Nuxt app:
 
-```ts [plugins/vuex.ts]
+```ts [app/plugins/vuex.ts]
 import store from '~/store'
 
 export default defineNuxtPlugin(nuxtApp => {

package/7.migration/3.auto-imports.md

@@ -11,7 +11,7 @@ In the rest of the migration documentation, you will notice that key Nuxt and Vu
 
 ## Migration
 
-1. If you have been using `@nuxt/components` in Nuxt 2, you can remove `components: true` in your `nuxt.config`. If you had a more complex setup, then note that the component options have changed somewhat. See the [components documentation](/docs/guide/directory-structure/components) for more information.
+1. If you have been using `@nuxt/components` in Nuxt 2, you can remove `components: true` in your `nuxt.config`. If you had a more complex setup, then note that the component options have changed somewhat. See the [components documentation](/docs/guide/directory-structure/app/components) for more information.
 
 ::tip
 You can look at `.nuxt/types/components.d.ts` and `.nuxt/types/imports.d.ts` to see how Nuxt has resolved your components and composable auto-imports.

package/7.migration/5.plugins-and-middleware.md

@@ -40,7 +40,7 @@ Read more about the format of `nuxtApp`.
 ### Migration
 
 1. Migrate your plugins to use the `defineNuxtPlugin` helper function.
-2. Remove any entries in your `nuxt.config` plugins array that are located in your `plugins/` folder. All files in this directory at the top level (and any index files in any subdirectories) will be automatically registered. Instead of setting `mode` to `client` or `server`, you can indicate this in the file name. For example, `~/plugins/my-plugin.client.ts` will only be loaded on client-side.
+2. Remove any entries in your `nuxt.config` plugins array that are located in your `app/plugins/` folder. All files in this directory at the top level (and any index files in any subdirectories) will be automatically registered. Instead of setting `mode` to `client` or `server`, you can indicate this in the file name. For example, `~/plugins/my-plugin.client.ts` will only be loaded on client-side.
 
 ## Route Middleware
 
@@ -72,7 +72,7 @@ Much like Nuxt 2, route middleware placed in your `~/middleware` folder is autom
 
 `navigateTo` is one of a number of route helper functions.
 
-:read-more{to="/docs/guide/directory-structure/middleware"}
+:read-more{to="/docs/guide/directory-structure/app/middleware"}
 
 ### Migration