Skip to content

How to Set Up Storybook in VueJS

🔗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

install vue-cli

Create vue app

vue create your-app

Create VueJS Application

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: Storybook Vue Folder Structure

🔗Let's write a story for a button component

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

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

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. Example Storybook Actions Addon

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. Example Storybook Knobs Addon


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.

This Dot Labs is a development consultancy that is trusted by top industry companies, including Stripe, Xero, Wikimedia, Docusign, and Twilio. This Dot takes a hands-on approach by providing tailored development strategies to help you approach your most pressing challenges with clarity and confidence. Whether it's bridging the gap between business and technology or modernizing legacy systems, you’ll find a breadth of experience and knowledge you need. Check out how This Dot Labs can empower your tech journey.

You might also like