@nuxt/docs 3.19.2 → 3.20.0

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

@@ -7,7 +7,7 @@ Nuxt layers are a powerful feature that you can use to share and reuse partial N
 
 :read-more{to="/docs/getting-started/layers"}
 
-A minimal Nuxt layer directory should contain a [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file to indicate it is a layer.
+A minimal Nuxt layer directory should contain a [`nuxt.config.ts`](/docs/3.x/guide/directory-structure/nuxt-config) file to indicate it is a layer.
 
 ```ts [base/nuxt.config.ts]
 export default defineNuxtConfig({})
@@ -15,16 +15,16 @@ export default defineNuxtConfig({})
 
 Additionally, certain other files in the layer directory will be auto-scanned and used by Nuxt for the project extending this layer.
 
-- [`components/*`](/docs/guide/directory-structure/components)   - Extend the default components
-- [`composables/*`](/docs/guide/directory-structure/composables)  - Extend the default composables
-- [`layouts/*`](/docs/guide/directory-structure/layouts)  - Extend the default layouts
-- [`middleware/*`](/docs/guide/directory-structure/middleware)  - Extend the default middleware
-- [`pages/*`](/docs/guide/directory-structure/pages)        - Extend the default pages
-- [`plugins/*`](/docs/guide/directory-structure/plugins)        - Extend the default plugins
-- [`server/*`](/docs/guide/directory-structure/server)       - Extend the default server endpoints & middleware
-- [`utils/*`](/docs/guide/directory-structure/utils)   - Extend the default utils
-- [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config)- Extend the default nuxt config
-- [`app.config.ts`](/docs/guide/directory-structure/app-config)  - Extend the default app config
+- [`components/*`](/docs/3.x/guide/directory-structure/components)   - Extend the default components
+- [`composables/*`](/docs/3.x/guide/directory-structure/composables)  - Extend the default composables
+- [`layouts/*`](/docs/3.x/guide/directory-structure/layouts)  - Extend the default layouts
+- [`middleware/*`](/docs/3.x/guide/directory-structure/middleware)  - Extend the default middleware
+- [`pages/*`](/docs/3.x/guide/directory-structure/pages)        - Extend the default pages
+- [`plugins/*`](/docs/3.x/guide/directory-structure/plugins)        - Extend the default plugins
+- [`server/*`](/docs/3.x/guide/directory-structure/server)       - Extend the default server endpoints & middleware
+- [`utils/*`](/docs/3.x/guide/directory-structure/utils)   - Extend the default utils
+- [`nuxt.config.ts`](/docs/3.x/guide/directory-structure/nuxt-config)- Extend the default nuxt config
+- [`app.config.ts`](/docs/3.x/guide/directory-structure/app-config)  - Extend the default app config
 
 ## Basic Example
 
@@ -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.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/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,37 +219,45 @@ 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, './assets/main.css')
-  ]
+    join(currentDir, './assets/main.css'),
+  ],
 })
 ```
 
 ## Multi-Layer Support for Nuxt Modules
 
-You can use the internal array `nuxt.options._layers` to support custom multi-layer handling for your modules.
+You can use the [`getLayerDirectories`](/docs/api/kit/layers#getlayerdirectories) utility from Nuxt Kit to support custom multi-layer handling for your modules.
 
 ```ts [modules/my-module.ts]
+import { defineNuxtModule, getLayerDirectories } from 'nuxt/kit'
+
 export default defineNuxtModule({
-  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)
+  setup (_options, nuxt) {
+    const layerDirs = getLayerDirectories()
+
+    for (const [index, layer] of layerDirs.entries()) {
+      console.log(`Layer ${index}:`)
+      console.log(`  Root: ${layer.root}`)
+      console.log(`  App: ${layer.app}`)
+      console.log(`  Server: ${layer.server}`)
+      console.log(`  Pages: ${layer.appPages}`)
+      // ... other directories
     }
-  }
+  },
 })
 ```
 
 **Notes:**
-- Earlier items in the `_layers` array have higher priority and override later ones
-- The user's project is the first item in the `_layers` array
+- Earlier items in the array have higher priority and override later ones
+- The user's project is the first item in the array
 
 ## Going Deeper
 

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

@@ -5,11 +5,11 @@ description: "In Nuxt, your routing is defined by the structure of your files in
 
 ## Adding custom routes
 
-In Nuxt, your routing is defined by the structure of your files inside the [pages directory](/docs/guide/directory-structure/pages). However, since it uses [vue-router](https://router.vuejs.org) under the hood, Nuxt offers you several ways to add custom routes in your project.
+In Nuxt, your routing is defined by the structure of your files inside the [pages directory](/docs/3.x/guide/directory-structure/pages). However, since it uses [vue-router](https://router.vuejs.org) under the hood, Nuxt offers you several ways to add custom routes in your project.
 
 ### Router Config
 
-Using [router options](/docs/guide/recipes/custom-routing#router-options), you can optionally override or extend your routes using a function that accepts the scanned routes and returns customized routes.
+Using [router options](/docs/3.x/guide/recipes/custom-routing#router-options), you can optionally override or extend your routes using a function that accepts the scanned routes and returns customized routes.
 
 If it returns `null` or `undefined`, Nuxt will fall back to the default routes (useful to modify input array).
 
@@ -18,18 +18,18 @@ 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
 ```
 
 ::note
-Nuxt will not augment any new routes you return from the `routes` function with metadata defined in `definePageMeta` of the component you provide. If you want that to happen, you should use the `pages:extend` hook which is [called at build-time](/docs/api/advanced/hooks#nuxt-hooks-build-time).
+Nuxt will not augment any new routes you return from the `routes` function with metadata defined in `definePageMeta` of the component you provide. If you want that to happen, you should use the `pages:extend` hook which is [called at build-time](/docs/3.x/api/advanced/hooks#nuxt-hooks-build-time).
 ::
 
 ### Pages Hook
@@ -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)
-    }
-  }
+    },
+  },
 })
 ```
 
@@ -75,17 +75,17 @@ export default defineNuxtConfig({
 
 If you plan to add a whole set of pages related with a specific functionality, you might want to use a [Nuxt module](/modules).
 
-The [Nuxt kit](/docs/guide/going-further/kit) provides a few ways [to add routes](/docs/api/kit/pages):
-- [`extendPages`](/docs/api/kit/pages#extendpages) (callback: pages => void)
-- [`extendRouteRules`](/docs/api/kit/pages#extendrouterules) (route: string, rule: NitroRouteConfig, options: ExtendRouteRulesOptions)
+The [Nuxt kit](/docs/3.x/guide/going-further/kit) provides a few ways [to add routes](/docs/3.x/api/kit/pages):
+- [`extendPages`](/docs/3.x/api/kit/pages#extendpages) (callback: pages => void)
+- [`extendRouteRules`](/docs/3.x/api/kit/pages#extendrouterules) (route: string, rule: NitroRouteConfig, options: ExtendRouteRulesOptions)
 
 ## Router Options
 
-On top of customizing options for [`vue-router`](https://router.vuejs.org/api/interfaces/routeroptions.html), Nuxt offers [additional options](/docs/api/nuxt-config#router) to customize the router.
+On top of customizing options for [`vue-router`](https://router.vuejs.org/api/interfaces/routeroptions.html), Nuxt offers [additional options](/docs/3.x/api/nuxt-config#router) to customize the router.
 
 ### Using `app/router.options`
 
-This is the recommended way to specify [router options](/docs/api/nuxt-config#router).
+This is the recommended way to specify [router options](/docs/3.x/api/nuxt-config#router).
 
 ```ts [app/router.options.ts]
 import type { RouterConfig } from '@nuxt/schema'
@@ -109,17 +109,17 @@ export default defineNuxtConfig({
       const resolver = createResolver(import.meta.url)
       // add a route
       files.push({
-        path: resolver.resolve('./runtime/app/router-options'),
-        optional: true
+        path: resolver.resolve('./runtime/router-options'),
+        optional: true,
       })
-    }
-  }
+    },
+  },
 })
 ```
 
 ### Using `nuxt.config`
 
-**Note:** Only JSON serializable [options](/docs/api/nuxt-config#router) are configurable:
+**Note:** Only JSON serializable [options](/docs/3.x/api/nuxt-config#router) are configurable:
 
 - `linkActiveClass`
 - `linkExactActiveClass`
@@ -129,40 +129,40 @@ export default defineNuxtConfig({
 - `hashMode`
 - `scrollBehaviorType`
 
-```js [nuxt.config]
+```ts [nuxt.config]
 export default defineNuxtConfig({
   router: {
-    options: {}
-  }
+    options: {},
+  },
 })
 ```
 
 ### Hash Mode (SPA)
 
-You can enable hash history in SPA mode using the `hashMode` [config](/docs/api/nuxt-config#router). In this mode, router uses a hash character (#) before the actual URL that is internally passed. When enabled, the **URL is never sent to the server** and **SSR is not supported**.
+You can enable hash history in SPA mode using the `hashMode` [config](/docs/3.x/api/nuxt-config#router). In this mode, router uses a hash character (#) before the actual URL that is internally passed. When enabled, the **URL is never sent to the server** and **SSR is not supported**.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   ssr: false,
   router: {
     options: {
-      hashMode: true
-    }
-  }
+      hashMode: true,
+    },
+  },
 })
 ```
 
 ### Scroll Behavior for hash links
 
-You can optionally customize the scroll behavior for hash links. When you set the [config](/docs/api/nuxt-config#router) to be `smooth` and you load a page with a hash link (e.g. `https://example.com/blog/my-article#comments`), you will see that the browser smoothly scrolls to this anchor.
+You can optionally customize the scroll behavior for hash links. When you set the [config](/docs/3.x/api/nuxt-config#router) to be `smooth` and you load a page with a hash link (e.g. `https://example.com/blog/my-article#comments`), you will see that the browser smoothly scrolls to this anchor.
 
 ```ts [nuxt.config.ts]
 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

@@ -28,7 +28,7 @@ First, we need to install the Vite plugin, for our example, we'll use `@rollup/p
 
 ::
 
-Next, we need to import and add it to our [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file:
+Next, we need to import and add it to our [`nuxt.config.ts`](/docs/3.x/guide/directory-structure/nuxt-config) file:
 
 ```ts [nuxt.config.ts]
 import yaml from '@rollup/plugin-yaml'
@@ -36,9 +36,9 @@ import yaml from '@rollup/plugin-yaml'
 export default defineNuxtConfig({
   vite: {
     plugins: [
-      yaml()
-    ]
-  }
+      yaml(),
+    ],
+  },
 })
 ```
 
@@ -63,3 +63,44 @@ import config from '~/data/hello.yaml'
 ```
 
 ::
+
+## Using Vite Plugins in Nuxt Modules
+
+If you're developing a Nuxt module and need to add Vite plugins, you should use the [`addVitePlugin`](/docs/4.x/api/kit/builder#addviteplugin) utility:
+
+```ts [modules/my-module.ts]
+import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
+import yaml from '@rollup/plugin-yaml'
+
+export default defineNuxtModule({
+  setup () {
+    addVitePlugin(yaml())
+  },
+})
+```
+
+For environment-specific plugins in Nuxt 5+, use the `applyToEnvironment()` method:
+
+```ts [modules/my-module.ts]
+import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
+
+export default defineNuxtModule({
+  setup () {
+    addVitePlugin(() => ({
+      name: 'my-client-plugin',
+      applyToEnvironment (environment) {
+        return environment.name === 'client'
+      },
+      // Plugin configuration
+    }))
+  },
+})
+```
+
+::important
+If you're writing code that needs to access resolved Vite configuration, you should use the `config` and `configResolved` hooks _within_ your Vite plugin, rather than using Nuxt's `vite:extend`, `vite:extendConfig` and `vite:configResolved`.
+::
+
+::read-more{to="/docs/4.x/api/kit/builder#addviteplugin"}
+Read more about `addVitePlugin` in the Nuxt Kit documentation.
+::

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

@@ -6,13 +6,13 @@ description: How to create a custom fetcher for calling your external API in Nux
 
 When working with Nuxt, you might be making the frontend and fetching an external API, and you might want to set some default options for fetching from your API.
 
-The [`$fetch`](/docs/api/utils/dollarfetch) utility function (used by the [`useFetch`](/docs/api/composables/use-fetch) composable) is intentionally not globally configurable. This is important so that fetching behavior throughout your application remains consistent, and other integrations (like modules) can rely on the behavior of core utilities like `$fetch`.
+The [`$fetch`](/docs/3.x/api/utils/dollarfetch) utility function (used by the [`useFetch`](/docs/3.x/api/composables/use-fetch) composable) is intentionally not globally configurable. This is important so that fetching behavior throughout your application remains consistent, and other integrations (like modules) can rely on the behavior of core utilities like `$fetch`.
 
 However, Nuxt provides a way to create a custom fetcher for your API (or multiple fetchers if you have multiple APIs to call).
 
 ## Custom `$fetch`
 
-Let's create a custom `$fetch` instance with a [Nuxt plugin](/docs/guide/directory-structure/plugins).
+Let's create a custom `$fetch` instance with a [Nuxt plugin](/docs/3.x/guide/directory-structure/plugins).
 
 ::note
 `$fetch` is a configured instance of [ofetch](https://github.com/unjs/ofetch) which supports adding the base URL of your Nuxt server as well as direct function calls during SSR (avoiding HTTP roundtrips).
@@ -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,
+    },
   }
 })
 ```
@@ -61,7 +61,7 @@ const { data: modules } = await useAsyncData('modules', () => $api('/modules'))
 ```
 
 ::callout
-Wrapping with [`useAsyncData`](/docs/api/composables/use-async-data) **avoid double data fetching when doing server-side rendering** (server & client on hydration).
+Wrapping with [`useAsyncData`](/docs/3.x/api/composables/use-async-data) **avoid double data fetching when doing server-side rendering** (server & client on hydration).
 ::
 
 ## Custom `useFetch`/`useAsyncData`
@@ -71,13 +71,13 @@ Now that `$api` has the logic we want, let's create a `useAPI` composable to rep
 ```ts [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
@@ -164,17 +176,17 @@ export default defineNuxtRouteMiddleware(() => {
 
 Now that we have our app middleware to protect our routes, we can use it on our home page that display our authenticated user information. If the user is not authenticated, they will be redirected to the login page.
 
-We'll use [`definePageMeta`](/docs/api/utils/define-page-meta) to apply the middleware to the route that we want to protect.
+We'll use [`definePageMeta`](/docs/3.x/api/utils/define-page-meta) to apply the middleware to the route that we want to protect.
 
 ```vue [pages/index.vue]
 <script setup lang="ts">
 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>
 ```