Storybook.js for Vue example

Storybook.js for Vue example

Storybook.js for Vue example This Storybok example is based on Vue CLI 3.0, some libraries required by Storybook are already installed by Vue CLI except `babel-preset-vue` that you should install it manually.

vue-storybook-example

Storybook.js for Vue example

Step by step setup

This Storybok example is based on Vue CLI 3.0, some libraries required by Storybook are already installed by Vue CLI except babel-preset-vue that you should install it manually.

  1. Create Vue project using Vue CLI

    vue create your-app
    cd your-app
    
  2. Add @storybook/vue

    yarn add --dev @storybook/vue
    
  3. Add babel-preset-vue

    yarn add --dev babel-preset-vue
    
  4. Add Storybook run and build scripts to your package.json

    {
       "scripts": {
           "storybook": "start-storybook -p 9001 -c .storybook -s public",
           "storybook:build": "build-storybook -c .storybook -o .out -s public"
       }
    } 
    

    The -p command refer to the port number where the Storybook will be run. The -c command refer to the config directory. The -o command refer to directory where to store built files. The -s command refer to directory to load static / public files

  5. Create .storybook directory as the config directory

  6. Create .storybook/config.js as config file

    import { configure } from '@storybook/vue'
    import Vue from 'vue'
    
    // import your vue plugins
    import Vuex from 'vuex'
    
    // import your custom components
    import Button from '../src/stories/Button.vue'
    
    // install your vue plugins
    Vue.use(Vuex);
    // register your custom components
    Vue.component('my-button', Button);
    function loadStories() {
        // you can require as many stories as you need
        require('../src/stories');
    }
    configure(loadStories, module);
    

    Note: All custom components and Vue plugins should be registered before calling configure().

  7. Create ../src/stories directory as the place your Storybook stories

  8. Write your stories inside ../src/stories/index.js

    import Vue from 'vue'
    import { storiesOf } from '@storybook/vue'
    import Button from './Button.vue'
    storiesOf('Button', module)
    .add('Button as a template', () => (
        '<my-button>button as template</my-button>'
    )
    add('Button as a component', () =>({
        components: {'the-button': Button},
        template: '<the-button>button as component</the-button>'
    }));
    
  9. Write your custom component, in this case ../src/stories/Button.vue

    <template>
        <button><slot/></button>
    </template>
    
  10. Run your Storybook

    yarn storybook
    
  11. To build your Storybook

    yarn storybook:build
    

    .out directory will be created with built files and ready to upload to your hosting server.

Add Support to SCSS

By default Storybook not support SCSS even project the created using Vue CLI support SCSS or other preprocesor CSS. This is because Storybook use different Webpack. You must extend Storybook Webpack's config by creating webpack.config.js inside .storybook directory and define SCSS or your other style loader.

//.storybook/webpack.config.js
const path = require("path");

module.exports = (baseConfig, env, defaultConfig) => {
    defaultConfig.module.rules.push({
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"],
        include: path.resolve(__dirname, "../")
    });
    return defaultConfig;
};

Alias

With Vue CLI each time URL started with @ it will aliases to <projectRoot>/src. But since Storybook use different Webpack this URL alias will not work and your existing Vue components will not work. To fix this issue you should define URL alias setup manually by extend Storybook webpack's config.

//.storybook/webpack.config.js
const path = require("path");

module.exports = (baseConfig, env, defaultConfig) => {
    defaultConfig.resolve.alias = {
        ...defaultConfig.resolve.alias,
        "@": path.resolve(__dirname, "../src")
    };
    return defaultConfig;
};

Vue-Router

To enable vue-router you can implement addDecorator and use storybook-vue-router with the following steps:

  1. Add storybook-vue-router

    yarn add -D storybook-vue-router
    
  2. Add @storybook/addon-actions as storybook-vue-router require this addons.

    Note: If you're already installed it you can jump to next step

    yarn add -D @storybook/addon-actions
    
  3. Use storybook-vue-router as decorator in your stories

    // .src/stories/index.js
    
    import { storiesOf } from '@storybook/vue'
    import StoryRouter from 'storybook-vue-router'
    
    import App from '@/App'
    
    //import your router
    import router from '@/router'
    
    storiesOf('App', module)
     .addDecorator(StoryRouter({}, router.options))
     .add('app', () => ({
         render: h => h(App)
     }));
    
  4. Read storybook-vue-router-guide

Further Reading

Storybook Quick Start Guide

Storybook for Vue

Writing Stories

Custom Webpack Config

Using Addons

Download Details:

Author: janumedia

Live Demo: https://vue-storybook-example.netlify.app/

GitHub: https://github.com/janumedia/vue-storybook-example

vuejs vue javascript vue-js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

Vue.js image clipping Components using Vue-Rx

vuejs-clipper .Vue.js image clipping components using Vue-Rx. Add image clipping components to your Vue application in nothing flat. Touch devices supported and fully responsive.

Vue.js JWT Authentication with Vuex and Vue Router

Build a Vue.js JWT Authentication application using Vuex, Vue Router, VeeValidate - JWT authentication with Vue, Vuex, Vue Router that supports VeeValidate

Vue.js JWT Authentication with Vuex and Vue Router

Vue Vuex JWT Auth .Vue.js JWT Authentication with Vuex and Vue Router