Getting Started with Storybook for Vue

Storybook is an open-source tool for developing UI components in isolation.

It works with React, Vue, Angular, and other frameworks.

In this article, we’ll look at how to add Storybook to our Vue project and create our components.

Install Storybook

To get started with Storybook, we create a new Vue project with Vue CLI.

We run npx vue create . in an empty project folder to create a Vue project.

Then we follow the instructions to complete the process.

Once we did that, we run:

npx sb init

to create the Storybook project.

Once we did that, we run:

npm run storybook

in our Vue project folder to run Storybook in our Vue project.

Then we should see the Storybook screen in our browser.

It has a collection of links to the Storybook components and we can preview them.

Story

Once we have Storybook set up, we can create our stories.

A story is a collection of components that we can preview in Storybook.

The preview includes the possible states and props that it can take and what it looks like with them.

It also includes the docs.

In the preview screen, we can edit the props and preview what it’ll look like with them in the Controls tab.

Write Stories

We can put stories in the strotries folder.

To start, we add a .js or .ts file for our story.

For example, we can create a button.

In the stories folder, we add a Button.vue file to create our Storybook component:

<template>
  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
</template>

<script>
import './button.css';

export default {
  name: 'my-button',

props: {
    label: {
      type: String,
      required: true,
    },
    primary: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: 'medium',
      validator (value) {
        return ['small', 'medium', 'large'].includes(value);
      },
    },
    backgroundColor: {
      type: String,
    },
  },

  computed: {
    classes() {
      return {
        'button': true,
        'button-primary': this.primary,
        [`button-${this.size}`]: true,
      };
    },
    style() {
      return {
        backgroundColor: this.backgroundColor,
      };
    },
  },

  methods: {
    onClick() {
      this.$emit('onClick');
    },
  },
};
</script>

Our component takes a few props to let us style our button.

label is for the label text.

primary is a boolean for changing the colors of the button.

size is the size of the button.

backgroundColor is the background color.

We imported button.css in the same folder, which has:

.button {
  border-radius: 3em;
  cursor: pointer;
  display: inline-block;
}
.button-primary {
  color: white;
  background-color: lightblue;
}
.button-small {
  font-size: 12px;
}
.button-medium {
  font-size: 16px;
}
.button-large {
  font-size: 20px;
}

To make it show in Storybook, we’ve to add a Button.stories.js file with the following code:

import MyButton from './Button.vue';

export default {
  title: 'Example/Button',
  component: MyButton,
  argTypes: {
    backgroundColor: { control: 'color' },
    size: { control: { type: 'select', options: ['small', 'medium', 'large'] } },
  },
};

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

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

export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Button',
};

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Button',
};

All the exported items will be shown by Storybook.

The default export has the title, component, and argTypes .

title is the title shown in Storybook.

component is the component we want to preview.

argTypes define the controls that we can set to change prop values.

The names are the same as the prop names.

We also have the Template object that sets the props to the argType keys.

components with the component to preview.

template for the component to preview.

v-bind='$props' passes all props to the my-button component.

Then 3 exports at the bottom define the preset styles that we want to show the button with.

We pass in some args and they’ll be set as props.

Now we should see the component displayed in the sidebar.

Conclusion

We can create a Storybook with Vue by creating a Vue CLI project and then add Storybook code to it.

Then we can add our components and stories.