Storybook-addon-vue-slots NPM

Enables to use Vue slots inside Storybook's CSF files.

Features

Vue 3 support
Generate code snippets for stories with slots
Control specific aspect of the slot via Storybook's controls
Wrap slot content with components

📦 Installation

pnpm add -D storybook-addon-vue-slots

Add the storybook-addon-vue-slots to your plugins in main.ts file:

// .storybook/main.ts
export default {
  // ...
  addons: [
    // ...
    'storybook-addon-vue-slots',
  ],
} satisfies StorybookConfig

Examples

Run:

npm run storybook

To run an example Storybook

Usage

Zero

By default, the addon will pass the [slotName] arg to the template, e.x. {{ args.default }}.

Basic

Add a description to the slot by passing a string to the slot definition:

// MyComponent.stories.ts

export default meta = {
  parameters: {
    slots: {
      default: `Default slot content`,
    },
  },
}

Standard

Use args.[slotName] inside the template to pass data from Storybook controls to the slot, or access other args.

// MyComponent.stories.ts

export default meta = {
  parameters: {
    slots: {
      default: {
        description: 'Default slot',
        template: `<p>{{ args.default }}</p>`,
      },
      header: {
        description: 'Header slot',
        template: `<p>{{ args.header }}</p>`,
      },
    },
  },
}

So, value of header arg control in Storybook table is being passed into the slot template, allowing control of an aspect of the slot.

Advanced

Adding components

// MyComponent.stories.ts

export default meta = {
  parameters: {
    slots: {
      default: {
        description: 'Default slot',
        template: `<p>{{ args.default }}</p>`,
      header: {
        description: 'Header slot',
        components: { AppButton },
        template: `<AppButton>{{ args.header }}</AppButton>`,
      },
    },
  },
}