### Install Storybook Vue Addon

Source: https://github.com/tobiasdiez/storybook-vue-addon/blob/main/README.md

Commands to install the addon using npm, yarn, or pnpm.

```sh
# npm
npm install --save-dev storybook-vue-addon

# yarn
yarn add -D storybook-vue-addon

# pnpm
pnpm add -D storybook-vue-addon
```

--------------------------------

### Basic Checkbox Example

Source: https://github.com/tobiasdiez/storybook-vue-addon/blob/main/examples/vite/src/writing-docs/mdx-1.basic-example.mdx

Displays an unchecked checkbox. This is a fundamental example for integrating Storybook's Canvas component with MDX files.

```javascript
import { Canvas, Meta } from '@storybook/addon-docs/blocks'

import * as CheckboxStories from './mdx-1.basic-example.stories'

<Meta of={CheckboxStories} />

# Checkbox

A checkbox is a square box that can be activated or deactivated when ticked.

Use checkboxes to select one or more options from a list of choices.

<Canvas of={CheckboxStories.Unchecked} />
```

--------------------------------

### Write Stories in Vue Syntax

Source: https://github.com/tobiasdiez/storybook-vue-addon/blob/main/README.md

Example of a story file written in Vue SFC format using the addon's components.

```vue
<script setup lang="ts">
import Button from './Button.vue'
</script>
<template>
  <Stories title="Stories in Vue format 😍" :component="Button">
    <Story title="Primary">
      <Button background="#ff0" label="Button" />
    </Story>
    <Story title="Secondary">
      <Button background="#ff0" label="😄👍😍💯" />
    </Story>
    <Story title="Tertiary">
      <Button background="#ff0" label="📚📕📈🤓" />
    </Story>
  </Stories>
</template>
```

--------------------------------

### Add Documentation in Docs Block

Source: https://github.com/tobiasdiez/storybook-vue-addon/blob/main/README.md

Example of adding markdown documentation within a custom 'docs' block in a Vue story file.

```vue
<template>Define your stories here as above</template>

<docs lang="md">
import { Canvas } from '@storybook/blocks';

# Documentation

Everything in one place. Isn't it great?

You can render stories in the docs using the `<Canvas>` component.

<Canvas />
</docs>
```

--------------------------------

### Vue Story with Play Function

Source: https://context7.com/tobiasdiez/storybook-vue-addon/llms.txt

Defines a play function outside of `<script setup>` to simulate user interactions like typing and clicking, and attaches it to a Story via the `:play` binding.

```vue
<!-- LoginForm.stories.vue -->
<script setup>
import { expect, userEvent, within } from 'storybook/test'
import LoginForm from './LoginForm.vue'
</script>

<script>
// Play function defined outside <script setup> so it can be referenced in the template
async function fillAndSubmit({ canvasElement }) {
  const canvas = within(canvasElement)

  await userEvent.type(canvas.getByTestId('email'), 'user@example.com')
  await userEvent.type(canvas.getByTestId('password'), 'secret123')
  await userEvent.click(canvas.getByRole('button'))

  await expect(
    canvas.getByText('Login successful!'),
  ).toBeInTheDocument()
}
</script>

<template>
  <Stories title="Forms/Login Form" :component="LoginForm">
    <Story title="Empty Form">
      <LoginForm />
    </Story>

    <!-- Attach the play function via :play binding -->
    <Story title="Filled and Submitted" :play="fillAndSubmit">
      <LoginForm />
    </Story>
  </Stories>
</template>
```

--------------------------------

### Import TypeScript types for `<Stories>` and `<Story>`

Source: https://context7.com/tobiasdiez/storybook-vue-addon/llms.txt

Import `Stories` and `Story` types from `storybook-vue-addon/core` for IDE autocompletion and type-checking of the `<Stories>` and `<Story>` components within Vue templates. These types can be used in `.ts` files or directly in `<script setup>` blocks.

```typescript
// In a .ts file (e.g., shims or vite-env.d.ts):
import type { Stories, Story } from 'storybook-vue-addon/core'

// Volar will pick these up automatically
// in script blocks for editor hints:

```

