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

package/2.guide/3.going-further/7.layers.md

@@ -33,35 +33,35 @@ Additionally, certain other files in the layer directory will be auto-scanned an
   ```ts [nuxt.config.ts]
   export default defineNuxtConfig({
     extends: [
-      './base'
-    ]
+      './base',
+    ],
   })
   ```
 
   ```vue [app/app.vue]
-    <template>
-      <BaseComponent/>
-    </template>
+  <template>
+    <BaseComponent />
+  </template>
   ```
 
   ```ts [base/nuxt.config.ts]
-    export default defineNuxtConfig({
-      // Extending from base nuxt.config.ts!
-      app: {
-        head: {
-          title: 'Extending Configs is Fun!',
-          meta: [
-            { name: 'description', content: 'I am using the extends feature in Nuxt!' }
-          ],
-        }
-      }
-    })
+  export default defineNuxtConfig({
+    // Extending from base nuxt.config.ts!
+    app: {
+      head: {
+        title: 'Extending Configs is Fun!',
+        meta: [
+          { name: 'description', content: 'I am using the extends feature in Nuxt!' },
+        ],
+      },
+    },
+  })
   ```
 
   ```vue [base/app/components/BaseComponent.vue]
-    <template>
-      <h1>Extending Components is Fun!</h1>
-    </template>
+  <template>
+    <h1>Extending Components is Fun!</h1>
+  </template>
   ```
 
 ::
@@ -79,10 +79,13 @@ For example:
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   extends: [
-    './layers/base',      // Highest priority (among extends)
-    './layers/theme',     // Medium priority  
-    './layers/custom'     // Lower priority
-  ]
+    // Highest priority (among extends)
+    './layers/base',
+    // Medium priority
+    './layers/theme',
+    // Lower priority
+    './layers/custom',
+  ],
   // Your project has the highest priority
 })
 ```
@@ -110,13 +113,19 @@ You can use a git repository to share your Nuxt layer. Some examples:
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   extends: [
-    'github:username/repoName',        // GitHub Remote Source
-    'github:username/repoName/base',   // GitHub Remote Source within /base directory
-    'github:username/repoName#dev',    // GitHub Remote Source from dev branch
-    'github:username/repoName#v1.0.0', // GitHub Remote Source from v1.0.0 tag
-    'gitlab:username/repoName',        // GitLab Remote Source example
-    'bitbucket:username/repoName',     // Bitbucket Remote Source example
-  ]
+    // GitHub Remote Source
+    'github:username/repoName',
+    // GitHub Remote Source within /base directory
+    'github:username/repoName/base',
+    // GitHub Remote Source from dev branch
+    'github:username/repoName#dev',
+    // GitHub Remote Source from v1.0.0 tag
+    'github:username/repoName#v1.0.0',
+    // GitLab Remote Source example
+    'gitlab:username/repoName',
+    // Bitbucket Remote Source example
+    'bitbucket:username/repoName',
+  ],
 })
 ```
 
@@ -138,8 +147,8 @@ When using git remote sources, if a layer has npm dependencies and you wish to i
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   extends: [
-    ['github:username/repoName', { install: true }]
-  ]
+    ['github:username/repoName', { install: true }],
+  ],
 })
 ```
 ::
@@ -156,8 +165,8 @@ export default defineNuxtConfig({
     // Node Module with scope
     '@scope/moduleName',
     // or just the module name
-    'moduleName'
-  ]
+    'moduleName',
+  ],
 })
 ```
 
@@ -210,16 +219,16 @@ When importing using global aliases (such as `~/` and `@/`) in a layer component
 
 Also when using relative paths in `nuxt.config` file of a layer, (with exception of nested `extends`) they are resolved relative to user's project instead of the layer. As a workaround, use full resolved paths in `nuxt.config`:
 
