How to setup Storybook in VueJS

In this post, we will take a look at how to setup storybook in our VueJS application.

What is Storybook?

Storybook is a tool for developing UI components / libraries faster and in isolation. Storybook is an excellent addition to a project development cycle as it allows you to work on one component at a time and develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application. It can also be used to write a documentation (story) of what each component does: for the parameters it accepts, the event it emits and response to expect.

A story describes a component in a specified state. You'd want to write a story for each state a component can have, such as active, inactive, loading. Storybook will then let you preview the component in its specified state in an interactive component library.

Setup our Project

Let’s start by creating our VueJS project. We would be using yarn for package management.

Using Vue CLI

Install Vue CLI if you don't already have it installed.

yarn global add @vue/cli

Create vue app

vue create your-app

Enter 'your-app' folder

cd your-app

Add storybook

yarn add --dev @storybook/vue

Add Storybook to package.json

{
   "scripts": {
   	"storybook": "start-storybook -p 9001 -c .storybook -s public",
   }
} 

-p command refers to the port number where the Storybook will be run. -c command refers to the config directory. -s command refers to directory to load static / public files

run the following command, we should now see storybook running on port :9001

yarn storybook

Let's Configure Storybook in our VueJS project

As a best practice, Storybook configuration should be stored in a directory called .storybook.

Create .storybook directory as the config directory in the project root

Mkdir .storybook

Next lets create our config file

Create main.js inside our .storybook folder

module.exports = {
  stories: [""],
  addons: ["@storybook/addon-actions", "@storybook/addon-knobs"],
};

The main configuration file main.js controls the behaviour of the Storybook server.

• stories - an array of globs that describes the location of your story files, relative to main.js. This makes the maintenance of the main.js file much easier by keeping it highly focused on the configuration of Storybook rather than its implementation. You can require as many stories as you need.
• addons - a list of all the addons you are using (we will be describing what addons are as we go).
• babel - custom babel configuration.

Note: you must always restart the Storybook’s process when you modify the main.js so as to update it.

Our folder structure should look like this:

Let's write a story for a button component

First, let's write our custom button component - ../src/component/button.vue

<template>
  <button :class="{ 'loading': isLoading }" @click="clickButton">
    <slot></slot>
    {{ isLoading ? '- loading' : '' }}
  </button>
</template>
<script>
export default {
  name: "MyButton",
  props: {
    name: { type: String, required: true },
    isLoading: { type: Boolean, default: false },
  },
  methods: {
    clickButton() {
      this.$emit("buttonClicked", `${this.name}-button clicked`);
    },
  },
};
</script>

Let's write stories inside ./src/stories/button.stories.js

import { action } from "@storybook/addon-actions";
import { withKnobs, text, boolean } from "@storybook/addon-knobs";
import MyButton from "../components/button.vue";

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

export const Button = () => ({
  props: {
    name: {
      type: String,
      default: text("Name", "MyButton!"),
    },
    isLoading: {
      type: Boolean,
      default: boolean("isLoading", true),
    },
  },
  components: { MyButton },
  template: `<MyButton :name="name" :isLoading="isLoading" @buttonClicked="action">Click Me!</MyButton>`,
  methods: {
    action: action("button-clicked"),
  },
});

Button.story = {
  name: "Button",
};

Addons are plugins in Storybook used to perform advanced functionalities on components. Examples are actions, knobs etc.

• The actions addon is used to display data received by an event handler (callback) arguments in your stories.

• The knobs addon allows you to dynamically interact with a component’s args (inputs). Experiment with alternate configurations of the component to discover edge cases.

Update our main.js file. Now let's add the path from main.js to our stories folder:

  stories: ["../src/stories/*.stories.js"],

Let's stop our storybook server and run it again

yarn storybook

Now if we click on the button we would notice that there's a log of the event under actions in our storybook.

If we click on the knobs tab, we would be able to edit the values that our component accepts and see how they change in realtime.

Conclusion

Yes! We've been able to setup Storybook in VueJS and have also built a simple button component to test out knobs and actions.

For more complex examples like using Vuex store in stories, check out Using Storybook with VueJS.

If you have any questions or run into any trouble, feel free to reach out on Twitter or Github.