Integrate Storybook with VueJS

What is Storybook?

Storybook lets us interactively develop and test user interface components without having to run an application. Because Storybook acts as a component library with its own Webpack configuration, so we can develop in isolation without worrying about project dependencies and requirements.

You can access its official documentation here. In this blog, we are going to learn how to integrate Storybook in a Vue.js project.

Create a new Vue project using Vue CLI

1. Add Vue CLI globally on your system using the following command.

npm install -g @vue/cli
OR
yarn global add @vue/cli

2. Add Vue CLI Service globally using the following.

npm install -g @vue/cli @vue/cli-service-global
OR
yarn global add @vue/cli @vue/cli-service-global

3. Create a new Vue project.

vue create storybook-demo

4. Setting up Storybook with our project

npx sb init
npm run storybook

The command above will make the following changes to your local environment:

• 📦 Install the required dependencies.
• 🛠 Setup the necessary scripts to run and build Storybook.
• 🛠 Add the default Storybook configuration.
• 📝 Add some boilerplate stories to get you started.

5. Install CSS-related NPM packages in order to load CSS styles inside your Storybook stories by issuing this command.

yarn add vue-loader babel-loader babel-preset-vue
yarn add css-loader style-loader

6. Finally, create an npm script that lets you start and run Storybook easily. Under the scripts section of your package.json file, add the following:

“storybook”: “start-storybook -p 6006 -c .storybook”

The -p command argument specifies the port where Storybook is going to run locally: in this case 6006. The -c command argument tells Storybook to look for a .storybook directory for configuration settings.

7. Configuring Storybook with Vue

Within .storybook directory, create a main.js file to hold all the configuration settings.

The main configuration file, main.js controls the behavior of the Storybook server.

• Stories — an array of globs that describe 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.
• Add-ons — a list of all the add-ons you are using (we will be describing what add-ons 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.

8. To use any third-party libraries or UI component library, you can configure it in preview.js in the .storybook directory

import Buefy from "buefy";
import VueMoment from 'vue-moment';
import "@fortawesome/fontawesome-free/css/fontawesome.css";
Vue.use(VueMoment);

Here, I have used Buefy for UI Components and VueMoment for utilizing different filters of Moment.js.

9. Creating Stories from Storybook.

The above image shows the code for trafficlights.stories.js. I have used a simple traffic lights component whose state can be altered using Storybook Controls. The below image shows the current state of isActive as true, hence the traffic light displayed is green in color.

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

• The actions add-on is used to display data received by an event handler (callback) arguments in your stories.
• The knobs add-on allows you to dynamically interact with a component’s args (inputs). Experiment with alternate configurations of the component to discover edge cases.

We can pass multiple props to our custom story and manipulate them using these Controls. Hence, Storybook helps you document components for reuse and automatically visually test your components to prevent bugs.

10. Import assets into stories

You can import any media assets by importing them. Configure a directory (or a list of directories) where your assets live when starting Storybook.

Use the-s flag in your npm script like so:

"start-storybook": "start-storybook -s ./public -p 6006"

Here ./public is your static directory.

11. Customize your Story Layout

The layout global parameter allows you to configure how stories are positioned in Storybook's Canvas tab.

You can add the parameter to your ./storybook/preview.js, like so:

// .storybook/preview.js  
export const parameters = { layout: 'centered' };

Storybook will center all stories in the UI. layout accepts these options:

• centered: center the component horizontally and vertically in the Canvas
• fullscreen: allow the component to expand to the full width and height of the Canvas
• padded: Add extra padding around the component

If you want to use your own styles, use decorators instead.

The above steps will enable you to setup Storybook and start writing stories in it. For further information, refer the official documentation of Storybook — https://storybook.js.org/docs/vue/get-started/introduction