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:

• https://storybook.js.org/docs/riot/essentials/controls