Storybook for Vue

Why use Storybook?

Using Storybook with Vue

Bootstrap Vue JS project from @vue/cli

npm install -g @vue/cli@latest
# Uninstall
npm uninstall -g vue-cli
# Install the latest version
npm install -g @vue/cli@latest
# Create a project
vue create storybook-project

Install Storybook for Vue

npm i --save-dev @storybook/vue
{
"scripts": {
"storybook": "start-storybook -p 8081"
}
}
npm i --save-dev babel-preset-vue

Configuring Storybook

import { configure } from '@storybook/vue';
configure(require.context('../src', true, /\.stories\.js$/), module);

Writing the first Story

import HelloWorld from './HelloWorld.vue';
import { storiesOf } from '@storybook/vue';

const stories = storiesOf('HelloWorld', module)

stories.add('with hello message', () => ({
components: { HelloWorld },
props: {
msg: {
default: "Hello"
}
},
template: '<HelloWorld :msg="msg"/>'
}));
npm i --save-dev @storybook/addon-knobs
import '@storybook/addon-knobs/register';
import HelloWorld from './HelloWorld.vue';
import { storiesOf } from '@storybook/vue';
import { withKnobs, text } from '@storybook/addon-knobs';

const stories = storiesOf('HelloWorld', module)

// Add the `withKnobs` decorator to add knobs support to your stories.
stories.addDecorator(withKnobs);

stories.add('with hello message', () => ({
components: { HelloWorld },
props: {
msg: {
/*
* The text(label, defaultValue) method from Knobs allows you to receive
* value dynamically in the Storybook Ui.
*/
default: text('Text', 'Hello Storybook')
}
},
template: '<HelloWorld :msg="msg"/>'
}));

Running Storybook

npm run storybook
"build-storybook": "build-storybook -c .storybook -o .out"

Summary

--

--

--

Sr. Software Engineer at Tesla

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to create a timer that increments every second in Javascript

Adding Graphics to a React App with D3 — Lab Color, Drag and Drop, and Zoom

jQuery — Element Index and Event Object

Node.js Tips — Body Parser Errors, Static Files, and Update Collections

RxJS by Example: Part 2

Main ECMAscript 2021 Features

Add a Dialog Box to a Vue App with the vue-js-modal Library

Functional JavaScript — Higher-Order Functions in the Real World

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kailaash Balachandran

Kailaash Balachandran

Sr. Software Engineer at Tesla

More from Medium

Vuex on large projects: How to structure it ?

Vuex modules

CSS Display Property

How to use Material Design Icons with Nuxt.js efficiently

Animated display images one after one with VueJS & TailwindCSS