Join us live: How to fix A11y debt without burning out

Vue Slots

Vue Slots support for Storybook

View on Github

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.

License

MIT License © 2023 Jacob Janisz