docs: enable more blocks for twoslash (#25830)

2024-11-22 05:35:13 +00:00 · 2024-02-16 21:31:15 +01:00 · 2024-02-16 21:31:15 +01:00 · f42045746f
commit f42045746f
parent e817655c14
28 changed files with 460 additions and 180 deletions
--- a/docs/1.getting-started/10.deployment.md
+++ b/docs/1.getting-started/10.deployment.md
@ -98,8 +98,8 @@ Read more about the `nuxi generate` command.

 You can manually specify routes that [Nitro](/docs/guide/concepts/server-engine) will fetch and pre-render during the build or ignore routes that you don't want to pre-render like `/dynamic` in the `nuxt.config` file:

-```ts [nuxt.config.ts]
-defineNuxtConfig({
+```ts twoslash [nuxt.config.ts]
+export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/user/1', '/user/2'],
@ -111,8 +111,8 @@ defineNuxtConfig({

 You can combine this with the `crawlLinks` option to pre-render a set of routes that the crawler can't discover like your `/sitemap.xml` or `/robots.txt`:

-```ts [nuxt.config.ts]
-defineNuxtConfig({
+```ts twoslash [nuxt.config.ts]
+export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
@ -132,7 +132,7 @@ Read more about pre-rendering in the Nitro documentation.

 If you don't want to pre-render your routes, another way of using static hosting is to set the `ssr` property to `false` in the `nuxt.config` file. The `nuxi generate` command will then output an `.output/public/index.html` entrypoint and JavaScript bundles like a classic client-side Vue.js application.

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  ssr: false
 })
@ -150,7 +150,7 @@ In addition to Node.js servers and static hosting services, a Nuxt 3 project can

 You can explicitly set the desired preset in the [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file:

-```js [nuxt.config.ts]
+```js twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  nitro: {
    preset: 'node-server'
--- a/docs/1.getting-started/11.testing.md
+++ b/docs/1.getting-started/11.testing.md
@ -41,7 +41,7 @@ We currently ship an environment for unit testing code that needs a [Nuxt](https

 1. Add `@nuxt/test-utils/module` to your `nuxt.config` file (optional). It adds a Vitest integration to your Nuxt DevTools which supports running your unit tests in development.

-   ```js
+   ```ts twoslash
   export default defineNuxtConfig({
     modules: [
       '@nuxt/test-utils/module'
@ -51,7 +51,7 @@ We currently ship an environment for unit testing code that needs a [Nuxt](https

 2. Create a `vitest.config.ts` with the following content:

-   ```ts
+   ```ts twoslash
   import { defineVitestConfig } from '@nuxt/test-utils/config'
   
   export default defineVitestConfig({
@ -65,7 +65,7 @@ By default, `@nuxt/test-utils` will not change your default Vitest environment,

 You can opt in to a Nuxt environment by adding `.nuxt.` to the test file's name (for example, `my-file.nuxt.test.ts` or `my-file.nuxt.spec.ts`) or by adding `@vitest-environment nuxt` as a comment directly in the test file.

-   ```js
+   ```ts twoslash
   // @vitest-environment nuxt
   import { test } from 'vitest'
   
@ -76,7 +76,7 @@ You can opt in to a Nuxt environment by adding `.nuxt.` to the test file's name

 You can alternatively set `environment: 'nuxt'` in your Vitest configuration to enable the Nuxt environment for **all tests**.

-```js
+```ts twoslash
 // vitest.config.ts
 import { fileURLToPath } from 'node:url'
 import { defineVitestConfig } from '@nuxt/test-utils/config'
@ -99,7 +99,7 @@ export default defineVitestConfig({

 If you have set `environment: 'nuxt'` by default, you can then opt _out_ of the [default environment](https://vitest.dev/guide/environment.html#test-environment) per test file as needed.

-```js
+```ts twoslash
 // @vitest-environment node
 import { test } from 'vitest'

@ -130,7 +130,9 @@ Default `false`, uses [`fake-indexeddb`](https://github.com/dumbmatter/fakeIndex

 These can be configured in the `environmentOptions` section of your `vitest.config.ts` file:

-```js
+```ts twoslash
+import { defineVitestConfig } from '@nuxt/test-utils/config'
+
 export default defineVitestConfig({
  test: {
    environmentOptions: {
@ -143,7 +145,7 @@ export default defineVitestConfig({
    }
  }
 })
-````
+```

 ### 🛠️ Helpers

@ -153,7 +155,12 @@ export default defineVitestConfig({

 `mountSuspended` allows you to mount any Vue component within the Nuxt environment, allowing async setup and access to injections from your Nuxt plugins. For example:

-```ts
+```ts twoslash
+import type { Component } from 'vue'
+import { it, expect } from 'vitest'
+declare const SomeComponent: Component
+declare const App: Component
+// ---cut---
 // tests/components/SomeComponents.nuxt.spec.ts
 import { mountSuspended } from '@nuxt/test-utils/runtime'

@ -187,28 +194,40 @@ The passed in component will be rendered inside a `<div id="test-wrapper"></div>

 Examples:

-```ts
+```ts twoslash
+import type { Component } from 'vue'
+import { it, expect } from 'vitest'
+declare const SomeComponent: Component
+declare const App: Component
+// ---cut---
 // tests/components/SomeComponents.nuxt.spec.ts
 import { renderSuspended } from '@nuxt/test-utils/runtime'
 import { screen } from '@testing-library/vue'

 it('can render some component', async () => {
-    await renderSuspended(SomeComponent)
-    expect(screen.getByText('This is an auto-imported component')).toBeDefined()
+  await renderSuspended(SomeComponent)
+  expect(screen.getByText('This is an auto-imported component')).toBeDefined()
 })
+```

+```ts twoslash
+import type { Component } from 'vue'
+import { it, expect } from 'vitest'
+declare const SomeComponent: Component
+declare const App: Component
+// ---cut---
 // tests/App.nuxt.spec.ts
 import { renderSuspended } from '@nuxt/test-utils/runtime'

 it('can also render an app', async () => {
-    const html = await renderSuspended(App, { route: '/test' })
-    expect(html()).toMatchInlineSnapshot(`
-      "<div id="test-wrapper">
-        <div>This is an auto-imported component</div>
-        <div> I am a global component </div>
-        <div>Index page</div><a href="/test"> Test link </a>
-      </div>"
-    `)
+  const html = await renderSuspended(App, { route: '/test' })
+  expect(html).toMatchInlineSnapshot(`
+    "<div id="test-wrapper">
+      <div>This is an auto-imported component</div>
+      <div> I am a global component </div>
+      <div>Index page</div><a href="/test"> Test link </a>
+    </div>"
+  `)
 })
 ```

@ -216,7 +235,7 @@ it('can also render an app', async () => {

 `mockNuxtImport` allows you to mock Nuxt's auto import functionality. For example, to mock `useStorage`, you can do so like this:

-```ts
+```ts twoslash
 import { mockNuxtImport } from '@nuxt/test-utils/runtime'

 mockNuxtImport('useStorage', () => {
@ -232,7 +251,7 @@ mockNuxtImport('useStorage', () => {

 If you need to mock a Nuxt import and provide different implementations between tests, you can do it by creating and exposing your mocks using [`vi.hoisted`](https://vitest.dev/api/vi.html#vi-hoisted), and then use those mocks in `mockNuxtImport`. You then have access to the mocked imports, and can change the implementation between tests. Be careful to [restore mocks](https://vitest.dev/api/mock.html#mockrestore) before or after each test to undo mock state changes between runs.

-```ts
+```ts twoslash
 import { vi } from 'vitest'
 import { mockNuxtImport } from '@nuxt/test-utils/runtime'

@ -262,7 +281,7 @@ The second argument is a factory function that returns the mocked component.

 For example, to mock `MyComponent`, you can:

-```ts
+```ts twoslash
 import { mockComponent } from '@nuxt/test-utils/runtime'

 mockComponent('MyComponent', {
@ -277,11 +296,11 @@ mockComponent('MyComponent', {
 // relative path or alias also works
 mockComponent('~/components/my-component.vue', async () => {
  // or a factory function
-  return {
+  return defineComponent({
    setup(props) {
      // ...
    }
-  }
+  })
 })

 // or you can use SFC for redirecting to a mock component
@ -292,16 +311,18 @@ mockComponent('MyComponent', () => import('./MockComponent.vue'))

 > **Note**: You can't reference local variables in the factory function since they are hoisted. If you need to access Vue APIs or other variables, you need to import them in your factory function.

-```ts
+```ts twoslash
+import { mockComponent } from '@nuxt/test-utils/runtime'
+
 mockComponent('MyComponent', async () => {
  const { ref, h } = await import('vue')

-  return {
+  return defineComponent({
    setup(props) {
      const counter = ref(0)
      return () => h('div', null, counter.value)
    }
-  }
+  })
 })
 ```

@ -314,7 +335,7 @@ The second argument is a factory function that returns the mocked data.

 For example, to mock `/test/` endpoint, you can do:

-```ts
+```ts twoslash
 import { registerEndpoint } from '@nuxt/test-utils/runtime'

 registerEndpoint("/test/", () => ({
@ -324,7 +345,7 @@ registerEndpoint("/test/", () => ({

 By default, your request will be made using the `GET` method. You may use another method by setting an object as the second argument instead of a function.

-```ts
+```ts twoslash
 import { registerEndpoint } from '@nuxt/test-utils/runtime'

 registerEndpoint("/test/", {
@ -343,7 +364,7 @@ If you would like to use both the end-to-end and unit testing functionality of `

 `app.nuxt.spec.ts`

-```ts
+```ts twoslash
 import { mockNuxtImport } from "@nuxt/test-utils/runtime"

 mockNuxtImport('useStorage', () => {
@ -356,7 +377,7 @@ mockNuxtImport('useStorage', () => {

 `app.e2e.spec.ts`

-```ts
+```ts twoslash
 import { setup, $fetch } from '@nuxt/test-utils/e2e'

 await setup({
@ -374,7 +395,7 @@ For end-to-end testing, we support [Vitest](https://github.com/vitest-dev/vitest

 In each `describe` block where you are taking advantage of the `@nuxt/test-utils/e2e` helper methods, you will need to set up the test context before beginning.

-```ts [test/my-test.spec.ts]
+```ts twoslash [test/my-test.spec.ts]
 import { describe, test } from 'vitest'
 import { setup, $fetch } from '@nuxt/test-utils/e2e'

@ -443,7 +464,7 @@ Please use the options below for the `setup` method.

 Get the HTML of a server-rendered page.

-```ts
+```ts twoslash
 import { $fetch } from '@nuxt/test-utils/e2e'

 const html = await $fetch('/')
@ -453,7 +474,7 @@ const html = await $fetch('/')

 Get the response of a server-rendered page.

-```ts
+```ts twoslash
 import { fetch } from '@nuxt/test-utils/e2e'

 const res = await fetch('/')
@ -464,7 +485,7 @@ const { body, headers } = res

 Get the full URL for a given page (including the port the test server is running on.)

-```ts
+```ts twoslash
 import { url } from '@nuxt/test-utils/e2e'

 const pageUrl = url('/page')
@ -479,7 +500,7 @@ We provide built-in support using Playwright within `@nuxt/test-utils`, but you

 You can create a configured Playwright browser instance, and (optionally) point it at a path from the running server. You can find out more about the API methods available from [in the Playwright documentation](https://playwright.dev/docs/api/class-page).

-```ts
+```ts twoslash
 import { createPage } from '@nuxt/test-utils/e2e'

 const page = await createPage('/page')
--- a/docs/1.getting-started/5.transitions.md
+++ b/docs/1.getting-started/5.transitions.md
@ -117,7 +117,7 @@ Moving to the about page will add the 3d rotation effect:

 You can enable layout transitions to apply an automatic transition for all your [layouts](/docs/guide/directory-structure/layouts).

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  app: {
    layoutTransition: { name: 'layout', mode: 'out-in' }
@ -214,7 +214,7 @@ This produces the following result when navigating between pages:

 Similar to `pageTransition`, you can apply a custom `layoutTransition` to the page component using `definePageMeta`:

-```vue [pages/about.vue]
+```vue twoslash [pages/about.vue]
 <script setup lang="ts">
 definePageMeta({
  layout: 'orange',
--- a/docs/1.getting-started/6.data-fetching.md
+++ b/docs/1.getting-started/6.data-fetching.md
@ -42,7 +42,7 @@ You can add the [`<NuxtLoadingIndicator>`](/docs/api/components/nuxt-loading-ind

 The [`useFetch`](/docs/api/composables/use-fetch) composable is the most straightforward way to perform data fetching.

-```vue [app.vue]
+```vue twoslash [app.vue]
 <script setup lang="ts">
 const { data: count } = await useFetch('/api/count')
 </script>
@ -62,7 +62,7 @@ This composable is a wrapper around the [`useAsyncData`](/docs/api/composables/u

 Nuxt includes the `ofetch` library, and is auto-imported as the `$fetch` alias globally across your application. It's what `useFetch` uses behind the scenes.

-```vue [pages/todos.vue]
+```vue twoslash [pages/todos.vue]
 <script setup lang="ts">
 async function addTodo() {
  const todo = await $fetch('/api/todos', {
@ -171,7 +171,7 @@ If you have not fetched data on the server (for example, with `server: false`),

 By default, data fetching composables will wait for the resolution of their asynchronous function before navigating to a new page by using Vue’s Suspense. This feature can be ignored on client-side navigation with the `lazy` option. In that case, you will have to manually handle loading state using the `pending` value.

-```vue [app.vue]
+```vue twoslash [app.vue]
 <script setup lang="ts">
 const { pending, data: posts } = useFetch('/api/posts', {
  lazy: true
@ -193,7 +193,7 @@ const { pending, data: posts } = useFetch('/api/posts', {

 You can alternatively use [`useLazyFetch`](/docs/api/composables/use-lazy-fetch) and `useLazyAsyncData` as convenient methods to perform the same.

-```vue
+```vue twoslash
 <script setup lang="ts">
 const { pending, data: posts } = useLazyFetch('/api/posts')
 </script>
@ -213,9 +213,9 @@ By default, data fetching composables will perform their asynchronous function o

 Combined with the `lazy` option, this can be useful for data that is not needed on the first render (for example, non-SEO sensitive data).

-```ts
+```ts twoslash
 /* This call is performed before hydration */
-const { article } = await useFetch('api/article')
+const articles = await useFetch('/api/article')

 /* This call will only be performed on the client */
 const { pending, data: posts } = useFetch('/api/comments', {
@ -275,7 +275,7 @@ To get the cached data by key, you can use [`useNuxtData`](/docs/api/composables

 If you want to fetch or refresh data manually, use the `execute` or `refresh` function provided by the composables.

-```vue
+```vue twoslash
 <script setup lang="ts">
 const { data, error, execute, refresh } = await useFetch('/api/users')
 </script>
@ -298,7 +298,7 @@ To globally refetch or invalidate cached data, see [`clearNuxtData`](/docs/api/u

 To re-run your fetching function each time other reactive values in your application change, use the `watch` option. You can use it for one or multiple _watchable_ elements.

-```vue
+```vue twoslash
 <script setup lang="ts">
 const id = ref(1)

--- a/docs/1.getting-started/7.state-management.md
+++ b/docs/1.getting-started/7.state-management.md
@ -33,7 +33,7 @@ Instead use `const useX = () => useState('x')`

 In this example, we use a component-local counter state. Any other component that uses `useState('counter')` shares the same reactive state.

-```vue [app.vue]
+```vue twoslash [app.vue]
 <script setup lang="ts">
 const counter = useState('counter', () => Math.round(Math.random() * 1000))
 </script>
@ -61,7 +61,7 @@ To globally invalidate cached state, see [`clearNuxtState`](/docs/api/utils/clea

 Most of the time, you will want to initialize your state with data that resolves asynchronously. You can use the [`app.vue`](/docs/guide/directory-structure/app) component with the [`callOnce`](/docs/api/utils/call-once) util to do so.

-```vue [app.vue]
+```vue twoslash [app.vue]
 <script setup lang="ts">
 const websiteConfig = useState('config')

@ -191,13 +191,16 @@ const date = useLocaleDate(new Date('2016-10-26'))

 By using [auto-imported composables](/docs/guide/directory-structure/composables) we can define global type-safe states and import them across the app.

-```ts [composables/states.ts]
+```ts twoslash [composables/states.ts]
 export const useCounter = () => useState<number>('counter', () => 0)
 export const useColor = () => useState<string>('color', () => 'pink')
 ```

 ```vue [app.vue]
 <script setup lang="ts">
+// ---cut-start---
+const useColor = () => useState<string>('color', () => 'pink')
+// ---cut-end---
 const color = useColor() // Same as useState('color')
 </script>

--- a/docs/1.getting-started/8.error-handling.md
+++ b/docs/1.getting-started/8.error-handling.md
@ -23,7 +23,7 @@ In addition, Nuxt provides a [`vue:error`](/docs/api/advanced/hooks#app-hooks-ru

 If you are using an error reporting framework, you can provide a global handler through [`vueApp.config.errorHandler`](https://vuejs.org/api/application.html#app-config-errorhandler). It will receive all Vue errors, even if they are handled.

-```ts [plugins/error-handler.ts]
+```ts twoslash [plugins/error-handler.ts]
 export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.config.errorHandler = (error, instance, info) => {
    // handle error, e.g. report to a service
@ -84,6 +84,8 @@ Discover all the Nuxt lifecycle hooks.

 Customize the default error page by adding `~/error.vue` in the source directory of your application, alongside `app.vue`.

+<!-- TODO:twoslash: Twoslash does not support tsconfig paths yet -->
+
 ```vue [error.vue]
 <script setup lang="ts">
 import type { NuxtError } from '#app'
@ -109,7 +111,7 @@ Read more about `error.vue` and its uses.

 For custom errors we highly recommend to use `onErrorCaptured` composable that can be called in a page/component setup function or `vue:error` runtime nuxt hook that can be configured in a nuxt plugin.

-```ts [plugins/error-handler.ts]
+```ts twoslash [plugins/error-handler.ts]
 export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.hook('vue:error', (err) => {
    //
@ -153,7 +155,7 @@ If you throw an error created with `createError`:
 - on server-side, it will trigger a full-screen error page which you can clear with [`clearError`](#clearerror).
 - on client-side, it will throw a non-fatal error for you to handle. If you need to trigger a full-screen error page, then you can do this by setting `fatal: true`.

-```vue [pages/movies/[slug\\].vue]
+```vue twoslash [pages/movies/[slug\\].vue]
 <script setup lang="ts">
 const route = useRoute()
 const { data } = await useFetch(`/api/movies/${route.params.slug}`)
--- a/docs/1.getting-started/8.server.md
+++ b/docs/1.getting-started/8.server.md
@ -26,7 +26,7 @@ You can easily manage the server-only part of your Nuxt app, from API endpoints

 Both endpoints and middleware can be defined like this:

-```ts [server/api/test.ts]
+```ts twoslash [server/api/test.ts]
 export default defineEventHandler(async (event) => {
  // ... Do whatever you want here
 })
@ -63,7 +63,7 @@ Or for other runtimes:

 Nitro has a powerful feature called `routeRules` which allows you to define a set of rules to customize how each route of your Nuxt app is rendered (and more).

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  routeRules: {
    // Generated at build time for SEO purpose
--- a/docs/1.getting-started/9.layers.md
+++ b/docs/1.getting-started/9.layers.md
@ -19,7 +19,7 @@ One of the core features of Nuxt 3 is the layers and extending support. You can

 You can extend a layer by adding the [extends](/docs/api/nuxt-config#extends) property to the [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file.

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  extends: [
    '../base',                     // Extend from a local layer
--- a/docs/2.guide/1.concepts/1.auto-imports.md
+++ b/docs/2.guide/1.concepts/1.auto-imports.md
@ -5,7 +5,7 @@ description: "Nuxt auto-imports components, composables, helper functions and Vu

 Nuxt auto-imports components, composables and [Vue.js APIs](https://vuejs.org/api) to use across your application without explicitly importing them.

-```vue [app.vue]
+```vue twoslash [app.vue]
 <script setup lang="ts">
 const count = ref(1) // ref is auto-imported
 </script>
@ -31,7 +31,7 @@ You can also auto-import functions exported from custom folders or third-party p

 Nuxt auto-imports functions and composables to perform [data fetching](/docs/getting-started/data-fetching), get access to the [app context](/docs/api/composables/use-nuxt-app) and [runtime config](/docs/guide/going-further/runtime-config), manage [state](/docs/getting-started/state-management) or define components and plugins.

-```vue
+```vue twoslash
 <script setup lang="ts">
 /* useAsyncData() and $fetch() are auto-imported */
 const { data, refresh, pending } = await useFetch('/api/hello')
@ -40,7 +40,7 @@ const { data, refresh, pending } = await useFetch('/api/hello')

 Vue 3 exposes Reactivity APIs like `ref` or `computed`, as well as lifecycle hooks and helpers that are auto-imported by Nuxt.

-```vue
+```vue twoslash
 <script setup lang="ts">
 /* ref() and computed() are auto-imported */
 const count = ref(1)
@ -70,7 +70,7 @@ See the full explanation in this GitHub comment.

 **Example of breaking code:**

-```ts [composables/example.ts]
+```ts twoslash [composables/example.ts]
 // trying to access runtime config outside a composable
 const config = useRuntimeConfig()

@ -81,7 +81,7 @@ export const useMyComposable = () => {

 **Example of working code:**

-```ts [composables/example.ts]
+```ts twoslash [composables/example.ts]
 export const useMyComposable = () => {
  // Because your composable is called in the right place in the lifecycle,
  // useRuntimeConfig will also work
@ -105,6 +105,8 @@ Nuxt directly auto-imports files created in defined directories:

 Nuxt exposes every auto-import with the `#imports` alias that can be used to make the import explicit if needed:

+<!-- TODO:twoslash: Twoslash does not support tsconfig paths yet -->
+
 ```vue
 <script setup lang="ts">
 import { ref, computed } from '#imports'
@ -118,7 +120,7 @@ const double = computed(() => count.value * 2)

 If you want to disable auto-importing composables and utilities, you can set `imports.autoImport` to `false` in the `nuxt.config` file.

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  imports: {
    autoImport: false
@ -136,7 +138,7 @@ Nuxt also automatically imports components from your `~/components` directory, a

 To disable auto-importing components from your own `~/components` directory, you can set `components.dirs` to an empty array (though note that this will not affect components added by modules).

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  components: {
    dirs: []
@ -154,7 +156,7 @@ If you are using the Nuxt module for that package, it is likely that the module

 For example, you could enable the auto-import of the `useI18n` composable from the `vue-i18n` package like this:

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  imports: {
    presets: [
--- a/docs/2.guide/1.concepts/2.vuejs-development.md
+++ b/docs/2.guide/1.concepts/2.vuejs-development.md
@ -61,7 +61,7 @@ This way, a minimal Vue 3 application can be reduced to 12 kb gzipped.

 The only way to provide data and logic to components in Vue 2 was through the Options API, which allows you to return data and methods to a template with pre-defined properties like `data` and `methods`:

-```vue
+```vue twoslash
 <script>
 export default {
  data() {
@ -82,7 +82,7 @@ The [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html) i

 Used with the `setup` keyword in the `<script>` definition, here is the above component rewritten with Composition API and Nuxt 3’s auto-imported Reactivity APIs:

-```vue [components/Counter.vue]
+```vue twoslash [components/Counter.vue]
 <script setup lang="ts">
 const count = ref(0)
 const increment = () => count.value++
--- a/docs/2.guide/1.concepts/3.rendering.md
+++ b/docs/2.guide/1.concepts/3.rendering.md
@ -79,7 +79,7 @@ Nuxt 3 includes route rules and hybrid rendering support. Using route rules you

 Nuxt server will automatically register corresponding middleware and wrap routes with cache handlers using [Nitro caching layer](https://nitro.unjs.io/guide/cache).

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  routeRules: {
    // Homepage pre-rendered at build time
--- a/docs/2.guide/1.concepts/5.modules.md
+++ b/docs/2.guide/1.concepts/5.modules.md
@ -19,7 +19,7 @@ Explore Nuxt Modules

 Once you have installed the modules you can add them to your [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file under the `modules` property. Module developers usually provide additional steps and details for usage.

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  modules: [
    // Using package name (recommended usage)
@ -29,7 +29,7 @@ export default defineNuxtConfig({
    './modules/example',

    // Add module with inline-options
-    ['./modules/example', { token: '123' }]
+    ['./modules/example', { token: '123' }],

    // Inline module definition
    async (inlineOptions, nuxt) => { }
--- a/docs/2.guide/1.concepts/7.esm.md
+++ b/docs/2.guide/1.concepts/7.esm.md
@ -117,7 +117,7 @@ If you encounter these errors, the issue is almost certainly with the upstream l

 In the meantime, you can tell Nuxt not to try to import these libraries by adding them to `build.transpile`:

-```js
+```ts twoslash
 export default defineNuxtConfig({
  build: {
    transpile: ['sample-library']
@ -131,7 +131,7 @@ You may find that you _also_ need to add other packages that are being imported

 In some cases, you may also need to manually alias the library to the CJS version, for example:

-```js
+```ts twoslash
 export default defineNuxtConfig({
  alias: {
    'sample-library': 'sample-library/dist/sample-library.cjs.js'
--- a/docs/2.guide/1.concepts/8.typescript.md
+++ b/docs/2.guide/1.concepts/8.typescript.md
@ -37,7 +37,7 @@ npx nuxi typecheck

 To enable type-checking at build time, you can also use the [`typescript.typeCheck`](/docs/api/nuxt-config#typecheck) option in your `nuxt.config` file:

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  typescript: {
    typeCheck: true
@ -80,7 +80,7 @@ Once you’ve converted your codebase to TypeScript and felt familiar with it, y

 In order to enable strict type checking, you have to update `nuxt.config`:

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  typescript: {
    strict: true
--- a/docs/2.guide/2.directory-structure/1.components.md
+++ b/docs/2.guide/2.directory-structure/1.components.md
@ -46,12 +46,12 @@ For clarity, we recommend that the component's filename matches its name. So, in

 If you want to auto-import components based only on its name, not path, then you need to set `pathPrefix` option to `false` using extended form of the configuration object:

-```diff [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  components: [
    {
      path: '~/components',
-+     pathPrefix: false,
+      pathPrefix: false, // [!code ++]
    },
  ],
 });
@ -144,7 +144,7 @@ const show = ref(false)

 By default, only the `~/components` directory is scanned. If you want to add other directories, or change how the components are scanned within a subfolder of this directory, you can add additional directories to the configuration:

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  components: [
    // ~/calendar-module/components/event/Update.vue => <EventUpdate />
@ -172,7 +172,7 @@ If you want to auto-import components from an npm package, you can use [`addComp

 ::code-group

-```ts [~/modules/register-component.ts]
+```ts twoslash [~/modules/register-component.ts]
 import { addComponent, defineNuxtModule } from '@nuxt/kit'

 export default defineNuxtModule({
@ -207,12 +207,12 @@ Any nested directories need to be added first as they are scanned in order.
 By default, any file with an extension specified in the [extensions key of `nuxt.config.ts`](/docs/api/nuxt-config#extensions) is treated as a component.
 If you need to restrict the file extensions that should be registered as components, you can use the extended form of the components directory declaration and its `extensions` key:

-```diff
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  components: [
    {
      path: '~/components',
-+     extensions: ['.vue'],
+      extensions: ['.vue'], // [!code ++]
    }
  ]
 })
@ -227,7 +227,7 @@ If a component is meant to be rendered only client-side, you can add the `.clien
 --| Comments.client.vue
 ```

-```html [pages/example.vue]
+```vue [pages/example.vue]
 <template>
  <div>
    <!-- this component will only be rendered on client side -->
@ -266,7 +266,7 @@ When their props update, this will result in a network request that will update

 Server components are currently experimental and in order to use them, you need to enable the 'component islands' feature in your nuxt.config:

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  experimental: {
    componentIslands: true
@ -281,7 +281,7 @@ Now you can register server-only components with the `.server` suffix and use th
 --| HighlightedMarkdown.server.vue
 ```

-```html [pages/example.vue]
+```vue [pages/example.vue]
 <template>
  <div>
    <!--
@ -303,7 +303,7 @@ This feature needs `experimental.componentIslands.selectiveClient` within your c

 You can partially hydrate a component by setting a `nuxt-client` attribute on the component you wish to be loaded client-side.

-```html [components/ServerWithClient.vue]
+```vue [components/ServerWithClient.vue]
 <template>
  <div>
    <HighlightedMarkdown markdown="# Headline" />
@ -344,7 +344,7 @@ In this case, the `.server` + `.client` components are two 'halves' of a compone
 --| Comments.server.vue
 ```

-```html [pages/example.vue]
+```vue [pages/example.vue]
 <template>
  <div>
    <!-- this component will render Comments.server on the server then Comments.client once mounted in the browser -->
@ -357,7 +357,7 @@ In this case, the `.server` + `.client` components are two 'halves' of a compone

 Nuxt provides the [`<ClientOnly>`](/docs/api/components/client-only) component for purposely rendering a component only on client side.

-```html [pages/example.vue]
+```vue [pages/example.vue]
 <template>
  <div>
    <Sidebar />
@ -371,7 +371,7 @@ Nuxt provides the [`<ClientOnly>`](/docs/api/components/client-only) component f

 Use a slot as fallback until `<ClientOnly>` is mounted on client side.

-```html [pages/example.vue]
+```vue [pages/example.vue]
 <template>
  <div>
    <Sidebar />
@ -389,9 +389,11 @@ Use a slot as fallback until `<ClientOnly>` is mounted on client side.
 ```

 <!-- TODO: Add back after passing treeshakeClientOnly experiment -->
-<!-- ::callout
+<!--
+::callout
 Make sure not to _nest_ `<ClientOnly>` components or other client-only components. Nuxt performs an optimization to remove the contents of these components from the server-side render, which can break in this case.
-:: -->
+::
+-->

 ## `<DevOnly>` Component

@ -399,7 +401,7 @@ Nuxt provides the `<DevOnly>` component to render a component only during develo

 The content will not be included in production builds and tree-shaken.

-```html [pages/example.vue]
+```vue [pages/example.vue]
 <template>
  <div>
    <Sidebar />
@ -422,7 +424,7 @@ The content will not be included in production builds and tree-shaken.
 Nuxt provides the `<NuxtClientFallback>` component to render its content on the client if any of its children trigger an error in SSR.
 You can specify a `fallbackTag` to make it render a specific tag if it fails to render on the server.

-```html [pages/example.vue]
+```vue [pages/example.vue]
 <template>
  <div>
    <Sidebar />
@ -457,7 +459,7 @@ Imagine a directory structure like this:

 Then in `awesome-ui/nuxt.js` you can use the `components:dirs` hook:

-```ts
+```ts twoslash
 import { defineNuxtModule, createResolver } from '@nuxt/kit'

 export default defineNuxtModule({
@ -476,7 +478,7 @@ export default defineNuxtModule({

 That's it! Now in your project, you can import your UI library as a Nuxt module in your `nuxt.config` file:

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  modules: ['awesome-ui/nuxt']
 })
--- a/docs/2.guide/2.directory-structure/1.composables.md
+++ b/docs/2.guide/2.directory-structure/1.composables.md
@ -105,7 +105,7 @@ export { utils } from './nested/utils.ts'

 **Example:** Scan nested directories inside the `composables/` folder:

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  imports: {
    dirs: [
--- a/docs/2.guide/2.directory-structure/1.layouts.md
+++ b/docs/2.guide/2.directory-structure/1.layouts.md
@ -66,7 +66,7 @@ In a layout file, the content of the page will be displayed in the `<slot />` co

 Then you can use the `custom` layout in your page:

-```vue [pages/about.vue]
+```vue twoslash [pages/about.vue]
 <script setup lang="ts">
 definePageMeta({
  layout: 'custom'
@ -115,7 +115,7 @@ File | Layout Name

 You can also use the [`setPageLayout`](/docs/api/utils/set-page-layout) helper to change the layout dynamically:

-```vue
+```vue twoslash
 <script setup lang="ts">
 function enableCustomLayout () {
  setPageLayout('custom')
--- a/docs/2.guide/2.directory-structure/1.middleware.md
+++ b/docs/2.guide/2.directory-structure/1.middleware.md
@ -27,7 +27,7 @@ Route middleware run within the Vue part of your Nuxt app. Despite the similar n

 Route middleware are navigation guards that receive the current route and the next route as arguments.

-```ts [middleware/my-middleware.ts]
+```ts twoslash [middleware/my-middleware.ts]
 export default defineNuxtRouteMiddleware((to, from) => {
  if (to.params.id === '1') {
    return abortNavigation()
@ -79,7 +79,7 @@ middleware/
 --| auth.ts
 ```

-```vue [pages/profile.vue]
+```vue twoslash [pages/profile.vue]
 <script setup lang="ts">
 definePageMeta({
  middleware: [
@ -122,7 +122,7 @@ 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:

-```js [middleware/example.ts]
+```ts twoslash [middleware/example.ts]
 export default defineNuxtRouteMiddleware(to => {
  // skip middleware on server
  if (process.server) return
@ -138,7 +138,7 @@ export default defineNuxtRouteMiddleware(to => {

 It is possible to add global or named route middleware manually using the [`addRouteMiddleware()`](/docs/api/utils/add-route-middleware) helper function, such as from within a plugin.

-```ts
+```ts twoslash
 export default defineNuxtPlugin(() => {
  addRouteMiddleware('global-test', () => {
    console.log('this global middleware was added in a plugin and will be run on every route change')
@ -159,7 +159,7 @@ export default defineNuxtPlugin(() => {

 In your page file, you can reference this route middleware:

-```vue
+```vue twoslash
 <script setup lang="ts">
 definePageMeta({
  middleware: ["auth"]
@ -176,7 +176,7 @@ Now, before navigation to that page can complete, the `auth` route middleware wi

 Instead of using `definePageMeta` on each page, you can add named route middleware within the `pages:extend` hook.

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 import type { NuxtPage } from 'nuxt/schema'

 export default defineNuxtConfig({
--- a/docs/2.guide/2.directory-structure/1.modules.md
+++ b/docs/2.guide/2.directory-structure/1.modules.md
@ -15,7 +15,7 @@ You don't need to add those local modules to your [`nuxt.config.ts`](/docs/guide

 ::code-group

-```ts [modules/hello/index.ts]
+```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'
@ -36,7 +36,7 @@ export default defineNuxtModule({
 })
 ```

-```ts [modules/hello/runtime/api-route.ts]
+```ts twoslash [modules/hello/runtime/api-route.ts]
 export default defineEventHandler(() => {
  return { hello: 'world' }
 })
--- a/docs/2.guide/2.directory-structure/1.pages.md
+++ b/docs/2.guide/2.directory-structure/1.pages.md
@ -23,7 +23,7 @@ Nuxt will automatically create a route for every page in your `~/pages/` directo
 </template>
 ```

-```ts [pages/index.ts]
+```ts twoslash [pages/index.ts]
 // https://vuejs.org/guide/extras/render-function.html
 export default defineComponent({
  render () {
@ -32,7 +32,7 @@ export default defineComponent({
 })
 ```

-```ts [pages/index.tsx]
+```tsx twoslash [pages/index.tsx]
 // https://nuxt.com/docs/examples/advanced/jsx
 // https://vuejs.org/guide/extras/render-function.html#jsx-tsx
 export default defineComponent({
@ -120,7 +120,7 @@ Navigating to `/users-admins/123` would render:

 If you want to access the route using Composition API, there is a global [`useRoute`](/docs/api/composables/use-route) function that will allow you to access the route just like `this.$route` in the Options API.

-```vue
+```vue twoslash
 <script setup lang="ts">
 const route = useRoute()

@ -184,7 +184,7 @@ This file tree will generate these routes:

 To display the `child.vue` component, you have to insert the `<NuxtPage>` component inside `pages/parent.vue`:

-```html{}[pages/parent.vue]
+```vue {}[pages/parent.vue]
 <template>
  <div>
    <h1>I am the parent view</h1>
@ -197,7 +197,7 @@ To display the `child.vue` component, you have to insert the `<NuxtPage>` compon

 If you want more control over when the `<NuxtPage>` component is re-rendered (for example, for transitions), you can either pass a string or function via the `pageKey` prop, or you can define a `key` value via `definePageMeta`:

-```html{}[pages/parent.vue]
+```vue {}[pages/parent.vue]
 <template>
  <div>
    <h1>I am the parent view</h1>
@ -208,7 +208,7 @@ If you want more control over when the `<NuxtPage>` component is re-rendered (fo

 Or alternatively:

-```html{}[pages/child.vue]
+```vue twoslash {}[pages/child.vue]
 <script setup lang="ts">
 definePageMeta({
  key: route => route.fullPath
@ -222,7 +222,7 @@ definePageMeta({

 You might want to define metadata for each route in your app. You can do this using the `definePageMeta` macro, which will work both in `<script>` and in `<script setup>`:

-```vue
+```vue twoslash
 <script setup lang="ts">
 definePageMeta({
  title: 'My home page'
@ -232,7 +232,7 @@ definePageMeta({

 This data can then be accessed throughout the rest of your app from the `route.meta` object.

-```vue
+```vue twoslash
 <script setup lang="ts">
 const route = useRoute()

@ -322,7 +322,7 @@ This component is included with Nuxt and therefore you don't have to import it a

 A simple link to the `index.vue` page in your `pages` folder:

-```html
+```vue
 <template>
  <NuxtLink to="/">Home page</NuxtLink>
 </template>
@ -340,7 +340,7 @@ Nuxt 3 allows programmatic navigation through the `navigateTo()` utility method.
 Ensure to always `await` on `navigateTo` or chain its result by returning from functions.
 ::

-```vue
+```vue twoslash
 <script setup lang="ts">
 const name = ref('');
 const type = ref(1);
@ -377,13 +377,13 @@ However, you can use [Nuxt Layers](/docs/getting-started/layers) to create group
 -| nuxt.config.ts
 ```

-```ts [some-app/nuxt.config.ts]
+```ts twoslash [some-app/nuxt.config.ts]
 // some-app/nuxt.config.ts
 export default defineNuxtConfig({
 })
 ```

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  extends: ['./some-app'],
 })
--- a/docs/2.guide/2.directory-structure/1.plugins.md
+++ b/docs/2.guide/2.directory-structure/1.plugins.md
@ -19,7 +19,7 @@ You can use `.server` or `.client` suffix in the file name to load a plugin only

 Only files at the top level of the directory (or index files within any subdirectories) will be auto-registered as plugins.

-```bash [Directory sturcture]
+```bash [Directory structure]
 -| plugins/
 ---| foo.ts      // scanned
 ---| bar/
@ -32,7 +32,7 @@ Only `foo.ts` and `bar/index.ts` would be registered.

 To add plugins in subdirectories, you can use the [`plugins`](/docs/api/nuxt-config#plugins-1) option in `nuxt.config.ts`:

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  plugins: [
    '~/plugins/bar/baz',
@ -45,7 +45,7 @@ export default defineNuxtConfig({

 The only argument passed to a plugin is [`nuxtApp`](/docs/api/composables/use-nuxt-app).

-```ts [plugins/hello.ts]
+```ts twoslash [plugins/hello.ts]
 export default defineNuxtPlugin(nuxtApp => {
  // Doing something with nuxtApp
 })
@ -55,7 +55,7 @@ export default defineNuxtPlugin(nuxtApp => {

 It is also possible to define a plugin using an object syntax, for more advanced use cases. For example:

-```ts [plugins/hello.ts]
+```ts twoslash [plugins/hello.ts]
 export default defineNuxtPlugin({
  name: 'my-plugin',
  enforce: 'pre', // or 'post'
@ -105,7 +105,7 @@ In case you're new to 'alphabetical' numbering, remember that filenames are sort

 By default, Nuxt loads plugins sequentially. You can define a plugin as `parallel` so Nuxt won't wait the end of the plugin's execution before loading the next plugin.

-```ts [plugins/my-plugin.ts]
+```ts twoslash [plugins/my-plugin.ts]
 export default defineNuxtPlugin({
  name: 'my-plugin',
  parallel: true,
@ -119,10 +119,10 @@ export default defineNuxtPlugin({

 If a plugin needs to await a parallel plugin before it runs, you can add the plugin's name to the `dependsOn` array.

-```ts [plugins/depending-on-my-plugin.ts]
+```ts twoslash [plugins/depending-on-my-plugin.ts]
 export default defineNuxtPlugin({
  name: 'depends-on-my-plugin',
-  dependsOn: ['my-plugin']
+  dependsOn: ['my-plugin'],
  async setup (nuxtApp) {
    // this plugin will wait for the end of `my-plugin`'s execution before it runs
  }
@ -158,7 +158,7 @@ Normally, Vue.js composables are bound to the current component instance while p
 If you would like to provide a helper on the [`NuxtApp`](/docs/api/composables/use-nuxt-app) instance, return it from the plugin under a `provide` key.

 ::code-group
-```ts [plugins/hello.ts]
+```ts twoslash [plugins/hello.ts]
 export default defineNuxtPlugin(() => {
  return {
    provide: {
@ -167,7 +167,7 @@ export default defineNuxtPlugin(() => {
  }
 })
 ```
-```ts [plugins/hello-object-syntax.ts]
+```ts twoslash [plugins/hello-object-syntax.ts]
 export default defineNuxtPlugin({
  name: 'hello',
  setup () {
@ -275,7 +275,7 @@ export default defineNuxtPlugin((nuxtApp) => {

 Similarly, you can register a custom Vue directive in a plugin.

-```ts [plugins/my-directive.ts]
+```ts twoslash [plugins/my-directive.ts]
 export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('focus', {
    mounted (el) {
--- a/docs/2.guide/2.directory-structure/1.server.md
+++ b/docs/2.guide/2.directory-structure/1.server.md
@ -21,7 +21,7 @@ Each file should export a default function defined with `defineEventHandler()` o

 The handler can directly return JSON data, a `Promise`, or use `event.node.res.end()` to send a response.

-```ts [server/api/hello.ts]
+```ts twoslash [server/api/hello.ts]
 export default defineEventHandler((event) => {
  return {
    hello: 'world'
--- a/docs/2.guide/2.directory-structure/1.utils.md
+++ b/docs/2.guide/2.directory-structure/1.utils.md
@ -11,7 +11,7 @@ The main purpose of the [`utils/` directory](/docs/guide/directory-structure/uti

 **Method 1:** Using named export

-```js [utils/index.ts]
+```ts twoslash [utils/index.ts]
 export const { format: formatNumber } = Intl.NumberFormat('en-GB', {
  notation: 'compact',
  maximumFractionDigits: 1
@ -20,7 +20,7 @@ export const { format: formatNumber } = Intl.NumberFormat('en-GB', {

 **Method 2:** Using default export

-```js [utils/random-entry.ts or utils/randomEntry.ts]
+```ts twoslash [utils/random-entry.ts or utils/randomEntry.ts]
 // It will be available as randomEntry() (camelCase of file name without extension)
 export default function (arr: Array<any>) {
  return arr[Math.floor(Math.random() * arr.length)]
--- a/docs/2.guide/2.directory-structure/3.app-config.md
+++ b/docs/2.guide/2.directory-structure/3.app-config.md
@ -9,7 +9,7 @@ Nuxt 3 provides an `app.config` config file to expose reactive configuration wit

 You can easily provide runtime app configuration using `app.config.ts` file. It can have either of `.ts`, `.js`, or `.mjs` extensions.

-```ts [app.config.ts]
+```ts twoslash [app.config.ts]
 export default defineAppConfig({
  foo: 'bar'
 })
@ -23,7 +23,7 @@ Do not put any secret values inside `app.config` file. It is exposed to the user

 To expose config and environment variables to the rest of your app, you will need to define configuration in `app.config` file.

-```ts [app.config.ts]
+```ts twoslash [app.config.ts]
 export default defineAppConfig({
  theme: {
    primaryColor: '#ababab'
@ -106,14 +106,14 @@ Here's an example of how you can use:

 ::code-group

-```ts [layer/app.config.ts]
+```ts twoslash [layer/app.config.ts]
 export default defineAppConfig({
  // Default array value
  array: ['hello'],
 })
 ```

-```ts [app.config.ts]
+```ts twoslash [app.config.ts]
 export default defineAppConfig({
  // Overwrite default array value by using a merger function
  array: () => ['bonjour'],
--- a/docs/2.guide/2.directory-structure/3.nuxt-config.md
+++ b/docs/2.guide/2.directory-structure/3.nuxt-config.md
@ -7,7 +7,7 @@ navigation.icon: i-ph-file-duotone

 The `nuxt.config` file extension can either be `.js`, `.ts` or `.mjs`.

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  // My Nuxt config
 })
@ -19,7 +19,7 @@ export default defineNuxtConfig({

 You can explicitly import `defineNuxtConfig` from `nuxt/config` if you prefer:

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 import { defineNuxtConfig } from 'nuxt/config'

 export default defineNuxtConfig({
--- a/docs/2.guide/3.going-further/1.experimental-features.md
+++ b/docs/2.guide/3.going-further/1.experimental-features.md
@ -15,7 +15,7 @@ Note that these features are experimental and could be removed or modified in th

 Enable native async context to be accessible for nested composables in Nuxt and in Nitro. This opens the possibility to use composables inside async composables and reduce the chance to get the `Nuxt instance is unavailable` error.

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  experimental: {
    asyncContext: true
@ -31,7 +31,7 @@ See full explanation on the GitHub pull-request.

 Enables generation of an async entry point for the Vue bundle, aiding module federation support.

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  experimental: {
    asyncEntry: true
@ -45,7 +45,7 @@ Externalizes `vue`, `@vue/*` and `vue-router` when building.

 *Enabled by default.*

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  experimental: {
    externalVue: true
@ -63,7 +63,7 @@ Tree shakes contents of client-only components from server bundle.

 *Enabled by default.*

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  experimental: {
    treeshakeClientOnly: true
@ -77,7 +77,7 @@ Emits `app:chunkError` hook when there is an error loading vite/webpack chunks.

 You can disable automatic handling by setting this to `false`, or handle chunk errors manually by setting it to `manual`.

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  experimental: {
    emitRouteChunkError: 'automatic' // or 'manual' or false
@ -96,7 +96,7 @@ Consider carefully before enabling this as it can cause unexpected behavior,
 and consider providing explicit keys to [`useState`](/docs/api/composables/use-state) as auto-generated keys may not match across builds.
 ::

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  experimental: {
    restoreState: true
@ -108,7 +108,7 @@ export default defineNuxtConfig({

 Define route rules at the page level using [`defineRouteRules`](/docs/api/utils/define-route-rules).

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  experimental: {
    inlineRouteRules: true
@ -130,7 +130,7 @@ Allows rendering of JSON payloads with support for revivifying complex types.

 *Enabled by default.*

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  experimental: {
    renderJsonPayloads: true
@ -142,7 +142,7 @@ export default defineNuxtConfig({

 Disables Vue server renderer endpoint within Nitro.

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  experimental: {
    noVueServer: true
@ -154,7 +154,7 @@ export default defineNuxtConfig({

 Enables extraction of payloads of pages generated with `nuxt generate`.

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  experimental: {
    payloadExtraction: true
@ -166,7 +166,7 @@ export default defineNuxtConfig({

 Enables the experimental [`<NuxtClientFallback>`](/docs/api/components/nuxt-client-fallback) component for rendering content on the client if there's an error in SSR.

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  experimental: {
    clientFallback: true
@ -178,7 +178,7 @@ export default defineNuxtConfig({

 Enables cross-origin prefetch using the Speculation Rules API.

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  experimental: {
    crossOriginPrefetch: true
@ -194,7 +194,7 @@ Read more about the **Speculation Rules API**.

 Enables View Transition API integration with client-side router.

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  experimental: {
    viewTransition: true
@ -212,7 +212,7 @@ Read more about the **View Transition API**.

 Enables writing of early hints when using node server.

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  experimental: {
    writeEarlyHints: true
@ -224,7 +224,7 @@ export default defineNuxtConfig({

 Enables experimental component islands support with [`<NuxtIsland>`](/docs/api/components/nuxt-island) and `.island.vue` files.

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  experimental: {
    componentIslands: true // false or 'local+remote'
@ -244,7 +244,7 @@ Enables config schema support.

 *Enabled by default.*

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  experimental: {
    configSchema: true
@ -256,7 +256,7 @@ export default defineNuxtConfig({

 Adds a compatibility layer for modules, plugins, or user code relying on the old `@vueuse/head` API.

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  experimental: {
    polyfillVueUseHead: false
@ -268,7 +268,7 @@ export default defineNuxtConfig({

 Allow disabling Nuxt SSR responses by setting the `x-nuxt-no-ssr` header.

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  experimental: {
    respectNoSSRHeader: false
@ -282,7 +282,7 @@ Resolve `~`, `~~`, `@` and `@@` aliases located within layers with respect to th

 *Enabled by default.*

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  experimental: {
    localLayerAliases: true
@ -294,7 +294,7 @@ export default defineNuxtConfig({

 Enable the new experimental typed router using [`unplugin-vue-router`](https://github.com/posva/unplugin-vue-router).

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
  experimental: {
    typedPages: true
@ -318,7 +318,7 @@ performance in large projects or on Windows platforms.

 You can also set this to `chokidar` to watch all files in your source directory.

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({ 
  experimental: { 
    watcher: 'chokidar-granular' // 'chokidar' or 'parcel' are also options
@ -332,7 +332,7 @@ Enabling this feature automatically shares payload *data* between pages that are
 in a significant performance improvement when prerendering sites that use `useAsyncData` or `useFetch` and
 fetch the same data in different pages.

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({ 
  experimental: { 
    sharedPrerenderData: true
@ -382,7 +382,7 @@ This only works with static or strings/arrays rather than variables or condition

 Enables CookieStore support to listen for cookie updates (if supported by the browser) and refresh `useCookie` ref values.

-```ts [nuxt.config.ts]
+```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({ 
  experimental: { 
    cookieStore: true
--- a/package.json
+++ b/package.json
@ -46,8 +46,10 @@
  "devDependencies": {
    "@codspeed/vitest-plugin": "3.1.0",
    "@nuxt/eslint-config": "0.2.0",
+    "@nuxt/kit": "workspace:*",
    "@nuxt/test-utils": "3.11.0",
    "@nuxt/webpack-builder": "workspace:*",
+    "@testing-library/vue": "^8.0.2",
    "@types/fs-extra": "11.0.4",
    "@types/node": "20.11.19",
    "@types/semver": "7.5.7",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -25,12 +25,18 @@ importers:
      '@nuxt/eslint-config':
        specifier: 0.2.0
        version: 0.2.0(eslint@8.56.0)
+      '@nuxt/kit':
+        specifier: workspace:*
+        version: link:packages/kit
      '@nuxt/test-utils':
        specifier: 3.11.0
-        version: 3.11.0(@vue/test-utils@2.4.4)(h3@1.10.1)(happy-dom@13.3.8)(playwright-core@1.41.2)(vite@5.1.3)(vitest@1.2.2)(vue-router@4.2.5)(vue@3.4.19)
+        version: 3.11.0(@testing-library/vue@8.0.2)(@vue/test-utils@2.4.4)(h3@1.10.1)(happy-dom@13.3.8)(playwright-core@1.41.2)(vite@5.1.3)(vitest@1.2.2)(vue-router@4.2.5)(vue@3.4.19)
      '@nuxt/webpack-builder':
        specifier: workspace:*
        version: link:packages/webpack
+      '@testing-library/vue':
+        specifier: ^8.0.2
+        version: 8.0.2(vue@3.4.19)
      '@types/fs-extra':
        specifier: 11.0.4
        version: 11.0.4
@ -135,7 +141,7 @@ importers:
        version: 1.2.2(@types/node@20.11.19)(happy-dom@13.3.8)
      vitest-environment-nuxt:
        specifier: 1.0.0
-        version: 1.0.0(@vue/test-utils@2.4.4)(h3@1.10.1)(happy-dom@13.3.8)(playwright-core@1.41.2)(vite@5.1.3)(vitest@1.2.2)(vue-router@4.2.5)(vue@3.4.19)
+        version: 1.0.0(@testing-library/vue@8.0.2)(@vue/test-utils@2.4.4)(h3@1.10.1)(happy-dom@13.3.8)(playwright-core@1.41.2)(vite@5.1.3)(vitest@1.2.2)(vue-router@4.2.5)(vue@3.4.19)
      vue:
        specifier: 3.4.19
        version: 3.4.19(typescript@5.3.3)
@ -1188,6 +1194,13 @@ packages:
      '@babel/helper-plugin-utils': 7.22.5
      '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.9)

+  /@babel/runtime@7.23.9:
+    resolution: {integrity: sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.14.1
+    dev: true
+
  /@babel/standalone@7.23.9:
    resolution: {integrity: sha512-89NGhVfgKDqDQrtNPxqfnhIReKvp2CR80ofPNEAUpbtnouFelq33hQFURLralD9I+eFS7s5zVK61JRg/D1nLWg==}
    engines: {node: '>=6.9.0'}
@ -2268,7 +2281,7 @@ packages:
      rc9: 2.1.1
      std-env: 3.7.0

-  /@nuxt/test-utils@3.11.0(@vue/test-utils@2.4.4)(h3@1.10.1)(happy-dom@13.3.8)(playwright-core@1.41.2)(vite@5.1.3)(vitest@1.2.2)(vue-router@4.2.5)(vue@3.4.19):
+  /@nuxt/test-utils@3.11.0(@testing-library/vue@8.0.2)(@vue/test-utils@2.4.4)(h3@1.10.1)(happy-dom@13.3.8)(playwright-core@1.41.2)(vite@5.1.3)(vitest@1.2.2)(vue-router@4.2.5)(vue@3.4.19):
    resolution: {integrity: sha512-9ovgpQZkZpVg/MhYVVn2169WjH/IL0XUqwGryTa/lkx0/BCi1LMVEp3HTPkmt4qbRcxitO+kL4vFqqrFGVaSVg==}
    engines: {node: ^14.18.0 || >=16.10.0}
    peerDependencies:
@ -2307,6 +2320,7 @@ packages:
    dependencies:
      '@nuxt/kit': link:packages/kit
      '@nuxt/schema': link:packages/schema
+      '@testing-library/vue': 8.0.2(vue@3.4.19)
      '@vue/test-utils': 2.4.4(vue@3.4.19)
      c12: 1.8.0
      consola: 3.2.3
@ -2333,7 +2347,7 @@ packages:
      unplugin: 1.7.1
      vite: 5.1.3(@types/node@20.11.19)
      vitest: 1.2.2(@types/node@20.11.19)(happy-dom@13.3.8)
-      vitest-environment-nuxt: 1.0.0(@vue/test-utils@2.4.4)(h3@1.10.1)(happy-dom@13.3.8)(playwright-core@1.41.2)(vite@5.1.3)(vitest@1.2.2)(vue-router@4.2.5)(vue@3.4.19)
+      vitest-environment-nuxt: 1.0.0(@testing-library/vue@8.0.2)(@vue/test-utils@2.4.4)(h3@1.10.1)(happy-dom@13.3.8)(playwright-core@1.41.2)(vite@5.1.3)(vitest@1.2.2)(vue-router@4.2.5)(vue@3.4.19)
      vue: 3.4.19(typescript@5.3.3)
      vue-router: 4.2.5(vue@3.4.19)
    dev: true
@ -2374,7 +2388,7 @@ packages:
      remark-parse: 11.0.0
      remark-rehype: 11.1.0
      scule: 1.3.0
-      shiki: 1.1.2
+      shiki: 1.1.3
      ufo: 1.4.0
      unified: 11.0.4
      unist-builder: 4.0.0
@ -2839,6 +2853,38 @@ packages:
    resolution: {integrity: sha512-UTce8mUwUW0RikMb/eseJ7ys0BRkZVFB86orHzrfW12ZmFtym5zua8joZ4L7okH2dDFHkcFjqnZ5GocWBXOFtA==}
    engines: {node: '>=18'}

+  /@testing-library/dom@9.3.4:
+    resolution: {integrity: sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@babel/code-frame': 7.23.5
+      '@babel/runtime': 7.23.9
+      '@types/aria-query': 5.0.4
+      aria-query: 5.1.3
+      chalk: 4.1.2
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      pretty-format: 27.5.1
+    dev: true
+
+  /@testing-library/vue@8.0.2(vue@3.4.19):
+    resolution: {integrity: sha512-A8wWX+qQn0o0izpQWnGCpwQt8wAdpsVP8vPP2h5Q/jcGhZ5yKXz9PPUqhQv+45LTFaWlyRf8bArTVaB/KFFd5A==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@vue/compiler-sfc': '>= 3'
+      vue: 3.4.19
+    peerDependenciesMeta:
+      '@vue/compiler-sfc':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      '@testing-library/dom': 9.3.4
+      '@vue/test-utils': 2.4.4(vue@3.4.19)
+      vue: 3.4.19(typescript@5.3.3)
+    transitivePeerDependencies:
+      - '@vue/server-renderer'
+    dev: true
+
  /@tootallnate/once@2.0.0:
    resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
    engines: {node: '>= 10'}
@ -2862,6 +2908,10 @@ packages:
      minimatch: 9.0.3
    dev: false

+  /@types/aria-query@5.0.4:
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+    dev: true
+
  /@types/clear@0.1.4:
    resolution: {integrity: sha512-4nJjoilJPTbYF7Q4y5+F7JFDK8QdcwOItzwVv3RDEMWALT9Mx9UzfxCiUfpbFK05REhieXTCvhbNkiDW/Wfejw==}
    dev: true
@ -3888,10 +3938,16 @@ packages:
  /argparse@2.0.1:
    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}

+  /aria-query@5.1.3:
+    resolution: {integrity: sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==}
+    dependencies:
+      deep-equal: 2.2.3
+    dev: true
+
  /array-buffer-byte-length@1.0.0:
    resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==}
    dependencies:
-      call-bind: 1.0.2
+      call-bind: 1.0.7
      is-array-buffer: 3.0.2
    dev: true

@ -4030,6 +4086,11 @@ packages:
    engines: {node: '>= 0.4'}
    dev: true

+  /available-typed-arrays@1.0.6:
+    resolution: {integrity: sha512-j1QzY8iPNPG4o4xmO3ptzpRxTciqD3MgEHtifP/YnJpIo58Xu+ne4BejlbkuaLfXn/nz6HFiw29bLpj2PNMdGg==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
  /axios@1.6.5:
    resolution: {integrity: sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==}
    dependencies:
@ -4197,6 +4258,17 @@ packages:
    dependencies:
      function-bind: 1.1.2
      get-intrinsic: 1.2.1
+    dev: true
+
+  /call-bind@1.0.7:
+    resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-define-property: 1.0.0
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.2.4
+      set-function-length: 1.2.1

  /callsites@3.1.0:
    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
@ -4791,6 +4863,30 @@ packages:
      type-detect: 4.0.8
    dev: true

+  /deep-equal@2.2.3:
+    resolution: {integrity: sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      array-buffer-byte-length: 1.0.0
+      call-bind: 1.0.7
+      es-get-iterator: 1.1.3
+      get-intrinsic: 1.2.4
+      is-arguments: 1.1.1
+      is-array-buffer: 3.0.2
+      is-date-object: 1.0.5
+      is-regex: 1.1.4
+      is-shared-array-buffer: 1.0.2
+      isarray: 2.0.5
+      object-is: 1.1.5
+      object-keys: 1.1.1
+      object.assign: 4.1.4
+      regexp.prototype.flags: 1.5.1
+      side-channel: 1.0.4
+      which-boxed-primitive: 1.0.2
+      which-collection: 1.0.1
+      which-typed-array: 1.1.14
+    dev: true
+
  /deep-extend@0.6.0:
    resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
    engines: {node: '>=4.0.0'}
@ -4828,6 +4924,14 @@ packages:
      has-property-descriptors: 1.0.0
    dev: true

+  /define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-define-property: 1.0.0
+      es-errors: 1.3.0
+      gopd: 1.0.1
+
  /define-lazy-prop@2.0.0:
    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
    engines: {node: '>=8'}
@ -4932,6 +5036,10 @@ packages:
    resolution: {integrity: sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==}
    dev: false

+  /dom-accessibility-api@0.5.16:
+    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
+    dev: true
+
  /dom-serializer@2.0.0:
    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
    dependencies:
@ -5118,6 +5226,30 @@ packages:
      which-typed-array: 1.1.11
    dev: true

+  /es-define-property@1.0.0:
+    resolution: {integrity: sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      get-intrinsic: 1.2.4
+
+  /es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  /es-get-iterator@1.1.3:
+    resolution: {integrity: sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==}
+    dependencies:
+      call-bind: 1.0.7
+      get-intrinsic: 1.2.4
+      has-symbols: 1.0.3
+      is-arguments: 1.1.1
+      is-map: 2.0.2
+      is-set: 2.0.2
+      is-string: 1.0.7
+      isarray: 2.0.5
+      stop-iteration-iterator: 1.0.0
+    dev: true
+
  /es-module-lexer@1.3.1:
    resolution: {integrity: sha512-JUFAyicQV9mXc3YRxPnDlrfBKpqt6hUYzz9/boprUJHs4e4KVr3XwOF70doO6gwXUor6EWZJAyWAfKki84t20Q==}

@ -5880,6 +6012,16 @@ packages:
      has-proto: 1.0.1
      has-symbols: 1.0.3

+  /get-intrinsic@1.2.4:
+    resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      has-proto: 1.0.1
+      has-symbols: 1.0.3
+      hasown: 2.0.0
+
  /get-port-please@3.1.2:
    resolution: {integrity: sha512-Gxc29eLs1fbn6LQ4jSU4vXjlwyZhF5HsGuMAa7gqBP4Rw4yxxltyDUuF5MBclFzDTXO+ACchGQoeela4DSfzdQ==}

@ -6049,7 +6191,6 @@ packages:
    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
    dependencies:
      get-intrinsic: 1.2.1
-    dev: true

  /graceful-fs@4.2.11:
    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
@ -6110,6 +6251,11 @@ packages:
      get-intrinsic: 1.2.1
    dev: true

+  /has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+    dependencies:
+      es-define-property: 1.0.0
+
  /has-proto@1.0.1:
    resolution: {integrity: sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==}
    engines: {node: '>= 0.4'}
@ -6124,6 +6270,13 @@ packages:
    dependencies:
      has-symbols: 1.0.3

+  /has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-symbols: 1.0.3
+    dev: true
+
  /has-unicode@2.0.1:
    resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==}

@ -6449,11 +6602,19 @@ packages:
      is-decimal: 2.0.1
    dev: true

+  /is-arguments@1.1.1:
+    resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      has-tostringtag: 1.0.0
+    dev: true
+
  /is-array-buffer@3.0.2:
    resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==}
    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
+      call-bind: 1.0.7
+      get-intrinsic: 1.2.4
      is-typed-array: 1.1.12
    dev: true

@ -6476,7 +6637,7 @@ packages:
    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
    engines: {node: '>= 0.4'}
    dependencies:
-      call-bind: 1.0.2
+      call-bind: 1.0.7
      has-tostringtag: 1.0.0
    dev: true

@ -6561,6 +6722,10 @@ packages:
    resolution: {integrity: sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==}
    dev: false

+  /is-map@2.0.2:
+    resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==}
+    dev: true
+
  /is-module@1.0.0:
    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}

@ -6619,13 +6784,17 @@ packages:
    resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
    engines: {node: '>= 0.4'}
    dependencies:
-      call-bind: 1.0.2
+      call-bind: 1.0.7
      has-tostringtag: 1.0.0

+  /is-set@2.0.2:
+    resolution: {integrity: sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==}
+    dev: true
+
  /is-shared-array-buffer@1.0.2:
    resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==}
    dependencies:
-      call-bind: 1.0.2
+      call-bind: 1.0.7
    dev: true

  /is-ssh@1.4.0:
@ -6662,12 +6831,23 @@ packages:
      which-typed-array: 1.1.11
    dev: true

+  /is-weakmap@2.0.1:
+    resolution: {integrity: sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==}
+    dev: true
+
  /is-weakref@1.0.2:
    resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
    dependencies:
      call-bind: 1.0.2
    dev: true

+  /is-weakset@2.0.2:
+    resolution: {integrity: sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==}
+    dependencies:
+      call-bind: 1.0.7
+      get-intrinsic: 1.2.4
+    dev: true
+
  /is-wsl@2.2.0:
    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
    engines: {node: '>=8'}
@ -7072,6 +7252,11 @@ packages:
    engines: {node: '>=12'}
    dev: false

+  /lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+    dev: true
+
  /magic-string-ast@0.3.0:
    resolution: {integrity: sha512-0shqecEPgdFpnI3AP90epXyxZy9g6CRZ+SZ7BcqFwYmtFEnZ1jpevcV5HoyVnlDS9gCnc1UIg3Rsvp3Ci7r8OA==}
    engines: {node: '>=16.14.0'}
@ -8205,6 +8390,14 @@ packages:
    resolution: {integrity: sha512-HQ4J+ic8hKrgIt3mqk6cVOVrW2ozL4KdvHlqpBv9vDYWx9ysAgENAdvy4FoGF+KFdhR7nQTNm5J0ctAeOwn+3g==}
    dev: true

+  /object-is@1.1.5:
+    resolution: {integrity: sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+    dev: true
+
  /object-keys@1.1.1:
    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
    engines: {node: '>= 0.4'}
@ -8214,7 +8407,7 @@ packages:
    resolution: {integrity: sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==}
    engines: {node: '>= 0.4'}
    dependencies:
-      call-bind: 1.0.2
+      call-bind: 1.0.7
      define-properties: 1.2.1
      has-symbols: 1.0.3
      object-keys: 1.1.1
@ -8956,6 +9149,15 @@ packages:
    resolution: {integrity: sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==}
    engines: {node: ^14.13.1 || >=16.0.0}

+  /pretty-format@27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+    dev: true
+
  /pretty-format@29.7.0:
    resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@ -9170,6 +9372,10 @@ packages:
      destr: 2.0.2
      flat: 5.0.2

+  /react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+    dev: true
+
  /react-is@18.2.0:
    resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
    dev: true
@ -9257,6 +9463,10 @@ packages:
    dependencies:
      redis-errors: 1.2.0

+  /regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+    dev: true
+
  /regexp-tree@0.1.27:
    resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
    hasBin: true
@ -9266,7 +9476,7 @@ packages:
    resolution: {integrity: sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==}
    engines: {node: '>= 0.4'}
    dependencies:
-      call-bind: 1.0.2
+      call-bind: 1.0.7
      define-properties: 1.2.1
      set-function-name: 2.0.1
    dev: true
@ -9653,6 +9863,17 @@ packages:
  /set-blocking@2.0.0:
    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}

+  /set-function-length@1.2.1:
+    resolution: {integrity: sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.2.4
+      gopd: 1.0.1
+      has-property-descriptors: 1.0.2
+
  /set-function-name@2.0.1:
    resolution: {integrity: sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==}
    engines: {node: '>= 0.4'}
@ -9694,8 +9915,8 @@ packages:
  /side-channel@1.0.4:
    resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
    dependencies:
-      call-bind: 1.0.2
-      get-intrinsic: 1.2.1
+      call-bind: 1.0.7
+      get-intrinsic: 1.2.4
      object-inspect: 1.13.0
    dev: true

@ -9878,6 +10099,13 @@ packages:
  /std-env@3.7.0:
    resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==}

+  /stop-iteration-iterator@1.0.0:
+    resolution: {integrity: sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      internal-slot: 1.0.5
+    dev: true
+
  /streamx@2.15.1:
    resolution: {integrity: sha512-fQMzy2O/Q47rgwErk/eGeLu/roaFWV0jVsogDmrszM9uIw8L5OA+t+V93MgYlufNptfjmYR1tOMWhei/Eh7TQA==}
    dependencies:
@ -10974,10 +11202,10 @@ packages:
    optionalDependencies:
      fsevents: 2.3.3

-  /vitest-environment-nuxt@1.0.0(@vue/test-utils@2.4.4)(h3@1.10.1)(happy-dom@13.3.8)(playwright-core@1.41.2)(vite@5.1.3)(vitest@1.2.2)(vue-router@4.2.5)(vue@3.4.19):
+  /vitest-environment-nuxt@1.0.0(@testing-library/vue@8.0.2)(@vue/test-utils@2.4.4)(h3@1.10.1)(happy-dom@13.3.8)(playwright-core@1.41.2)(vite@5.1.3)(vitest@1.2.2)(vue-router@4.2.5)(vue@3.4.19):
    resolution: {integrity: sha512-AWMO9h4HdbaFdPWZw34gALFI8gbBiOpvfbyeZwHIPfh4kWg/TwElYHvYMQ61WPUlCGaS5LebfHkaI0WPyb//Iw==}
    dependencies:
-      '@nuxt/test-utils': 3.11.0(@vue/test-utils@2.4.4)(h3@1.10.1)(happy-dom@13.3.8)(playwright-core@1.41.2)(vite@5.1.3)(vitest@1.2.2)(vue-router@4.2.5)(vue@3.4.19)
+      '@nuxt/test-utils': 3.11.0(@testing-library/vue@8.0.2)(@vue/test-utils@2.4.4)(h3@1.10.1)(happy-dom@13.3.8)(playwright-core@1.41.2)(vite@5.1.3)(vitest@1.2.2)(vue-router@4.2.5)(vue@3.4.19)
    transitivePeerDependencies:
      - '@cucumber/cucumber'
      - '@jest/globals'
@ -11470,6 +11698,15 @@ packages:
      is-symbol: 1.0.4
    dev: true

+  /which-collection@1.0.1:
+    resolution: {integrity: sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==}
+    dependencies:
+      is-map: 2.0.2
+      is-set: 2.0.2
+      is-weakmap: 2.0.1
+      is-weakset: 2.0.2
+    dev: true
+
  /which-typed-array@1.1.11:
    resolution: {integrity: sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==}
    engines: {node: '>= 0.4'}
@ -11481,6 +11718,17 @@ packages:
      has-tostringtag: 1.0.0
    dev: true

+  /which-typed-array@1.1.14:
+    resolution: {integrity: sha512-VnXFiIW8yNn9kIHN88xvZ4yOWchftKDsRJ8fEPacX/wl1lOvBrhsJ/OeJCXq7B0AaijRuqgzSKalJoPk+D8MPg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      available-typed-arrays: 1.0.6
+      call-bind: 1.0.7
+      for-each: 0.3.3
+      gopd: 1.0.1
+      has-tostringtag: 1.0.2
+    dev: true
+
  /which@2.0.2:
    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
    engines: {node: '>= 8'}