@storybook/vue3

What is @storybook/vue3?

@storybook/vue3 is a tool for developing UI components in isolation for Vue 3 applications. It allows developers to build, test, and document components in a standalone environment, which helps in creating robust and reusable components.

What are @storybook/vue3's main functionalities?

Component Development

Allows developers to create and showcase different states of Vue 3 components in isolation.

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

storiesOf('MyButton', module)
  .add('default', () => ({
    components: { MyButton },
    template: '<my-button>Default</my-button>',
  }))
  .add('primary', () => ({
    components: { MyButton },
    template: '<my-button primary>Primary</my-button>',
  }));

Interactive Documentation

Enables the creation of interactive documentation for components, allowing users to see how components behave with different props and states.

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

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

const Template: Story = (args) => ({
  components: { MyButton },
  setup() {
    return { args };
  },
  template: '<my-button v-bind="args" />',
});

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

Add-ons Support

Supports various add-ons to enhance the development experience, such as knobs for dynamic prop editing.

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

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

export const withKnobsExample = () => ({
  components: { MyButton },
  props: {
    label: {
      type: String,
      default: text('Label', 'Button'),
    },
    primary: {
      type: Boolean,
      default: boolean('Primary', false),
    },
  },
  template: '<my-button :primary="primary">{{ label }}</my-button>',
});

Other packages similar to @storybook/vue3

vue-styleguidist

Vue Styleguidist is a component development environment with a focus on documentation. It allows developers to create and maintain a living style guide for Vue components. Compared to @storybook/vue3, Vue Styleguidist is more focused on documentation and less on interactive component development.

docz

Docz is a documentation tool that supports multiple frameworks, including Vue. It allows developers to create interactive documentation for their components. While it provides similar documentation capabilities as @storybook/vue3, it is more general-purpose and not specifically tailored for Vue 3.

vue-play

Vue Play is a minimalistic library for developing and testing Vue components in isolation. It offers a simpler and more lightweight alternative to @storybook/vue3, but lacks some of the advanced features and add-ons that Storybook provides.

README

Storybook Vue3 renderer