Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Vue Slots
Vue Slots support for Storybook
npm install storybook-addon-vue-slots
Last updated 3 months ago
8.6k
Downloads per week
Readme View on GitHub

Vue

Vue Slots Addon

version version

Stand With Ukraine

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>`,
      },
    },
  },
}

Todo

  • Slots fallback support

Contribute

💖 Funding

Help support my open-source work through PayPal and GitHub Sponsors.

Donate with PayPal button

License

MIT License © 2023 Jacob Janisz

Join the community
6,580 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI