@nuxt/docs-nightly 4.1.3-29313386.edc02e27 → 4.1.3-29316215.910d159d

package/2.guide/1.directory-structure/1.app/1.middleware.md

@@ -58,8 +58,8 @@ Possible return values are:
 * `return abortNavigation()` - stops the current navigation
 * `return abortNavigation(error)` - rejects the current navigation with an error
 
-:read-more{to="/docs/api/utils/navigate-to"}
-:read-more{to="/docs/api/utils/abort-navigation"}
+:read-more{to="/docs/4.x/api/utils/navigate-to"}
+:read-more{to="/docs/4.x/api/utils/abort-navigation"}
 
 ::important
 We recommend using the helper functions above for performing redirects or stopping navigation. Other possible return values described in [the vue-router docs](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards) may work but there may be breaking changes in future.
@@ -90,7 +90,7 @@ definePageMeta({
     },
     'auth',
   ],
-});
+})
 </script>
 ```
 
@@ -125,14 +125,20 @@ If your site is server-rendered or generated, middleware for the initial page wi
 However, if you want to avoid this behaviour you can do so:
 
 ```ts twoslash [middleware/example.ts]
-export default defineNuxtRouteMiddleware(to => {
+export default defineNuxtRouteMiddleware((to) => {
   // skip middleware on server
-  if (import.meta.server) return
+  if (import.meta.server) {
+    return
+  }
   // skip middleware on client side entirely
-  if (import.meta.client) return
+  if (import.meta.client) {
+    return
+  }
   // or only skip middleware on initial client load
   const nuxtApp = useNuxtApp()
-  if (import.meta.client && nuxtApp.isHydrating && nuxtApp.payload.serverRendered) return
+  if (import.meta.client && nuxtApp.isHydrating && nuxtApp.payload.serverRendered) {
+    return
+  }
 })
 ```
 
@@ -155,10 +161,10 @@ This leads to the **same issue as above**, so you should structure your function
 ::code-group
 ```ts twoslash [middleware/access-route.ts]
 // @errors: 2304
-export default defineNuxtRouteMiddleware(to => {
+export default defineNuxtRouteMiddleware((to) => {
   // passing the route to the function to avoid calling `useRoute()` in middleware
   doSomethingWithRoute(to)
-    
+
   // ❌ this will output a warning and is NOT recommended
   callsRouteInternally()
 })
@@ -166,14 +172,14 @@ export default defineNuxtRouteMiddleware(to => {
 
 ```ts twoslash [utils/handle-route.ts]
 // providing the route as an argument so that it can be used in middleware correctly
-export function doSomethingWithRoute(route = useRoute()) {
+export function doSomethingWithRoute (route = useRoute()) {
   // ...
 }
 ```
 ```ts twoslash [utils/dont-do-this.ts]
 // ❌ this function is not suitable for use in middleware
-export function callsRouteInternally() {
-    const route = useRoute()
+export function callsRouteInternally () {
+  const route = useRoute()
   // ...
 }
 ```
@@ -208,7 +214,7 @@ In your page file, you can reference this route middleware:
 ```vue twoslash
 <script setup lang="ts">
 definePageMeta({
-  middleware: ["auth"]
+  middleware: ['auth'],
   // or middleware: 'auth'
 })
 </script>
@@ -216,7 +222,7 @@ definePageMeta({
 
 Now, before navigation to that page can complete, the `auth` route middleware will be run.
 
-:link-example{to="/docs/examples/routing/middleware"}
+:link-example{to="/docs/4.x/examples/routing/middleware"}
 
 ## Setting Middleware at Build Time
 
@@ -230,7 +236,7 @@ export default defineNuxtConfig({
     'pages:extend' (pages) {
       function setMiddleware (pages: NuxtPage[]) {
         for (const page of pages) {
-          if (/* some condition */ true) {
+          if (/* some condition */ Math.random() > 0.5) {
             page.meta ||= {}
             // Note that this will override any middleware set in `definePageMeta` in the page
             page.meta.middleware = ['named']
@@ -241,7 +247,7 @@ export default defineNuxtConfig({
         }
       }
       setMiddleware(pages)
-    }
-  }
+    },
+  },
 })
 ```

package/2.guide/1.directory-structure/1.app/1.pages.md

@@ -28,17 +28,17 @@ Nuxt will automatically create a route for every page in your `~/pages/` directo
 export default defineComponent({
   render () {
     return h('h1', 'Index page')
-  }
+  },
 })
 ```
 
 ```tsx twoslash [pages/index.tsx]
-// https://nuxt.com/docs/examples/advanced/jsx
+// https://nuxt.com/docs/4.x/examples/advanced/jsx
 // https://vuejs.org/guide/extras/render-function.html#jsx-tsx
 export default defineComponent({
   render () {
     return <h1>Index page</h1>
-  }
+  },
 })
 ```
 
@@ -177,10 +177,10 @@ This file tree will generate these routes:
       {
         path: 'child',
         component: '~/pages/parent/child.vue',
-        name: 'parent-child'
-      }
-    ]
-  }
+        name: 'parent-child',
+      },
+    ],
+  },
 ]
 ```
 
@@ -197,7 +197,9 @@ To display the `child.vue` component, you have to insert the `<NuxtPage>` compon
 
 ```vue {}[pages/parent/child.vue]
 <script setup lang="ts">
-const props = defineProps(['foobar'])
+const props = defineProps({
+  foobar: String,
+})
 
 console.log(props.foobar)
 </script>
@@ -221,12 +223,12 @@ Or alternatively:
 ```vue twoslash {}[pages/parent/child.vue]
 <script setup lang="ts">
 definePageMeta({
-  key: route => route.fullPath
+  key: route => route.fullPath,
 })
 </script>
 ```
 
-:link-example{to="/docs/examples/routing/pages"}
+:link-example{to="/docs/4.x/examples/routing/pages"}
 
 ## Route Groups
 
@@ -251,7 +253,7 @@ You might want to define metadata for each route in your app. You can do this us
 ```vue twoslash
 <script setup lang="ts">
 definePageMeta({
-  title: 'My home page'
+  title: 'My home page',
 })
 </script>
 ```
@@ -279,8 +281,8 @@ Make sure not to reference any reactive data or functions that cause side effect
 <script setup lang="ts">
 import { someData } from '~/utils/example'
 
-function validateIdParam(route) {
-  return route.params.id && !isNaN(Number(route.params.id))
+function validateIdParam (route) {
+  return route.params.id && !Number.isNaN(Number(route.params.id))
 }
 
 const title = ref('')
@@ -288,7 +290,7 @@ const title = ref('')
 definePageMeta({
   validate: validateIdParam,
   someData,
-  title,    // do not do this, the ref will be hoisted out of the component
+  title, // do not do this, the ref will be hoisted out of the component
 })
 </script>
 ```
@@ -311,7 +313,7 @@ You can set a default value for this property [in your `nuxt.config`](/docs/4.x/
 
 #### `key`
 
-[See above](/docs/guide/directory-structure/app/pages#child-route-keys).
+[See above](/docs/4.x/guide/directory-structure/app/pages#child-route-keys).
 
 #### `layout`
 
@@ -368,7 +370,7 @@ A simple link to the `index.vue` page in your `app/pages` folder:
 </template>
 ```
 
-::read-more{to="/docs/api/components/nuxt-link"}
+::read-more{to="/docs/4.x/api/components/nuxt-link"}
 Learn more about `<NuxtLink>` usage.
 ::
 
@@ -382,16 +384,16 @@ Make sure to always `await` on `navigateTo` or chain its result by returning fro
 
 ```vue twoslash
 <script setup lang="ts">
-const name = ref('');
-const type = ref(1);
+const name = ref('')
+const type = ref(1)
 
-function navigate(){
+function navigate () {
   return navigateTo({
     path: '/search',
     query: {
       name: name.value,
-      type: type.value
-    }
+      type: type.value,
+    },
   })
 }
 </script>
@@ -413,7 +415,7 @@ Server-only pages must have a single root element. (HTML comments are considered
 
 As your app gets bigger and more complex, your routing might require more flexibility. For this reason, Nuxt directly exposes the router, routes and router options for customization in different ways.
 
-:read-more{to="/docs/guide/recipes/custom-routing"}
+:read-more{to="/docs/4.x/guide/recipes/custom-routing"}
 
 ## Multiple Pages Directories
 
@@ -441,4 +443,4 @@ export default defineNuxtConfig({
 })
 ```
 
-:read-more{to="/docs/guide/going-further/layers"}
+:read-more{to="/docs/4.x/guide/going-further/layers"}

package/2.guide/1.directory-structure/1.app/1.plugins.md

@@ -36,8 +36,8 @@ To add plugins in subdirectories, you can use the [`app/plugins`](/docs/4.x/api/
 export default defineNuxtConfig({
   plugins: [
     '~/plugins/bar/baz',
-    '~/plugins/bar/foz'
-  ]
+    '~/plugins/bar/foz',
+  ],
 })
 ```
 
@@ -46,7 +46,7 @@ export default defineNuxtConfig({
 The only argument passed to a plugin is [`nuxtApp`](/docs/4.x/api/composables/use-nuxt-app).
 
 ```ts twoslash [plugins/hello.ts]
-export default defineNuxtPlugin(nuxtApp => {
+export default defineNuxtPlugin((nuxtApp) => {
   // Doing something with nuxtApp
 })
 ```
@@ -64,15 +64,15 @@ export default defineNuxtPlugin({
   },
   hooks: {
     // You can directly register Nuxt app runtime hooks here
-    'app:created'() {
+    'app:created' () {
       const nuxtApp = useNuxtApp()
       // do something in the hook
-    }
+    },
   },
   env: {
     // Set this value to `false` if you don't want the plugin to run when rendering server-only or island components.
-    islands: true
-  }
+    islands: true,
+  },
 })
 ```
 
@@ -114,7 +114,7 @@ export default defineNuxtPlugin({
   parallel: true,
   async setup (nuxtApp) {
     // the next plugin will be executed immediately
-  }
+  },
 })
 ```
 
@@ -128,7 +128,7 @@ export default defineNuxtPlugin({
   dependsOn: ['my-plugin'],
   async setup (nuxtApp) {
     // this plugin will wait for the end of `my-plugin`'s execution before it runs
-  }
+  },
 })
 ```
 
@@ -165,8 +165,8 @@ If you would like to provide a helper on the [`NuxtApp`](/docs/4.x/api/composabl
 export default defineNuxtPlugin(() => {
   return {
     provide: {
-      hello: (msg: string) => `Hello ${msg}!`
-    }
+      hello: (msg: string) => `Hello ${msg}!`,
+    },
   }
 })
 ```
@@ -176,10 +176,10 @@ export default defineNuxtPlugin({
   setup () {
     return {
       provide: {
-        hello: (msg: string) => `Hello ${msg}!`
-      }
+        hello: (msg: string) => `Hello ${msg}!`,
+      },
     }
-  }
+  },
 })
 ```
 ::
@@ -267,8 +267,8 @@ import VueGtag, { trackRouter } from 'vue-gtag-next'
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(VueGtag, {
     property: {
-      id: 'GA_MEASUREMENT_ID'
-    }
+      id: 'GA_MEASUREMENT_ID',
+    },
   })
   trackRouter(useRouter())
 })
@@ -287,7 +287,7 @@ export default defineNuxtPlugin((nuxtApp) => {
     getSSRProps (binding, vnode) {
       // you can provide SSR-specific props here
       return {}
-    }
+    },
   })
 })
 ```

package/2.guide/1.directory-structure/1.app/1.utils.md

@@ -14,7 +14,7 @@ The main purpose of the [`app/utils/` directory](/docs/4.x/guide/directory-struc
 ```ts twoslash [utils/index.ts]
 export const { format: formatNumber } = Intl.NumberFormat('en-GB', {
   notation: 'compact',
-  maximumFractionDigits: 1
+  maximumFractionDigits: 1,
 })
 ```
 
@@ -35,9 +35,9 @@ You can now use auto imported utility functions in `.js`, `.ts` and `.vue` files
 </template>
 ```
 
-:read-more{to="/docs/guide/concepts/auto-imports"}
+:read-more{to="/docs/4.x/guide/concepts/auto-imports"}
 
-:link-example{to="/docs/examples/features/auto-imports"}
+:link-example{to="/docs/4.x/examples/features/auto-imports"}
 
 ::tip
 The way `app/utils/` auto-imports work and are scanned is identical to the [`app/composables/`](/docs/4.x/guide/directory-structure/app/composables) directory.

package/2.guide/1.directory-structure/1.app/3.app-config.md

@@ -11,7 +11,7 @@ You can easily provide runtime app configuration using `app.config.ts` file. It
 
 ```ts twoslash [app/app.config.ts]
 export default defineAppConfig({
-  foo: 'bar'
+  foo: 'bar',
 })
 ```
 
@@ -30,8 +30,8 @@ To expose config and environment variables to the rest of your app, you will nee
 ```ts twoslash [app/app.config.ts]
 export default defineAppConfig({
   theme: {
-    primaryColor: '#ababab'
-  }
+    primaryColor: '#ababab',
+  },
 })
 ```
 
@@ -59,7 +59,7 @@ console.log(appConfig) // { foo: 'baz' }
 </script>
 ```
 
-::read-more{to="/docs/api/utils/update-app-config"}
+::read-more{to="/docs/4.x/api/utils/update-app-config"}
 Read more about the `updateAppConfig` utility.
 ::
 
@@ -157,9 +157,9 @@ While it's possible to use Vite plugins in the Nitro config as a workaround, thi
 export default defineNuxtConfig({
   nitro: {
     vite: {
-      plugins: [vue()]
-    }
-  }
+      plugins: [vue()],
+    },
+  },
 })
 ```
 

package/2.guide/1.directory-structure/1.app/3.app.md

@@ -21,7 +21,7 @@ With Nuxt, the [`app/pages/`](/docs/4.x/guide/directory-structure/app/pages) dir
 </template>
 ```
 
-:link-example{to="/docs/examples/hello-world"}
+:link-example{to="/docs/4.x/examples/hello-world"}
 
 ### Usage with Pages
 
@@ -51,7 +51,7 @@ You can also define the common structure of your application directly in `app.vu
 Remember that `app.vue` acts as the main component of your Nuxt application. Anything you add to it (JS and CSS) will be global and included in every page.
 ::
 
-::read-more{to="/docs/guide/directory-structure/app/pages"}
+::read-more{to="/docs/4.x/guide/directory-structure/app/pages"}
 Learn more about how to structure your pages using the `app/pages/` directory.
 ::
 
@@ -67,6 +67,6 @@ When your application requires different layouts for different pages, you can us
 </template>
 ```
 
-::read-more{to="/docs/guide/directory-structure/app/layouts"}
+::read-more{to="/docs/4.x/guide/directory-structure/app/layouts"}
 Learn more about how to structure your layouts using the `app/layouts/` directory.
 ::

package/2.guide/1.directory-structure/1.app/3.error.md

@@ -12,7 +12,7 @@ During the lifespan of your application, some errors may appear unexpectedly at
 import type { NuxtError } from '#app'
 
 const props = defineProps({
-  error: Object as () => NuxtError
+  error: Object as () => NuxtError,
 })
 </script>
 
@@ -32,7 +32,7 @@ The error page has a single prop - `error` which contains an error for you to ha
 
 The `error` object provides the following fields:
 ```ts
-{
+interface NuxtError {
   statusCode: number
   fatal: boolean
   unhandled: boolean
@@ -49,7 +49,7 @@ throw createError({
   statusCode: 404,
   statusMessage: 'Page Not Found',
   data: {
-    myCustomField: true
-  }
+    myCustomField: true,
+  },
 })
 ```

package/2.guide/1.directory-structure/1.content.md

@@ -50,7 +50,10 @@ const { data: page } = await useAsyncData(route.path, () => {
   <div>
     <header><!-- ... --></header>
 
-    <ContentRenderer v-if="page" :value="page" />
+    <ContentRenderer
+      v-if="page"
+      :value="page"
+    />
 
     <footer><!-- ... --></footer>
   </div>

package/2.guide/1.directory-structure/1.modules.md

@@ -18,11 +18,11 @@ You don't need to add those local modules to your [`nuxt.config.ts`](/docs/4.x/g
 ```ts twoslash [modules/hello/index.ts]
 // `nuxt/kit` is a helper subpath import you can use when defining local modules
 // that means you do not need to add `@nuxt/kit` to your project's dependencies
-import { createResolver, defineNuxtModule, addServerHandler } from 'nuxt/kit'
+import { addServerHandler, createResolver, defineNuxtModule } from 'nuxt/kit'
 
 export default defineNuxtModule({
   meta: {
-    name: 'hello'
+    name: 'hello',
   },
   setup () {
     const resolver = createResolver(import.meta.url)
@@ -30,9 +30,9 @@ export default defineNuxtModule({
     // Add an API route
     addServerHandler({
       route: '/api/hello',
-      handler: resolver.resolve('./runtime/api-route')
+      handler: resolver.resolve('./runtime/api-route'),
     })
-  }
+  },
 })
 ```
 
@@ -59,7 +59,7 @@ modules/
   2.second-module.ts
 ```
 
-:read-more{to="/docs/guide/going-further/modules"}
+:read-more{to="/docs/4.x/guide/going-further/modules"}
 
 ::tip{icon="i-lucide-video" to="https://vueschool.io/lessons/creating-your-first-module-from-scratch?friend=nuxt" target="_blank"}
 Watch Vue School video about Nuxt private modules.

package/2.guide/1.directory-structure/1.public.md

@@ -17,7 +17,7 @@ Files contained within the `public/` directory are served at the root and are no
 ```vue [app/app.vue]
 <script setup lang="ts">
 useSeoMeta({
-  ogImage: '/og-image.png'
+  ogImage: '/og-image.png',
 })
 </script>
 ```

package/2.guide/1.directory-structure/1.server.md

@@ -24,7 +24,7 @@ The handler can directly return JSON data, a `Promise`, or use `event.node.res.e
 ```ts twoslash [server/api/hello.ts]
 export default defineEventHandler((event) => {
   return {
-    hello: 'world'
+    hello: 'world',
   }
 })
 ```
@@ -115,9 +115,9 @@ For example, you can define a custom handler utility that wraps the original han
 import type { EventHandler, EventHandlerRequest } from 'h3'
 
 export const defineWrappedResponseHandler = <T extends EventHandlerRequest, D> (
-  handler: EventHandler<T, D>
+  handler: EventHandler<T, D>,
 ): EventHandler<T, D> =>
-  defineEventHandler<T>(async event => {
+  defineEventHandler<T>(async (event) => {
     try {
       // do something before the route handler
       const response = await handler(event)
@@ -234,10 +234,10 @@ You can now universally call this API using:
 
 ```vue [app/app.vue]
 <script setup lang="ts">
-async function submit() {
+async function submit () {
   const { body } = await $fetch('/api/submit', {
     method: 'post',
-    body: { test: 123 }
+    body: { test: 123 },
   })
 }
 </script>
@@ -273,7 +273,7 @@ To return other error codes, throw an exception with [`createError`](/docs/4.x/a
 
 ```ts [server/api/validation/[id\\].ts]
 export default defineEventHandler((event) => {
-  const id = parseInt(event.context.params.id) as number
+  const id = Number.parseInt(event.context.params.id) as number
 
   if (!Number.isInteger(id)) {
     throw createError({
@@ -306,8 +306,8 @@ export default defineEventHandler(async (event) => {
 
   const repo = await $fetch('https://api.github.com/repos/nuxt/nuxt', {
     headers: {
-      Authorization: `token ${config.githubToken}`
-    }
+      Authorization: `token ${config.githubToken}`,
+    },
   })
 
   return repo
@@ -316,8 +316,8 @@ export default defineEventHandler(async (event) => {
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   runtimeConfig: {
-    githubToken: ''
-  }
+    githubToken: '',
+  },
 })
 ```
 ```ini [.env]
@@ -363,8 +363,8 @@ The `event.waitUntil` method accepts a promise that will be awaited before the h
 
 ```ts [server/api/background-task.ts]
 const timeConsumingBackgroundTask = async () => {
-  await new Promise((resolve) => setTimeout(resolve, 1000))
-};
+  await new Promise(resolve => setTimeout(resolve, 1000))
+}
 
 export default eventHandler((event) => {
   // schedule a background task without blocking the response
@@ -372,7 +372,7 @@ export default eventHandler((event) => {
 
   // immediately send the response to the client
   return 'done'
-});
+})
 ```
 
 ## Advanced Usage
@@ -388,11 +388,11 @@ This is an advanced option. Custom config can affect production deployments, as
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   // https://nitro.build/config
-  nitro: {}
+  nitro: {},
 })
 ```
 
-:read-more{to="/docs/guide/concepts/server-engine"}
+:read-more{to="/docs/4.x/guide/concepts/server-engine"}
 
 ### Nested Router
 
@@ -454,7 +454,7 @@ Never combine `next()` callback with a legacy middleware that is `async` or retu
 
 ### Server Storage
 
-Nitro provides a cross-platform [storage layer](https://nitro.build/guide/storage). In order to configure additional storage mount points, you can use `nitro.storage`, or [server plugins](/docs/guide/directory-structure/server#server-plugins).
+Nitro provides a cross-platform [storage layer](https://nitro.build/guide/storage). In order to configure additional storage mount points, you can use `nitro.storage`, or [server plugins](/docs/4.x/guide/directory-structure/server#server-plugins).
 
 **Example of adding a Redis storage:**
 
@@ -468,14 +468,14 @@ export default defineNuxtConfig({
         driver: 'redis',
         /* redis connector options */
         port: 6379, // Redis port
-        host: "127.0.0.1", // Redis host
-        username: "", // needs Redis >= 6
-        password: "",
+        host: '127.0.0.1', // Redis host
+        username: '', // needs Redis >= 6
+        password: '',
         db: 0, // Defaults to 0
-        tls: {} // tls/ssl
-      }
-    }
-  }
+        tls: {}, // tls/ssl
+      },
+    },
+  },
 })
 ```
 
@@ -511,11 +511,11 @@ export default defineNitroPlugin(() => {
 
   // Dynamically pass in credentials from runtime configuration, or other sources
   const driver = redisDriver({
-      base: 'redis',
-      host: useRuntimeConfig().redis.host,
-      port: useRuntimeConfig().redis.port,
-      /* other redis connector options */
-    })
+    base: 'redis',
+    host: useRuntimeConfig().redis.host,
+    port: useRuntimeConfig().redis.port,
+    /* other redis connector options */
+  })
 
   // Mount driver
   storage.mount('redis', driver)
@@ -529,8 +529,8 @@ export default defineNuxtConfig({
       host: '',
       port: 0,
       /* other redis connector options */
-    }
-  }
+    },
+  },
 })
 ```
 ::