```vue
<script setup lang="ts">
import type { Stories, Story } from 'storybook-vue-addon/core'
import MyCard from './Card.vue'

// Stories props: { title?: string, component?: TComponent }
// Story props:   { title: string, play?: StoryObj['play'] }
</script>

<template>
  <Stories title="UI/Card" :component="MyCard">
    <Story title="Default">
      <MyCard title="Hello" body="World" />
    </Story>
  </Stories>
</template>
```

--------------------------------

### TypeScript Support in Vue Stories

Source: https://context7.com/tobiasdiez/storybook-vue-addon/llms.txt

Vue stories fully support TypeScript in `<script setup lang="ts">` and `<script lang="ts">` blocks. Type-only imports are stripped, while value imports are preserved. Typed variables are available in story templates.

```vue
<!-- Button.stories.vue -->
<script setup lang="ts">
import MyButton from './Button.vue'
import type { Stories, Story } from 'storybook-vue-addon/core'

// Typed reactive variables are available inside story templates
const label: string = 'Click me'
const size: 'small' | 'medium' | 'large' = 'medium'
</script>

<template>
  <Stories :component="MyButton" title="Tests/TypeScript Button">
    <Story title="Default">
      <!-- label and size are resolved from the typed script setup -->
      <MyButton :label="label" :size="size" />
    </Story>
    <Story title="Large">
      <MyButton label="Large Button" size="large" />
    </Story>
  </Stories>
</template>
```

--------------------------------

### Configure Storybook Main File

Source: https://context7.com/tobiasdiez/storybook-vue-addon/llms.txt

Register the addon and add the `.vue` story glob pattern to your Storybook configuration file.

```ts
export default {
  // Add *.stories.vue to the story patterns
  stories: [
    '../src/**/*.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx|vue)', // <-- add vue
  ],
  addons: [
    '@storybook/addon-essentials',
    'storybook-vue-addon', // <-- register the addon
  ],
  framework: {
    name: '@storybook/vue3-vite',
    options: {},
  },
}
```

--------------------------------

### Configure Storybook Main.js

Source: https://github.com/tobiasdiez/storybook-vue-addon/blob/main/README.md

Modify .storybook/main.js to include Vue story files and the addon.

```diff
  "stories": [
    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+    "../src/**/*.stories.@(js|jsx|ts|tsx|vue)"
  ],
  ...
  "addons": [
    "@storybook/addon-essentials",
+   "storybook-vue-addon"
  ],


```

--------------------------------

### Astro Integration Configuration

Source: https://context7.com/tobiasdiez/storybook-vue-addon/llms.txt

Sets up the `storybook-vue-addon/astro` integration within an Astro project's configuration file.

```typescript
// astro.config.mjs
import { defineConfig } from 'astro/config'
import VueStories from 'storybook-vue-addon/astro'

export default defineConfig({
  integrations: [
    VueStories({
      /* options */
    }),
  ],
})
```

--------------------------------

### Configure Vue CLI with Storybook Vue Addon

Source: https://github.com/tobiasdiez/storybook-vue-addon/blob/main/README.md

Include `storybook-vue-addon/webpack` within `configureWebpack.plugins` in `vue.config.js`.

```javascript
// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('storybook-vue-addon/webpack')({
        /* options */
      }),
    ],
  },
}
```

--------------------------------

### Index stories from file or code with `indexer` and `indexerCode`

Source: https://context7.com/tobiasdiez/storybook-vue-addon/llms.txt

Generate Storybook's `IndexInput[]` array for story navigation. `indexer` reads from a file path asynchronously, while `indexerCode` processes an in-memory code string synchronously. Both require options like `makeTitle`.

```typescript
import { indexer, indexerCode } from 'storybook-vue-addon/core'

// From a file path (async, reads from disk)
const entries = await indexer('./src/components/Button.stories.vue', {
  makeTitle: (userTitle) => userTitle ?? 'Components',
})
// Returns IndexInput[]:
// [
//   { type: 'story', exportName: 'Primary', name: 'Primary', title: 'UI/Button',
//     importPath: './src/components/Button.stories.vue', tags: [] },
//   ...
// ]

// From a code string (synchronous)
const code = `
<template>
  <Stories title="UI/Alert">
    <Story title="Info"><Alert type="info" message="Done" /></Story>
    <Story title="Error"><Alert type="error" message="Oops" /></Story>
  </Stories>
