@nuxt/docs-nightly 4.1.3-29314777.50febbbb → 4.1.3-29316215.910d159d

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

@@ -54,7 +54,7 @@ export default defineNuxtConfig({
       pathPrefix: false, // [!code ++]
     },
   ],
-});
+})
 ```
 
 This registers the components using the same strategy as used in Nuxt 2. For example, `~/components/Some/MyComponent.vue` will be usable as `<MyComponent>` and not `<SomeMyComponent>`.
@@ -116,7 +116,12 @@ const show = ref(false)
   <div>
     <h1>Mountains</h1>
     <LazyMountainsList v-if="show" />
-    <button v-if="!show" @click="show = true">Show List</button>
+    <button
+      v-if="!show"
+      @click="show = true"
+    >
+      Show List
+    </button>
   </div>
 </template>
 ```
@@ -235,9 +240,10 @@ Hydrates the component based on a boolean condition.
     <LazyMyComponent :hydrate-when="isReady" />
   </div>
 </template>
+
 <script setup lang="ts">
 const isReady = ref(false)
-function myFunction() {
+function myFunction () {
   // trigger custom hydration strategy...
   isReady.value = true
 }
@@ -263,13 +269,16 @@ All delayed hydration components emit a `@hydrated` event when they are hydrated
 ```vue [app/pages/index.vue]
 <template>
   <div>
-    <LazyMyComponent hydrate-on-visible @hydrated="onHydrate" />
+    <LazyMyComponent
+      hydrate-on-visible
+      @hydrated="onHydrate"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-function onHydrate() {
-  console.log("Component has been hydrated!")
+function onHydrate () {
+  console.log('Component has been hydrated!')
 }
 </script>
 ```
@@ -297,7 +306,7 @@ You can also explicitly import components from `#components` if you want or need
 
 ```vue [app/pages/index.vue]
 <script setup lang="ts">
-import { NuxtLink, LazyMountainsList } from '#components'
+import { LazyMountainsList, NuxtLink } from '#components'
 
 const show = ref(false)
 </script>
@@ -306,7 +315,12 @@ const show = ref(false)
   <div>
     <h1>Mountains</h1>
     <LazyMountainsList v-if="show" />
-    <button v-if="!show" @click="show = true">Show List</button>
+    <button
+      v-if="!show"
+      @click="show = true"
+    >
+      Show List
+    </button>
     <NuxtLink to="/">Home</NuxtLink>
   </div>
 </template>
@@ -333,8 +347,8 @@ export default defineNuxtConfig({
     //
     // ~/components/Btn.vue => <Btn />
     // ~/components/base/Btn.vue => <BaseBtn />
-    '~/components'
-  ]
+    '~/components',
+  ],
 })
 ```
 
@@ -352,7 +366,7 @@ If you want to auto-import components from an npm package, you can use [`addComp
 import { addComponent, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup() {
+  setup () {
     // import { MyComponent as MyAutoImportedComponent } from 'my-npm-package'
     addComponent({
       name: 'MyAutoImportedComponent',
@@ -385,8 +399,8 @@ export default defineNuxtConfig({
     {
       path: '~/components',
       extensions: ['.vue'], // [!code ++]
-    }
-  ]
+    },
+  ],
 })
 ```
 
@@ -443,8 +457,8 @@ Server components are currently experimental and in order to use them, you need
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    componentIslands: true
-  }
+    componentIslands: true,
+  },
 })
 ```
 
@@ -498,7 +512,10 @@ You can partially hydrate a component by setting a `nuxt-client` attribute on th
   <div>
     <HighlightedMarkdown markdown="# Headline" />
     <!-- Counter will be loaded and hydrated client-side -->
-    <Counter nuxt-client :count="5" />
+    <Counter
+      nuxt-client
+      :count="5"
+    />
   </div>
 </template>
 ```
