storybook-vue-slots

Vue Slots Addon

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-vue-slots

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

// .storybook/main.ts
export default {
  // ...
  addons: [
    // ...
    "storybook-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>`,
      },
    },
  },
};

Todo

• Slots fallback support

Contribute

💖 Funding

License

MIT License © 2025 Webkor

Note: This repository is a fork created and maintained by Webkor to provide updates and compatibility with newer Storybook versions. The original project is available at https://github.com/JoJk0/storybook-addon-vue-slots