</template>
`
const entries2 = indexerCode(code, {
  fileName: 'Alert.stories.vue',
  makeTitle: (userTitle) => userTitle ?? 'Unnamed',
})

console.log(entries2)
// [
//   { type: 'story', exportName: 'info', name: 'Info', title: 'UI/Alert',
//     importPath: 'Alert.stories.vue', tags: [] },
//   { type: 'story', exportName: 'error', name: 'Error', title: 'UI/Alert',
//     importPath: 'Alert.stories.vue', tags: [] },
// ]
```

--------------------------------

### indexer(fileName, options) / indexerCode(code, options)

Source: https://context7.com/tobiasdiez/storybook-vue-addon/llms.txt

Generates Storybook's IndexInput[] array for a .stories.vue file, used for building the navigation sidebar and story tree. `indexer` reads from the filesystem, while `indexerCode` works on an in-memory string.

```APIDOC
## `indexer(fileName, options)` / `indexerCode(code, options)` — Story Indexing

These functions generate Storybook's `IndexInput[]` array for a given `.stories.vue` file, providing the story metadata Storybook needs to build its navigation sidebar and story tree. `indexer` reads from the filesystem; `indexerCode` works on an in-memory string.

```ts
import { indexer, indexerCode } from 'storybook-vue-addon/core'

// From a file path (async, reads from disk)
const entries = await indexer('./src/components/Button.stories.vue', {
  makeTitle: (userTitle) => userTitle ?? 'Components',
})
// Returns IndexInput[]:
// [
//   { type: 'story', exportName: 'Primary', name: 'Primary', title: 'UI/Button',
//     importPath: './src/components/Button.stories.vue', tags: [] },
//   ...
// ]

// From a code string (synchronous)
const code = `
<template>
  <Stories title="UI/Alert">
    <Story title="Info"><Alert type="info" message="Done" /></Story>
    <Story title="Error"><Alert type="error" message="Oops" /></Story>
  </Stories>
</template>
`
const entries2 = indexerCode(code, {
  fileName: 'Alert.stories.vue',
  makeTitle: (userTitle) => userTitle ?? 'Unnamed',
})

console.log(entries2)
// [
//   { type: 'story', exportName: 'info', name: 'Info', title: 'UI/Alert',
//     importPath: 'Alert.stories.vue', tags: [] },
//   { type: 'story', exportName: 'error', name: 'Error', title: 'UI/Alert',
//     importPath: 'Alert.stories.vue', tags: [] },
// ]
```
```

--------------------------------

### Configure Vite with Storybook Vue Addon

Source: https://github.com/tobiasdiez/storybook-vue-addon/blob/main/README.md

Add `storybook-vue-addon/vite` to your Vite configuration to transpile Vue stories.

```typescript
// vite.config.ts
import VueStories from 'storybook-vue-addon/vite'

export default defineConfig ({
  plugins: [
    VueStories({
      /* options */
    }),
  ],
})
```

--------------------------------

### Import Story Typescript

Source: https://github.com/tobiasdiez/storybook-vue-addon/blob/main/README.md

Importing Stories and Story types for TypeScript support.

```ts
import type { Stories, Story } from 'storybook-vue-addon/core'
```

--------------------------------

### Configure esbuild with Storybook Vue Addon

Source: https://github.com/tobiasdiez/storybook-vue-addon/blob/main/README.md

Incorporate `storybook-vue-addon/esbuild` as a plugin in your esbuild build configuration.

```typescript
// esbuild.config.js
import { build } from 'esbuild'
import VueStories from 'storybook-vue-addon/esbuild'

build({
  plugins: [VueStories()],
})
```

--------------------------------

### esbuild Plugin Configuration

Source: https://context7.com/tobiasdiez/storybook-vue-addon/llms.txt

Applies the `storybook-vue-addon/esbuild` plugin during an esbuild build process to handle Vue story files.

```typescript
// esbuild.config.js
import { build } from 'esbuild'
import VueStories from 'storybook-vue-addon/esbuild'

build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  plugins: [VueStories()],
})
```

--------------------------------

### Configure Nuxt with Storybook Vue Addon

Source: https://github.com/tobiasdiez/storybook-vue-addon/blob/main/README.md

Add `storybook-vue-addon/nuxt` to your `buildModules` in `nuxt.config.js` for Nuxt 2 and Nuxt Vite.

