Storybook for Vue.js — Installation and First Experience

What is Storybook

I have constantly been hearing about the Storybook with the React Ecosystem. It’s a commonplace where the Developers and Designers can come together and collaborate in order to build complex applications on the go. It helps to keep each component in one place and lets any developer edit that component as well as help them to enrich them. It’s a living style guide as well.

After such a buzz about the Storybook for React, I felt to go ahead and try out the new Storybook which is available for the Vue.js. So let’s go ahead, install and make a simple component and see how fast do we develop the application and how helpful is it.

We do have a video documenting the whole process of Installation and Experimentation setting up the environment where you can work or you can go ahead and follow out Tutorials below.

Installation of Storybook

1. Let’s use the vue-cli to create a vue project.
2. Navigate to the project
3. Now let’s add @storybook/vue to the dependencies
4. Once you have installed this dependency you need to create a start script describing the storybook configuration. That can be done by creating a .storybook folder in the root directory and then creating a simple configuration into it. We will do it as follows and remember we are creating a simple button. The file will be called config.js. It will be made inside .storybook folder.
5. In the below-mentioned code, you can see that we import our Button Component.
6. Then register our component with a specific name here my-button
7. Then load the stories from the folder scr and then projects it out
8. Remember you need to register each component to this particular configuration so that the components can be made.

• import { configure } from ‘@storybook/vue’; import Vue from ‘vue’; // Import your custom components. import Mybutton from ‘../src/storybook/Button.vue’; // Register custom components. Vue.component(‘my-button’, Mybutton); function loadStories() { // You can require as many stories as you need. require(‘../src/storybook’); } configure(loadStories, module);

1. After this, we will go ahead and create a folder called storybook inside the src folder. This is where all our code will reside. Here in order to get started, we need to create an index.js file. This will help us to configure storybook further and help us to write the stories.
2. We import the storiesOf from the storybook and then use it to make our new Stories.
3. These new stories will be visible on the UI created by the framework

• import Vue from ‘vue’; import { storiesOf } from ‘@storybook/vue’; import MyButton from ‘./Button.vue’; storiesOf(‘MyButton’, module) .add(‘story as a component’, () => ({ components: { MyButton }, template: ‘<my-button :rounded=”true”>rounded</my-button>’ }));

1. Now let’s create the missing Button component for which we have written the story. The Button component will be a single file which will serve us for the entire project.
2. Here you can see that the code is pretty simple just representing the component itself. Simple yet useful.

• <template> <button class=”button”>{{buttonName}}</button> </template> <script> module.exports={ data:function(){ return { buttonName:’Test Button’ } } } </script>

1. The last thing is to update the Run Script in the package.json. This will help us run the Storybook along with the storybook configuration. This configuration will be read while executing the command. You can add this single script onto the script section and this will work flawlessly

• “scripts”: { “storybook”: “start-storybook -p 9001 -c .storybook” },

1. Now let’s fire up the server using the above command and see the entire Storybook in action.

• npm run storybook

You are done. You should see something like this screen as shown below.

Vue.js Storybook Test App

Conclusion

Storybook can be a really productive tool for both the Developers and Designer and we will produce more tutorials on configuring storybook along with the usage of it with various other frameworks like React, Angular etc. Stay Tuned and subscribe to us to get the latest updates on Vue.js.

NOTE: IF you have not set up your workspace yet you always can refer to these Tutorials to get started

1. An introduction to Vue Framework?
2. Getting Started with Vue using Fiddle
3. Learn Fast Handling User Inputs & form bindings using Vue
4. Easily Bind Select and Multi-select using Vue
5. Learn to make a ToDo List — Vue Component Creation
6. Vue ToDo list with Delete Option & Global Event Bus — Part II
7. How to Create Global Event Bus using Vue.js?
8. Learn how to work with Computed Properties in VueJS
9. How to Use Vue.js watchers for Async Updates?
10. Make a Basic HTML Editor using Vuejs v-html directive
11. Prevent XSS in Vue.js using Google Caja
12. How does Event Handling work in Vue.js?

Originally published at The Web Juice.