-```js [nuxt.config.ts]
-import { fileURLToPath } from 'url'
-import { dirname, join } from 'path'
+```ts [nuxt.config.ts]
+import { fileURLToPath } from 'node:url'
+import { dirname, join } from 'node:path'
 
 const currentDir = dirname(fileURLToPath(import.meta.url))
 
 export default defineNuxtConfig({
   css: [
-    join(currentDir, './app/assets/main.css')
-  ]
+    join(currentDir, './app/assets/main.css'),
+  ],
 })
 ```
 
@@ -229,12 +238,12 @@ You can use the internal array `nuxt.options._layers` to support custom multi-la
 
 ```ts [modules/my-module.ts]
 export default defineNuxtModule({
-  setup(_options, nuxt) {
+  setup (_options, nuxt) {
     for (const layer of nuxt.options._layers) {
       // You can check for a custom directory existence to extend for each layer
       console.log('Custom extension for', layer.cwd, layer.config)
     }
-  }
+  },
 })
 ```
 

package/2.guide/3.going-further/9.debugging.md

@@ -12,8 +12,8 @@ export default defineNuxtConfig({
   // or sourcemap: true
   sourcemap: {
     server: true,
-    client: true
-  }
+    client: true,
+  },
 })
 ```
 

package/2.guide/4.recipes/1.custom-routing.md

@@ -18,12 +18,12 @@ import type { RouterConfig } from '@nuxt/schema'
 
 export default {
   // https://router.vuejs.org/api/interfaces/routeroptions.html#routes
-  routes: (_routes) => [
+  routes: _routes => [
     {
       name: 'home',
       path: '/',
-      component: () => import('~/pages/home.vue')
-    }
+      component: () => import('~/pages/home.vue'),
+    },
   ],
 } satisfies RouterConfig
 ```
@@ -48,7 +48,7 @@ export default defineNuxtConfig({
       pages.push({
         name: 'profile',
         path: '/profile',
-        file: '~/extra-pages/profile.vue'
+        file: '~/extra-pages/profile.vue',
       })
 
       // remove routes
@@ -66,8 +66,8 @@ export default defineNuxtConfig({
         }
       }
       removePagesMatching(/\.ts$/, pages)
-    }
-  }
+    },
+  },
 })
 ```
 
@@ -110,10 +110,10 @@ export default defineNuxtConfig({
       // add a route
       files.push({
         path: resolver.resolve('./runtime/router-options'),
-        optional: true
+        optional: true,
       })
-    }
-  }
+    },
+  },
 })
 ```
 
@@ -129,11 +129,11 @@ export default defineNuxtConfig({
 - `hashMode`
 - `scrollBehaviorType`
 
-```js [nuxt.config]
+```ts [nuxt.config]
 export default defineNuxtConfig({
   router: {
-    options: {}
-  }
+    options: {},
+  },
 })
 ```
 
@@ -146,9 +146,9 @@ export default defineNuxtConfig({
   ssr: false,
   router: {
     options: {
-      hashMode: true
-    }
-  }
+      hashMode: true,
+    },
+  },
 })
 ```
 
@@ -160,9 +160,9 @@ You can optionally customize the scroll behavior for hash links. When you set th
 export default defineNuxtConfig({
   router: {
     options: {
-      scrollBehaviorType: 'smooth'
-    }
-  }
+      scrollBehaviorType: 'smooth',
+    },
+  },
 })
 ```
 
@@ -176,6 +176,6 @@ import { createMemoryHistory } from 'vue-router'
 
 export default {
   // https://router.vuejs.org/api/interfaces/routeroptions.html
-  history: base => import.meta.client ? createMemoryHistory(base) : null /* default */
+  history: base => import.meta.client ? createMemoryHistory(base) : null, /* default */
 } satisfies RouterConfig
 ```

package/2.guide/4.recipes/2.vite-plugin.md

@@ -36,9 +36,9 @@ import yaml from '@rollup/plugin-yaml'
 export default defineNuxtConfig({
   vite: {
     plugins: [
-      yaml()
-    ]
-  }
+      yaml(),
+    ],
+  },
 })
 ```
 

package/2.guide/4.recipes/3.custom-usefetch.md

@@ -29,24 +29,24 @@ export default defineNuxtPlugin((nuxtApp) => {
 
   const api = $fetch.create({
     baseURL: 'https://api.nuxt.com',
-    onRequest({ request, options, error }) {
+    onRequest ({ request, options, error }) {
       if (session.value?.token) {
         // note that this relies on ofetch >= 1.4.0 - you may need to refresh your lockfile
         options.headers.set('Authorization', `Bearer ${session.value?.token}`)
       }
     },
-    async onResponseError({ response }) {
+    async onResponseError ({ response }) {
       if (response.status === 401) {
         await nuxtApp.runWithContext(() => navigateTo('/login'))
       }
-    }
+    },
   })
 
   // Expose to useNuxtApp().$api
   return {
     provide: {
-      api
-    }
+      api,
+    },
   }
 })
 ```
@@ -71,13 +71,13 @@ Now that `$api` has the logic we want, let's create a `useAPI` composable to rep
 ```ts [app/composables/useAPI.ts]
 import type { UseFetchOptions } from 'nuxt/app'
 
-export function useAPI<T>(
+export function useAPI<T> (
   url: string | (() => string),
   options?: UseFetchOptions<T>,
 ) {
   return useFetch(url, {
     ...options,
-    $fetch: useNuxtApp().$api as typeof $fetch
+    $fetch: useNuxtApp().$api as typeof $fetch,
   })
 }
 ```
@@ -101,13 +101,13 @@ interface CustomError {
   statusCode: number
 }
 
-export function useAPI<T>(
+export function useAPI<T> (
   url: string | (() => string),
   options?: UseFetchOptions<T>,
 ) {
   return useFetch<T, FetchError<CustomError>>(url, {
     ...options,
-    $fetch: useNuxtApp().$api
+    $fetch: useNuxtApp().$api,
   })
 }
 ```

package/2.guide/4.recipes/4.sessions-and-authentication.md

@@ -48,7 +48,7 @@ import { z } from 'zod'
 
 const bodySchema = z.object({
   email: z.string().email(),
-  password: z.string().min(8)
+  password: z.string().min(8),
 })
 
 export default defineEventHandler(async (event) => {
@@ -59,14 +59,14 @@ export default defineEventHandler(async (event) => {
     // this server util is auto-imported by the auth-utils module
     await setUserSession(event, {
       user: {
-        name: 'John Doe'
-      }
+        name: 'John Doe',
+      },
     })
     return {}
   }
   throw createError({
     statusCode: 401,
-    message: 'Bad credentials'
+    message: 'Bad credentials',
   })
 })
 ```
@@ -98,25 +98,37 @@ const credentials = reactive({
   email: '',
   password: '',
 })
-async function login() {
-  $fetch('/api/login', {
-    method: 'POST',
-    body: credentials
-  })
-  .then(async () => {
+async function login () {
+  try {
+    await $fetch('/api/login', {
+      method: 'POST',
+      body: credentials,
+    })
+
     // Refresh the session on client-side and redirect to the home page
     await refreshSession()
     await navigateTo('/')
-  })
-  .catch(() => alert('Bad credentials'))
+  } catch {
+    alert('Bad credentials')
+  }
 }
 </script>
 
 <template>
   <form @submit.prevent="login">
-    <input v-model="credentials.email" type="email" placeholder="Email" />
-    <input v-model="credentials.password" type="password" placeholder="Password" />
-    <button type="submit">Login</button>
+    <input
+      v-model="credentials.email"
+      type="email"
+      placeholder="Email"
+    >
+    <input
+      v-model="credentials.password"
+      type="password"
+      placeholder="Password"
+    >
+    <button type="submit">
+      Login
+    </button>
   </form>
 </template>
 ```
@@ -138,7 +150,7 @@ export default defineEventHandler(async (event) => {
   // TODO: Fetch some stats based on the user
 
   return {}
-});
+})
 ```
 
 ## Protect App Routes
@@ -171,10 +183,10 @@ We'll use [`definePageMeta`](/docs/4.x/api/utils/define-page-meta) to apply the
 definePageMeta({
   middleware: ['authenticated'],
 })
-  
+
 const { user, clear: clearSession } = useUserSession()
 
-async function logout() {
+async function logout () {
   await clearSession()
   await navigateTo('/login')
 }
@@ -183,7 +195,9 @@ async function logout() {
 <template>
   <div>
     <h1>Welcome {{ user.name }}</h1>
-    <button @click="logout">Logout</button>
+    <button @click="logout">
+      Logout
+    </button>
   </div>
 </template>
 ```

package/2.guide/5.best-practices/performance.md

@@ -34,8 +34,8 @@ export default defineNuxtConfig({
       nuxtLink: {
         prefetchOn: 'interaction',
       },
-    }
-  }
+    },
+  },
 })
 ```
 
@@ -51,18 +51,18 @@ Hybrid rendering allows different caching rules per route using Route Rules and
 export default defineNuxtConfig({
   routeRules: {
     '/': {
-      prerender: true
+      prerender: true,
     },
     '/products/**': {
-      swr: 3600
+      swr: 3600,
     },
     '/blog': {
-      isr: 3600
+      isr: 3600,
     },
     '/admin/**': {
-      ssr: false
+      ssr: false,
     },
-  }
+  },
 })
 ```
 
@@ -193,7 +193,7 @@ Nuxt Scripts provides an abstraction layer on top of third-party scripts, provid
 
 ```ts
 const { onLoaded, proxy } = useScriptGoogleAnalytics(
-  { 
+  {
     id: 'G-1234567',
     scriptOptions: {
       trigger: 'manual',

package/3.api/1.components/1.client-only.md

@@ -24,7 +24,10 @@ The content of the default slot will be tree-shaken out of the server build. (Th
   <div>
     <Sidebar />
     <!-- The <Comment> component will only be rendered on client-side -->
-    <ClientOnly fallback-tag="span" fallback="Loading comments...">
+    <ClientOnly
+      fallback-tag="span"
+      fallback="Loading comments..."
+    >
       <Comment />
     </ClientOnly>
   </div>
@@ -40,7 +43,7 @@ The content of the default slot will be tree-shaken out of the server build. (Th
   <div>
     <Sidebar />
     <!-- This renders the "span" element on the server side -->
-    <ClientOnly fallbackTag="span">
+    <ClientOnly fallback-tag="span">
       <!-- this component will only be rendered on client side -->
       <Comments />
       <template #fallback>
@@ -64,7 +67,7 @@ const nuxtWelcomeRef = useTemplateRef('nuxtWelcomeRef')
 
 // The watch will be triggered when the component is available
 watch(nuxtWelcomeRef, () => {
- console.log('<NuxtWelcome /> mounted')
+  console.log('<NuxtWelcome /> mounted')
 }, { once: true })
 </script>
 

package/3.api/1.components/1.nuxt-client-fallback.md

@@ -55,12 +55,15 @@ This component is experimental and in order to use it you must enable the `exper
   - **default**: `false`
 
 ```vue
-  <template>
-    <!-- render <span>Hello world</span> server-side if the default slot fails to render -->
-    <NuxtClientFallback fallback-tag="span" fallback="Hello world">
-      <BrokeInSsr />
-    </NuxtClientFallback>
-  </template>
+<template>
+  <!-- render <span>Hello world</span> server-side if the default slot fails to render -->
+  <NuxtClientFallback
+    fallback-tag="span"
+    fallback="Hello world"
+  >
+    <BrokeInSSR />
+  </NuxtClientFallback>
+</template>
 ```
 
 ## Slots

package/3.api/1.components/11.teleports.md

@@ -15,7 +15,10 @@ The `to` target of [`<Teleport>`](https://vuejs.org/guide/built-ins/teleport.htm
     Open Modal
   </button>
   <Teleport to="#teleports">
-    <div v-if="open" class="modal">
+    <div
+      v-if="open"
+      class="modal"
+    >
       <p>Hello from the modal!</p>
       <button @click="open = false">
         Close

package/3.api/1.components/12.nuxt-route-announcer.md

@@ -32,13 +32,13 @@ Add `<NuxtRouteAnnouncer/>` in your [`app.vue`](/docs/4.x/guide/directory-struct
 You can pass custom HTML or components through the route announcer's default slot.
 
 ```vue
-  <template>
-    <NuxtRouteAnnouncer>
-      <template #default="{ message }">
-        <p>{{ message }} was loaded.</p>
-      </template>
-    </NuxtRouteAnnouncer>
-  </template>
+<template>
+  <NuxtRouteAnnouncer>
+    <template #default="{ message }">
+      <p>{{ message }} was loaded.</p>
+    </template>
+  </NuxtRouteAnnouncer>
+</template>
 ```
 
 ## Props