```javascript
// nuxt.config.js
export default {
  buildModules: [
    [
      'storybook-vue-addon/nuxt',
      {
        /* options */
      },
    ],
  ],
}
```

--------------------------------

### Define Default Export with <Stories>

Source: https://context7.com/tobiasdiez/storybook-vue-addon/llms.txt

Use the `<Stories>` component as the root element in your `.stories.vue` file to map to the CSF default export. It accepts a `title` for navigation and `:component` for the primary component under test.

```vue
<!-- Button.stories.vue -->
<script setup lang="ts">
import Button from './Button.vue'
</script>

<template>
  <!-- title uses "/" as a hierarchy separator, :component binds the primary component -->
  <Stories title="UI/Button" :component="Button">
    <Story title="Primary">
      <Button primary label="Button" />
    </Story>
    <Story title="Secondary">
      <Button label="Secondary" />
    </Story>
    <Story title="Large">
      <Button size="large" label="Large Button" />
    </Story>
  </Stories>
</template>
```

--------------------------------

### Vite Plugin Configuration

Source: https://context7.com/tobiasdiez/storybook-vue-addon/llms.txt

Configures the Vite plugin for processing `.stories.vue` files outside of Storybook's built-in server, transforming them into standard CSF at build time.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import VueStories from 'storybook-vue-addon/vite'

export default defineConfig({
  plugins: [
    Vue(),
    VueStories({
      /* options — currently none required */
    }),
  ],
})
```

--------------------------------

### Configure Rollup with Storybook Vue Addon

Source: https://github.com/tobiasdiez/storybook-vue-addon/blob/main/README.md

Integrate `storybook-vue-addon/rollup` into your Rollup configuration for transpiling Vue stories.

```typescript
// rollup.config.js
import VueStories from 'storybook-vue-addon/rollup'

export default {
  plugins: [
    VueStories({
      /* options */
    }),
  ],
}
```

--------------------------------

### Nuxt Module Configuration

Source: https://context7.com/tobiasdiez/storybook-vue-addon/llms.txt

Configures the `storybook-vue-addon/nuxt` module within a Nuxt project's `nuxt.config.ts` file.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  buildModules: [
    [
      'storybook-vue-addon/nuxt',
      {
        /* options */
      },
    ],
  ],
})
```

--------------------------------

### TypeScript Types for `Stories` and `Story`

Source: https://context7.com/tobiasdiez/storybook-vue-addon/llms.txt

Import types for the `<Stories>` and `<Story>` components from the `/core` subpath export for IDE autocompletion and type-checking in Vue templates.

```APIDOC
## TypeScript Types for `Stories` and `Story`

For IDE autocompletion and type-checking of the `<Stories>` and `<Story>` components in Vue templates, import the types from the `/core` subpath export.

```ts
// In a .ts file (e.g., shims or vite-env.d.ts):
import type { Stories, Story } from 'storybook-vue-addon/core'

// Volar will pick these up automatically; explicit imports are also valid
// in script blocks for editor hints:
```

```vue
<script setup lang="ts">
import type { Stories, Story } from 'storybook-vue-addon/core'
import MyCard from './Card.vue'

// Stories props: { title?: string, component?: TComponent }
// Story props:   { title: string, play?: StoryObj['play'] }
</script>

<template>
  <Stories title="UI/Card" :component="MyCard">
    <Story title="Default">
      <MyCard title="Hello" body="World" />
    </Story>
  </Stories>
</template>
```
```

--------------------------------

### Webpack Plugin Configuration

Source: https://context7.com/tobiasdiez/storybook-vue-addon/llms.txt

Adds the `storybook-vue-addon/webpack` plugin to a Webpack configuration for processing Vue story files.

```javascript
// webpack.config.js
module.exports = {
  plugins: [
    require('storybook-vue-addon/webpack')({
      /* options */
    }),
  ],
}
```

--------------------------------

### Rollup Plugin Configuration

Source: https://context7.com/tobiasdiez/storybook-vue-addon/llms.txt

Integrates the `storybook-vue-addon/rollup` plugin into a Rollup build configuration to process Vue story files.

```javascript
// rollup.config.js
import VueStories from 'storybook-vue-addon/rollup'

export default {
  input: 'src/index.ts',
  plugins: [
    VueStories({
      /* options */
    }),
  ],
}
```

--------------------------------

### Transform Vue SFC to Storybook CSF with `transform`

Source: https://context7.com/tobiasdiez/storybook-vue-addon/llms.txt

Use the `transform` function to convert raw `.stories.vue` source code into a Storybook CSF JavaScript module string. This function is asynchronous as it may transpile TypeScript using esbuild.

```typescript
import { transform } from 'storybook-vue-addon/core'

// Input: a .stories.vue file as a raw string
const vueStoryCode = `
<script setup lang="ts">
import Button from './Button.vue'
const label: string = 'Hello'
</script>
<template>
  <Stories title="Example/Button" :component="Button">
    <Story title="Default">
      <Button :label="label" />
    </Story>
    <Story title="Disabled">
      <Button label="Disabled" :disabled="true" />
    </Story>
  </Stories>
</template>
`

const csfOutput = await transform(vueStoryCode)
// Output: a fully-formed CSF module string, e.g.:
// const _sfc_main = { setup(...) { ... } }
// export default { title: 'Example/Button', component: Button, parameters: {} }
// function renderDefault(...) { ... }
// export const Default = () => Object.assign({ render: renderDefault }, _sfc_main)
// Default.storyName = 'Default'
// Default.parameters = { docs: { source: { code: `<Button :label="label" />` } } }
// ...
console.log(csfOutput)
```

--------------------------------

### Configure Webpack with Storybook Vue Addon

Source: https://github.com/tobiasdiez/storybook-vue-addon/blob/main/README.md

Use `storybook-vue-addon/webpack` in your Webpack configuration to enable Vue story transpilation.

```javascript
// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('storybook-vue-addon/webpack')({
      /* options */
    }),
  ],
}
```

--------------------------------

### parse(code)

Source: https://context7.com/tobiasdiez/storybook-vue-addon/llms.txt

Parses a .stories.vue source string into structured metadata, including the resolved script block, story metadata (title, component), an array of parsed stories, and optional docs content.

```APIDOC
## `parse(code)` — SFC Parser

The `parse` function breaks a `.stories.vue` source string into structured metadata: the resolved script block, story metadata (`title`, `component`), an array of parsed stories (each with `id`, `title`, `template`, optional `play`), and optional docs content.

```ts
import { parse } from 'storybook-vue-addon/core'

const code = `
<script setup>
import Button from './Button.vue'
</script>
<template>
  <Stories title="UI/Button" :component="Button">
    <Story title="Primary">
      <Button primary label="Primary" />
    </Story>
    <Story title="Secondary">
      <Button label="Secondary" />
    </Story>
  </Stories>
</template>
<docs lang="md">
# Button docs
</docs>
`

const { meta, stories, resolvedScript, docs } = parse(code)

console.log(meta)
// { title: 'UI/Button', component: 'Button', tags: [] }

console.log(stories)
// [
//   { id: 'Primary', title: 'Primary', template: '<Button primary label="Primary" />', play: undefined },
//   { id: 'Secondary', title: 'Secondary', template: '<Button label="Secondary" />', play: undefined },
// ]

console.log(docs)
// '\n# Button docs\n'
```
```

--------------------------------

### Vue Story with Inline Docs Block

Source: https://context7.com/tobiasdiez/storybook-vue-addon/llms.txt

Embeds Markdown documentation directly within a `.stories.vue` file using the custom `<docs lang="md">` block, which is compiled as MDX.

```vue
<!-- Checkbox.stories.vue -->
<script setup lang="ts">
import Checkbox from './Checkbox.vue'
</script>

<template>
  <Stories :component="Checkbox" title="UI/Checkbox">
    <Story title="Unchecked">
      <Checkbox label="Accept terms" />
    </Story>
    <Story title="Checked">
      <Checkbox label="Accept terms" :checked="true" />
    </Story>
  </Stories>
</template>

<!-- Inline docs block — compiled as MDX, no Meta tag needed -->
<docs lang="md">
import { Canvas } from '@storybook/addon-docs/blocks';

# Checkbox

A checkbox allows users to select one or more options from a set.

## Usage

```html
<Checkbox label="Accept terms" :checked="false" />
```

## Examples

<Canvas of={Unchecked} />
<Canvas of={Checked} />
</docs>
```

