@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 for Vue 3

Storybook for Vue 3 is a UI development environment for your Vue 3 components. With it, you can visualize different states of your UI components and develop them interactively.

Storybook runs outside of your app. So you can develop UI components in isolation without worrying about app specific dependencies and requirements.

Getting Started

cd my-vue3-app
npx -p @storybook/cli sb init

For more information visit: storybook.js.org

---

Storybook also comes with a lot of addons and a great API to customize as you wish. You can also build a static version of your storybook and deploy it anywhere you want.

Extending the Vue application

Storybook creates a Vue 3 application for your component preview, which can be imported as import { app } from '@storybook/vue3'.

When using global custom components (app.component), directives (app.directive), extensions (app.use), or other application methods, you will need to configure those in the ./storybook/preview.js file.

For example:

// .storybook/preview.js

import { app } from '@storybook/vue3';

app.use(MyPlugin);
app.component('my-component', MyComponent);
app.mixin({ /* My mixin */ });