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
