@nuxt/docs 4.0.3 → 4.1.1

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
 

package/7.migration/6.pages-and-layouts.md

@@ -25,14 +25,14 @@ Consider creating an `app.vue` file and including any logic that needs to run on
 
 If you are using layouts in your app for multiple pages, there is only a slight change required.
 
-In Nuxt 2, the `<Nuxt>` component is used within a layout to render the current page. In Nuxt 3, layouts use slots instead, so you will have to replace that component with a `<slot />`. This also allows advanced use cases with named and scoped slots. [Read more about layouts](/docs/guide/directory-structure/layouts).
+In Nuxt 2, the `<Nuxt>` component is used within a layout to render the current page. In Nuxt 3, layouts use slots instead, so you will have to replace that component with a `<slot />`. This also allows advanced use cases with named and scoped slots. [Read more about layouts](/docs/guide/directory-structure/app/layouts).
 
-You will also need to change how you define the layout used by a page using the `definePageMeta` compiler macro. Layouts will be kebab-cased. So `layouts/customLayout.vue` becomes `custom-layout` when referenced in your page.
+You will also need to change how you define the layout used by a page using the `definePageMeta` compiler macro. Layouts will be kebab-cased. So `app/layouts/customLayout.vue` becomes `custom-layout` when referenced in your page.
 
 ### Migration
 
 1. Replace `<Nuxt />` with `<slot />`
-    ```diff [layouts/custom.vue]
+    ```diff [app/layouts/custom.vue]
       <template>
         <div id="app-layout">
           <main>
@@ -43,7 +43,7 @@ You will also need to change how you define the layout used by a page using the
       </template>
     ```
 2. Use [`definePageMeta`](/docs/api/utils/define-page-meta) to select the layout used by your page.
-    ```diff [pages/index.vue]
+    ```diff [app/pages/index.vue]
     + <script setup>
     + definePageMeta({
     +   layout: 'custom'
@@ -54,7 +54,7 @@ You will also need to change how you define the layout used by a page using the
     - }
       </script>
     ```
-3. Move `~/layouts/_error.vue` to `~/error.vue`. See [the error handling docs](/docs/getting-started/error-handling). If you want to ensure that this page uses a layout, you can use [`<NuxtLayout>`](/docs/guide/directory-structure/layouts) directly within `error.vue`:
+3. Move `~/layouts/_error.vue` to `~/error.vue`. See [the error handling docs](/docs/getting-started/error-handling). If you want to ensure that this page uses a layout, you can use [`<NuxtLayout>`](/docs/guide/directory-structure/app/layouts) directly within `error.vue`:
     ```vue [error.vue]
     <template>
       <div>
@@ -67,11 +67,11 @@ You will also need to change how you define the layout used by a page using the
 
 ## Pages
 
-Nuxt 3 ships with an optional `vue-router` integration triggered by the existence of a [`pages/`](/docs/guide/directory-structure/pages) directory in your source directory. If you only have a single page, you may consider instead moving it to `app.vue` for a lighter build.
+Nuxt 3 ships with an optional `vue-router` integration triggered by the existence of a [`app/pages/`](/docs/guide/directory-structure/app/pages) directory in your source directory. If you only have a single page, you may consider instead moving it to `app.vue` for a lighter build.
 
 ### Dynamic Routes
 
-The format for defining dynamic routes in Nuxt 3 is slightly different from Nuxt 2, so you may need to rename some of the files within `pages/`.
+The format for defining dynamic routes in Nuxt 3 is slightly different from Nuxt 2, so you may need to rename some of the files within `app/pages/`.
 
 1. Where you previously used `_id` to define a dynamic route parameter you now use `[id]`.
 2. Where you previously used `_.vue` to define a catch-all route, you now use `[...slug].vue`.
@@ -84,7 +84,7 @@ In Nuxt 2, you will have defined any nested routes (with parent and child compon
 
 If you were passing a custom page key or keep-alive props to `<Nuxt>`, you will now use `definePageMeta` to set these options.
 
-:read-more{to="/docs/guide/directory-structure/pages#special-metadata"}
+:read-more{to="/docs/guide/directory-structure/app/pages#special-metadata"}
 
 ### Page and Layout Transitions
 

package/7.migration/7.component-options.md

@@ -73,7 +73,7 @@ Despite the names, [`useFetch`](/docs/api/composables/use-fetch) is not a direct
 
 You can now define a key within the [`definePageMeta`](/docs/api/utils/define-page-meta) compiler macro.
 
-```diff [pages/index.vue]
+```diff [app/pages/index.vue]
 - <script>
 - export default {
 -   key: 'index'
@@ -106,7 +106,7 @@ This feature is not yet supported in Nuxt 3.
 This feature is not yet supported in Nuxt 3. If you want to overwrite the default scroll behavior of `vue-router`, you can do so in an `~/router.options.ts` (see [docs](/docs/guide/recipes/custom-routing#router-options)) for more info.
 Similar to `key`, specify it within the [`definePageMeta`](/docs/api/utils/define-page-meta) compiler macro.
 
-```diff [pages/index.vue]
+```diff [app/pages/index.vue]
 - <script>
 - export default {
 -   scrollToTop: false
@@ -126,7 +126,7 @@ Similar to `key`, specify it within the [`definePageMeta`](/docs/api/utils/defin
 
 The validate hook in Nuxt 3 only accepts a single argument, the `route`. Just as in Nuxt 2, you can return a boolean value. If you return false and another match can't be found, this will mean a 404. You can also directly return an object with `statusCode`/`statusMessage` to respond immediately with an error (other matches will not be checked).
 
-```diff [pages/users/[id\\].vue]
+```diff [app/pages/users/[id\\].vue]
 - <script>
 - export default {
 -   async validate({ params }) {
@@ -147,7 +147,7 @@ The validate hook in Nuxt 3 only accepts a single argument, the `route`. Just as
 
 This is not supported in Nuxt 3. Instead, you can directly use a watcher to trigger refetching data.
 
-```vue [pages/users/[id\\].vue]
+```vue [app/pages/users/[id\\].vue]
 <script setup lang="ts">
 const route = useRoute()
 const { data, refresh } = await useFetch('/api/user')

package/7.migration/8.runtime-config.md

@@ -31,7 +31,7 @@ export default defineNuxtConfig({
 })
 ```
 
-```vue [pages/index.vue]
+```vue [app/pages/index.vue]
 <script setup lang="ts">
 const config = useRuntimeConfig()
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/docs",
-  "version": "4.0.3",
+  "version": "4.1.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/nuxt.git",