← Back
storybook vue

Add storybook to vue project

Install #

npm i -D @storybook/addon-actions @storybook/addon-essentials @storybook/addon-links @storybook/builder-webpack5 @storybook/preset-scss @storybook/vue

Add scripts to package.json:

{
"scripts": {
...
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"

}
}

Config #

Add ./storybook/main.js:

module.exports = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/preset-scss",
],
core: {
builder: "webpack5",
},
};

Add ./storybook/preview.js:

export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};

Use #

Add a MyButton.stories.js:

import MyButton from "./MyButton";

export default {
title: "MyButton",
component: MyButton,
};

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

export const Basic = Template.bind({});
Basic.args = {
text: "Basic",
};

NOTE: Don't forget to bind all properties in the template.


Extras #

Google fonts #

Add a file named ./.storybook/preview-head.html with the html tags that you want to insert:

<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap"
rel="stylesheet"
/>

Register global components #

We use a lot of global components. The standard way to add it to storybook is by declaring them in the .storybook/preview.js file:

import Vue from "vue";
import { ElButton } from "element-ui";

Vue.component(ElButton.name, ElButton);

But since I have a lot of global components in the application, I've prefer to extract the registraion from src/main.js into registerGlobalComponents.js file:

import Vue from "vue";
import { ElButton } from "element-ui";

export function registerGlobalComponents() {
Vue.component(ElButton.name, ElButton);
}

And invoke this file from src/main.js and .storybook/preview.js:

import { registerGlobalComponents } from '../src/registerGlobalComponents'

...
registerGlobalComponents()

Add sass support #

It seems that needs to add a webpack loader (at .storybook/main.js):

const path = require('path');

module.exports = {
...
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
});

return config;
},
};

Resources:


## Show selector in controls

Given the following component:

You can use argTypes in the default export:

import Button, { VALID_TYPES, VALID_SIZES } from "./Button";

export default {
title: "Button",
component: Button,
argTypes: {
type: {
options: VALID_TYPES,
},
size: {
options: VALID_SIZES,
},
},
};

Allow @/components/ path style #

Add a resolve alias to webpack configuration (.storybook/main.js):

const path = require("path");

module.exports = {
...

webpackFinal: async (config) => {
config.resolve.alias = {
vue$: "vue/dist/vue.esm.js",
"@": path.resolve(__dirname, "../src"),
};

return config;
},
};

In my case, I got the following error:

gola

That could be fixed by adding it to the alias object:

config.resolve.alias = {
vue$: "vue/dist/vue.esm.js",
"@": path.resolve(__dirname, "../src"),
AutoNumeric: "autonumeric/dist/autoNumeric.min",
};

Source: https://github.com/storybookjs/storybook/issues/2695#issuecomment-626243723


Resources: