@storybook/vue

Component Development

Allows developers to create and display different states of Vue components in isolation. This helps in visualizing and testing components independently.

import { storiesOf } from '@storybook/vue';
import MyButton from './MyButton.vue';

storiesOf('MyButton', module)
  .add('default', () => ({
    components: { MyButton },
    template: '<my-button>Default</my-button>'
  }))
  .add('with emoji', () => ({
    components: { MyButton },
    template: '<my-button>😀 😎 👍 💯</my-button>'
  }));

Addons

Supports various addons to enhance the development experience, such as knobs for dynamic prop editing, actions for event handling, and more.

import { withKnobs, text } from '@storybook/addon-knobs';
import MyButton from './MyButton.vue';

export default {
  title: 'MyButton',
  decorators: [withKnobs],
};

export const withText = () => ({
  components: { MyButton },
  props: {
    buttonText: {
      default: text('Button Text', 'Hello Storybook'),
    },
  },
  template: '<my-button :text="buttonText" />',
});

Documentation

Enables the creation of interactive documentation for components, making it easier for other developers to understand and use them.

import { Meta, Story } from '@storybook/vue';
import MyButton from './MyButton.vue';

export default {
  title: 'MyButton',
  component: MyButton,
} as Meta;

const Template: Story = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { MyButton },
  template: '<my-button v-bind="$props" />',
});

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};