Written ByVirti Shah

Development

Published:Thu Feb 23 2023

15 mints read

Summary

Integrating Storybook with Vue.js allows developers to create a separate environment for developing and showcasing UI components in isolation. Storybook is a powerful tool that helps streamline UI development by providing a playground where developers can build, test, and document individual components outside of the main application.

Table of contents

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

2. Add Vue CLI Service globally using the following.

3. Create a new Vue project.

4. Setting up the Storybook with our project.

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

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:

7. Configuring Storybook with Vue.

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

9. Creating Stories from Storybook.

10. Import assets into stories.

11. Customize your Story Layout

What is Story Book?

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, 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 into 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 the 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.
• 🛠 Set up 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 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 the .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 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' };

The 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 styles, use decorators instead.