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"
/>
- Documentation: https://storybook.js.org/docs/react/configure/story-rendering#adding-to-head/
- Source: https://stackoverflow.com/questions/49317070/how-to-include-fonts-package-and-css-frameworks-in-angular-story-book
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()
- Source: https://stackoverflow.com/questions/65875856/how-to-register-global-vue-components-in-storybook
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:
- Outdated: https://github.com/storybookjs/storybook/issues/4001
- Source: https://storybook.js.org/docs/react/configure/webpack?sm_au=iNVM4TVS1f4M4LQ6#extending-storybooks-webpack-config
## 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: