{"library":"storybook-addon-vue-slots","title":"Storybook Addon for Vue Slots","type":"library","description":"storybook-addon-vue-slots is a Storybook addon designed to enhance the development and documentation of Vue 3 components by providing robust support for defining and controlling component slots directly within Storybook stories. It simplifies the process of creating stories for components with complex or multiple slots, allowing developers to manage slot content via Storybook's controls interface and automatically generate relevant code snippets. The current stable version is `0.9.29`, with active development on `0.9.30-next.x` branches which include breaking changes for future Storybook versions. This addon addresses a common challenge in Vue component development by offering a structured and interactive way to visualize and test slot variations, distinguishing it from general Storybook Vue setups that might require manual template string manipulation for slots. It integrates into the Storybook ecosystem to provide a seamless workflow for Vue component libraries.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install storybook-addon-vue-slots"],"cli":null},"imports":["export default {\n  addons: [\n    // ... other addons\n    'storybook-addon-vue-slots'\n  ]\n} satisfies StorybookConfig;\n","import type { StorybookConfig } from '@storybook/vue3-vite';","export default meta = {\n  parameters: {\n    slots: {\n      default: 'Default content',\n      header: { template: '<h2>Header</h2>' }\n    }\n  }\n};"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":null,"github":"https://github.com/JoJk0/storybook-addon-vue-slots","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/storybook-addon-vue-slots","openapi_spec":null,"status_page":null,"smithery":null},"quickstart":{"code":"<!-- MyButton.vue -->\n<template>\n  <button class=\"my-button\">\n    <slot name=\"icon\" :size=\"iconSize\">✨</slot>\n    <slot>Default Button Text</slot>\n    <slot name=\"footer\"></slot>\n  </button>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nconst iconSize = ref('medium');\n</script>\n\n<style scoped>\n.my-button {\n  padding: 10px 20px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  background-color: #f0f0f0;\n  cursor: pointer;\n}\n</style>\n\n// .storybook/main.ts\nimport type { StorybookConfig } from '@storybook/vue3-vite';\n\nconst config: StorybookConfig = {\n  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],\n  addons: [\n    '@storybook/addon-essentials',\n    'storybook-addon-vue-slots' // Add the Vue Slots addon here\n  ],\n  framework: {\n    name: '@storybook/vue3-vite',\n    options: {},\n  },\n};\n\nexport default config;\n\n// src/stories/MyButton.stories.ts\nimport type { Meta, StoryObj } from '@storybook/vue3';\nimport MyButton from '../components/MyButton.vue';\n\nconst meta: Meta<typeof MyButton> = {\n  component: MyButton,\n  title: 'Components/MyButton',\n  tags: ['autodocs'],\n  parameters: {\n    // Configure slots using the addon's parameters\n    slots: {\n      default: 'Click me!',\n      icon: { template: '<span>🚀</span>' },\n      footer: { template: '<em>Hint: Press Alt+H for help.</em>' },\n    },\n  },\n  argTypes: {\n    // Expose default slot content as an arg for control panel interaction\n    default: {\n      control: 'text',\n      description: 'Content for the default slot',\n    },\n    // Expose icon slot content as an arg\n    icon: {\n      control: 'text',\n      description: 'Content for the named icon slot',\n    },\n  },\n  args: { default: 'Dynamic Button Text', icon: '✨' },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {};\n\nexport const CustomIconAndFooter: Story = {\n  parameters: {\n    slots: {\n      icon: { template: '<span style=\"font-size: 20px;\">⭐</span>' },\n      footer: { template: '<small>Powered by Storybook</small>' },\n    },\n  },\n  args: { default: 'Submit', icon: '⭐' }, // Args for controls\n};","lang":"typescript","description":"This quickstart demonstrates how to set up `storybook-addon-vue-slots` to define and control both default and named slots for a Vue 3 component within Storybook. It includes the component, `main.ts` configuration, and a story file illustrating `parameters.slots` for static content and `argTypes`/`args` for dynamic control via Storybook's UI.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}