@@ -573,10 +590,10 @@ Imagine a directory structure like this:
 Then in `awesome-ui/nuxt.ts` you can use the `addComponentsDir` hook:
 
 ```ts twoslash
-import { createResolver, defineNuxtModule, addComponentsDir } from '@nuxt/kit'
+import { addComponentsDir, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup() {
+  setup () {
     const resolver = createResolver(import.meta.url)
 
     // Add ./components dir to the list
@@ -592,7 +609,7 @@ That's it! Now in your project, you can import your UI library as a Nuxt module
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
-  modules: ['awesome-ui/nuxt']
+  modules: ['awesome-ui/nuxt'],
 })
 ```
 

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

@@ -9,7 +9,7 @@ navigation.icon: i-vscode-icons-folder-type-src
 
 **Method 1:** Using named export
 
-```js [app/composables/useFoo.ts]
+```ts [app/composables/useFoo.ts]
 export const useFoo = () => {
   return useState('foo', () => 'bar')
 }
@@ -17,7 +17,7 @@ export const useFoo = () => {
 
 **Method 2:** Using default export
 
-```js [app/composables/use-foo.ts or composables/useFoo.ts]
+```ts [app/composables/use-foo.ts or composables/useFoo.ts]
 // It will be available as useFoo() (camelCase of file name without extension)
 export default function () {
   return useState('foo', () => 'bar')
@@ -62,7 +62,7 @@ If you create a composable without having the dev server running, TypeScript wil
 
 You can use a composable within another composable using auto imports:
 
-```js [app/composables/test.ts]
+```ts [app/composables/test.ts]
 export const useFoo = () => {
   const nuxtApp = useNuxtApp()
   const bar = useBar()
@@ -73,7 +73,7 @@ export const useFoo = () => {
 
 You can access [plugin injections](/docs/4.x/guide/directory-structure/plugins#providing-helpers) from composables:
 
-```js [app/composables/test.ts]
+```ts [app/composables/test.ts]
 export const useHello = () => {
   const nuxtApp = useNuxtApp()
   return nuxtApp.$hello
@@ -114,8 +114,8 @@ export default defineNuxtConfig({
       // ... or scan composables nested one level deep with a specific name and file extension
       '~/composables/*/index.{ts,js,mjs,mts}',
       // ... or scan all composables within given directory
-      '~/composables/**'
-    ]
-  }
+      '~/composables/**',
+    ],
+  },
 })
 ```

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

@@ -69,7 +69,7 @@ Then you can use the `custom` layout in your page:
 ```vue twoslash [pages/about.vue]
 <script setup lang="ts">
 definePageMeta({
-  layout: 'custom'
+  layout: 'custom',
 })
 </script>
 ```
@@ -83,7 +83,7 @@ You can directly override the default layout for all pages using the `name` prop
 ```vue [app/app.vue]
 <script setup lang="ts">
 // You might choose this based on an API call or logged-in status
-const layout = "custom";
+const layout = 'custom'
 </script>
 
 <template>
@@ -122,12 +122,14 @@ function enableCustomLayout () {
 }
 definePageMeta({
   layout: false,
-});
+})
 </script>
 
 <template>
   <div>
-    <button @click="enableCustomLayout">Update layout</button>
+    <button @click="enableCustomLayout">
+      Update layout
+    </button>
   </div>
 </template>
 ```
@@ -150,7 +152,9 @@ definePageMeta({
 <template>
   <div>
     <NuxtLayout name="custom">
-      <template #header> Some header template content. </template>
+      <template #header>
+        Some header template content.
+      </template>
 
       The rest of the page
     </NuxtLayout>

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

@@ -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>
@@ -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,7 +28,7 @@ Nuxt will automatically create a route for every page in your `~/pages/` directo
 export default defineComponent({
   render () {
     return h('h1', 'Index page')
-  }
+  },
 })
 ```
 
@@ -38,7 +38,7 @@ export default defineComponent({
 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,7 +223,7 @@ Or alternatively:
 ```vue twoslash {}[pages/parent/child.vue]
 <script setup lang="ts">
 definePageMeta({
-  key: route => route.fullPath
+  key: route => route.fullPath,
 })
 </script>
 ```
@@ -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>
 ```
@@ -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>

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,
 })
 ```
 

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',
+  },
 })
 ```
 
@@ -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.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'),
     })
-  }
+  },
 })
 ```
 

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>
 ```