Vue Slots Addon
[](https://vshymanskyy.github.io/StandWithUkraine/)
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
```sh
pnpm add -D storybook-addon-vue-slots
```
Add the `storybook-addon-vue-slots` to your plugins in `main.ts` file:
```ts
// .storybook/main.ts
export default {
// ...
addons: [
// ...
'storybook-addon-vue-slots',
],
} satisfies StorybookConfig
```
## Examples
Run:
```zsh
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:
```ts
// 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.
```ts
// MyComponent.stories.ts
export default meta = {
parameters: {
slots: {
default: {
description: 'Default slot',
template: `{{ args.default }}
`,
},
header: {
description: 'Header slot',
template: `{{ args.header }}
`,
},
},
},
}
```
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
```ts
// MyComponent.stories.ts
export default meta = {
parameters: {
slots: {
default: {
description: 'Default slot',
template: `{{ args.default }}
`,
},
header: {
description: 'Header slot',
components: { AppButton },
template: `{{ args.header }}`,
},
},
},
}
```
## Todo
- [ ] Slots fallback support
## Contribute
## 💖 Funding
Help support my open-source work through [PayPal](https://paypal.com) and [GitHub Sponsors](https://github.com/sponsors/JoJk0?o=esb).
## License
MIT License © 2023 Jacob Janisz