--------------------------------

### Define Individual Stories with <Story>

Source: https://context7.com/tobiasdiez/storybook-vue-addon/llms.txt

Each `<Story>` child within `<Stories>` defines a named CSF export. The `title` prop sets the story's display name, and the slot content renders the component's markup.

```vue
<!-- LoginForm.stories.vue -->
<script setup lang="ts">
import LoginForm from './LoginForm.vue'
</script>

<template>
  <Stories title="Forms/Login Form" :component="LoginForm">
    <!-- Minimal story: just render the component -->
    <Story title="Empty">
      <LoginForm />
    </Story>

    <!-- Story with pre-filled props -->
    <Story title="With Email">
      <LoginForm email="user@example.com" />
    </Story>

    <!-- Story title can contain spaces and special characters -->
    <Story title="Error State 🚨">
      <LoginForm :hasError="true" errorMessage="Invalid credentials" />
    </Story>
  </Stories>
</template>
```

--------------------------------

### transform(code)

Source: https://context7.com/tobiasdiez/storybook-vue-addon/llms.txt

Converts raw .stories.vue source code into a Storybook CSF JavaScript module string. This function is asynchronous as it uses esbuild for TypeScript transpilation.

```APIDOC
## `transform(code)` — Core SFC-to-CSF Transformation API

The `transform` function is the internal engine that converts raw `.stories.vue` source code (as a string) into a Storybook CSF JavaScript module string. It is async because TypeScript blocks are transpiled via esbuild.

```ts
import { transform } from 'storybook-vue-addon/core'

// Input: a .stories.vue file as a raw string
const vueStoryCode = `
<script setup lang="ts">
import Button from './Button.vue'
const label: string = 'Hello'
</script>
<template>
  <Stories title="Example/Button" :component="Button">
    <Story title="Default">
      <Button :label="label" />
    </Story>
    <Story title="Disabled">
      <Button label="Disabled" :disabled="true" />
    </Story>
  </Stories>
</template>
`

const csfOutput = await transform(vueStoryCode)
// Output: a fully-formed CSF module string, e.g.:
// const _sfc_main = { setup(...) { ... } }
// export default { title: 'Example/Button', component: Button, parameters: {} }
// function renderDefault(...) { ... }
// export const Default = () => Object.assign({ render: renderDefault }, _sfc_main)
// Default.storyName = 'Default'
// Default.parameters = { docs: { source: { code: `<Button :label="label" />` } } }
// ...
console.log(csfOutput)
```
```

--------------------------------

### Parse Vue SFC to structured metadata with `parse`

Source: https://context7.com/tobiasdiez/storybook-vue-addon/llms.txt

The `parse` function breaks down a `.stories.vue` source string into structured metadata, including the resolved script block, story metadata (title, component), an array of parsed stories, and optional docs content. This is a synchronous operation.

```typescript
import { parse } from 'storybook-vue-addon/core'

const code = `
<script setup>
import Button from './Button.vue'
</script>
<template>
  <Stories title="UI/Button" :component="Button">
    <Story title="Primary">
      <Button primary label="Primary" />
    </Story>
    <Story title="Secondary">
      <Button label="Secondary" />
    </Story>
  </Stories>
</template>
<docs lang="md">
# Button docs
</docs>
`

const { meta, stories, resolvedScript, docs } = parse(code)

console.log(meta)
// { title: 'UI/Button', component: 'Button', tags: [] }

console.log(stories)
// [
//   { id: 'Primary', title: 'Primary', template: '<Button primary label="Primary" />', play: undefined },
//   { id: 'Secondary', title: 'Secondary', template: '<Button label="Secondary" />', play: undefined },
// ]

console.log(docs)
// '\n# Button docs\n'
```

--------------------------------

### Embed Story in Docs

Source: https://github.com/tobiasdiez/storybook-vue-addon/blob/main/README.md

How to embed a specific story within the custom 'docs' block using the Canvas component.

```vue
<template>
  <Stories>
    <Story title="Unchecked">
      <Checkbox label="Unchecked" />
    </Story>
  </Stories>
</template>
<docs>
  import { Canvas } from '@storybook/blocks';
  <Canvas of={Unchecked} />
</docs>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.