{"id":12084,"library":"storybook-vue-slots","title":"Storybook Vue Slots Addon","description":"The Storybook Vue Slots Addon, currently at version 9.1.5, provides robust support for integrating Vue 3 slots directly into Storybook's Component Story Format (CSF) files. This addon enables developers to define and control slot content, generate code snippets that include slot definitions, and even wrap slot content with other Vue components, enhancing the interactive documentation of complex Vue components. Maintained as a fork by Webkor, its release cadence is closely tied to major Storybook and Vue 3 versions, ensuring compatibility with the latest ecosystems. It differentiates itself by offering granular control over slot behavior through Storybook's built-in controls, making it easier to visualize and test different slot configurations without manual code changes.","status":"active","version":"9.1.5","language":"javascript","source_language":"en","source_url":"https://github.com/Korzanicho/storybook-vue-slots","tags":["javascript","vue","vue3","storybook","slot","slots","storybook-addons"],"install":[{"cmd":"npm install storybook-vue-slots","lang":"bash","label":"npm"},{"cmd":"yarn add storybook-vue-slots","lang":"bash","label":"yarn"},{"cmd":"pnpm add storybook-vue-slots","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Storybook's Vue 3 integration; this addon extends its capabilities.","package":"@storybook/vue3","optional":false},{"reason":"The core Storybook package, providing the framework for component development and documentation.","package":"storybook","optional":false},{"reason":"The fundamental Vue.js framework, essential for rendering Vue components within Storybook.","package":"vue","optional":false}],"imports":[{"note":"This addon is configured via the 'addons' array in .storybook/main.ts, not through direct JavaScript imports in component files or stories. Incorrectly importing it will not activate its functionality.","wrong":"import 'storybook-vue-slots';","symbol":"Addon Configuration","correct":"// .storybook/main.ts\nexport default {\n  addons: [\n    // ... other addons\n    \"storybook-vue-slots\"\n  ]\n} satisfies StorybookConfig;"},{"note":"Slot definitions must be nested under `parameters.slots` in your CSF meta object. Placing them directly under `meta` will be ignored by the addon.","wrong":"export default meta = {\n  slots: {\n    default: `Default slot content`,\n  },\n};","symbol":"Slot Parameters (Basic)","correct":"export default meta = {\n  parameters: {\n    slots: {\n      default: `Default slot content`,\n    },\n  },\n};"},{"note":"For advanced slot configurations like descriptions, templates, or component wrapping, an object must be used for the slot definition. A direct string value is only for basic default content without additional properties.","wrong":"export default meta = {\n  parameters: {\n    slots: {\n      header: `<AppButton>{{ args.header }}</AppButton>`,\n    },\n  },\n};","symbol":"Slot Parameters (Advanced)","correct":"export default meta = {\n  parameters: {\n    slots: {\n      header: {\n        description: \"Header slot\",\n        template: `<AppButton>{{ args.header }}</AppButton>`,\n        components: { AppButton }\n      },\n    },\n  },\n};"}],"quickstart":{"code":"import type { Meta, StoryObj } from '@storybook/vue3';\nimport MyComponent from './MyComponent.vue';\n\n// --- First, install the addon ---\n// pnpm add -D storybook-vue-slots\n\n// --- Then, configure in .storybook/main.ts (uncomment in your actual file) ---\n// export default {\n//   addons: [\n//     // ... other addons\n//     \"storybook-vue-slots\"\n//   ]\n// } satisfies StorybookConfig;\n\n// --- Example MyComponent.vue ---\n// <template>\n//   <div style=\"border: 1px solid #ccc; padding: 15px; border-radius: 5px;\">\n//     <header><slot name=\"header\">Default Header</slot></header>\n//     <main style=\"margin: 10px 0;\"><slot>Default Content</slot></main>\n//     <footer><slot name=\"footer\">Default Footer</slot></footer>\n//   </div>\n// </template>\n// <script setup lang=\"ts\"></script>\n\nconst meta: Meta<typeof MyComponent> = {\n  component: MyComponent,\n  title: 'Components/MyComponent with Slots',\n  parameters: {\n    slots: {\n      // Basic string content for the default slot\n      default: 'This is the default slot content set via Storybook',\n      // Advanced object for a named slot with description and template\n      header: {\n        description: 'A slot for header content, controllable via args',\n        template: `<div style=\"background-color: #e0f7fa; padding: 8px;\">{{ args.header }}</div>`\n      },\n      // Another named slot demonstrating advanced options\n      footer: {\n        description: 'A slot for footer content, styled and controlled',\n        template: `<p style=\"color: #616161; font-size: 0.9em;\">{{ args.footer }}</p>`\n      }\n    }\n  },\n  // Define argTypes to make slot content controllable in Storybook UI\n  argTypes: {\n    default: { control: 'text', description: 'Content for the unnamed (default) slot' },\n    header: { control: 'text', description: 'Customizable content for the header slot' },\n    footer: { control: 'text', description: 'Customizable content for the footer slot' },\n  }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MyComponent>;\n\nexport const Primary: Story = {\n  args: {\n    default: 'Dynamic content for the default slot!',\n    header: 'Dynamic Header Title',\n    footer: 'Dynamic Footer Information © 2025'\n  },\n  // The component template needs to render the slots using args\n  template: `\n    <MyComponent>\n      <template v-if=\"args.default\" #default>{{ args.default }}</template>\n      <template v-if=\"args.header\" #header>{{ args.header }}</template>\n      <template v-if=\"args.footer\" #footer>{{ args.footer }}</template>\n    </MyComponent>`\n};\n","lang":"typescript","description":"Demonstrates the installation, required configuration in `.storybook/main.ts` (commented), and an example CSF story file showcasing basic and advanced slot content control using `parameters.slots` and `argTypes` integration for UI control."},"warnings":[{"fix":"Refer to the GitHub repository (https://github.com/Korzanicho/storybook-vue-slots) for the most up-to-date information, issue tracking, and specific guidance related to this maintained fork.","message":"This addon is a fork of an older project, explicitly maintained by Webkor to provide updates and compatibility with newer Storybook versions (specifically v9.x). Be aware of its specific lineage if encountering issues or seeking support for older Storybook versions, as its behavior and maintenance may diverge from the original project.","severity":"gotcha","affected_versions":"all"},{"fix":"Ensure your Storybook installation, including `@storybook/vue3` and the core `storybook` package, are at version 9.1.5 or higher to satisfy the addon's peer dependencies. Update your Storybook setup if necessary.","message":"The addon has strict peer dependencies on Storybook v9.1.5+ and `@storybook/vue3` v9.1.5+. Using it with older Storybook major versions (e.g., v8.x or v7.x) or mismatched minor versions may lead to unexpected behavior, build failures, or runtime errors.","severity":"breaking","affected_versions":"<9.1.5"},{"fix":"Always define slots within the `parameters.slots` object in your story's `meta` or individual `StoryObj` definition. Follow the `Basic` or `Standard` usage examples provided in the addon's documentation for correct structure.","message":"Slot definitions in CSF files must be correctly nested under `parameters.slots` within the `meta` object or individual story objects. Incorrect placement or syntax will result in the addon not being able to interpret and render the slot content.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure that advanced slot configurations are defined as objects within `parameters.slots`, e.g., `default: { template: '...' }` instead of `default: '...'`. Basic string definitions are only for simple default content.","cause":"Attempting to define a slot with `description`, `template`, or `components` properties when the slot's value is a simple string, not an object, or if the `slots` object itself is malformed.","error":"TypeError: Cannot read properties of undefined (reading 'template')"},{"fix":"Verify that `storybook-vue-slots` is correctly listed in your `devDependencies` in `package.json` and that the string in `.storybook/main.ts` `addons` array matches exactly: `\"storybook-vue-slots\"`.","cause":"The addon string 'storybook-vue-slots' is misspelled in `.storybook/main.ts` or the package was not correctly installed as a dev dependency (`pnpm add -D storybook-vue-slots`).","error":"Storybook build fails with error related to 'addon-vue-slots' not found or invalid configuration."},{"fix":"Double-check that `parameters.slots` is correctly nested (`meta.parameters.slots`) and that your story's `template` explicitly uses `args.[slotName]` (e.g., `{{ args.default }}`) to dynamically display the content. Also, ensure `argTypes` are defined for the slots if you want them controllable in the Storybook UI panels.","cause":"This often happens if the `parameters.slots` object is placed incorrectly (e.g., directly under `meta` instead of `parameters`), or if the story's `template` does not use `args.[slotName]` to receive and display the slot content.","error":"Slots are not rendered or controllable in Storybook UI, even after configuration in `main.ts` and story files."}],"ecosystem":"npm"}