{"library":"storybook-vue-slots","title":"Storybook Vue Slots Addon","type":"library","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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install storybook-vue-slots"],"cli":null},"imports":["// .storybook/main.ts\nexport default {\n  addons: [\n    // ... other addons\n    \"storybook-vue-slots\"\n  ]\n} satisfies StorybookConfig;","export default meta = {\n  parameters: {\n    slots: {\n      default: `Default slot content`,\n    },\n  },\n};","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};"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":null,"github":"https://github.com/Korzanicho/storybook-vue-slots","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/storybook-vue-slots","openapi_spec":null,"status_page":null,"smithery":null},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}