Storybook for Vue tutorial

Setup Vue Storybook in your development environment

Storybook runs alongside your app in development mode. It helps you build UI components isolated from the business logic and context of your app. This edition of Learn Storybook is for Vue; other editions exist for React, React Native, Angular, Svelte and Ember.

Storybook and your app

Setup Vue Storybook

We’ll need to follow a few steps to get the build process set up in your environment. To start with, we want to use the Vue CLI to setup our build system, and enable Storybook and Jest testing in our created app. Let’s run the following commands:

# Create our application, using a preset that contains jest:
npx -p @vue/cli vue create taskbox --preset chromaui/vue-preset-learnstorybook

cd taskbox

# Add Storybook:
npx -p @storybook/cli sb init
Throughout this version of the tutorial, we'll be using yarn to run the majority of our commands. If you have Yarn installed, but prefer to use npm instead, don't worry, you can still go through the tutorial without any issues. Just add the --packageManager=npm flag to the first command above and both Vue CLI and Storybook will initialize based on this. Also while you progress through the tutorial, don't forget to adjust the commands used to their npm counterparts.

We can quickly check that the various environments of our application are working properly:

# Run the test runner (Jest) in a terminal:
yarn test:unit

# Start the component explorer on port 6006:
yarn storybook

# Run the frontend app proper on port 8080:
yarn serve

Our three frontend app modalities: automated test (Jest), component development (Storybook), and the app itself.

3 modalities

Depending on what part of the app you’re working on, you may want to run one or more of these simultaneously. Since our current focus is creating a single UI component, we’ll stick with running Storybook.

Reuse CSS

Taskbox reuses design elements from the GraphQL and React Tutorial example app, so we won’t need to write CSS in this tutorial. Copy and paste this compiled CSS into src/index.css and then import the CSS into the app by editing the <style> tag in src/App.vue so it looks like:

<!-- src/App.vue -->

  @import './index.css';

Taskbox UI

If you want to modify the styling, the source LESS files are provided here.

Add assets

To match the intended design, you'll need to download both the font and icon directories and place its contents inside your src/assets folder. Issue the following commands in your terminal:

npx degit chromaui/learnstorybook-code/src/assets/font src/assets/font
npx degit chromaui/learnstorybook-code/src/assets/icon src/assets/icon
We use degit to download folders from GitHub. If you want to do it manually, you can grab them here.

We also need to update our storybook script to serve the public directory (in package.json):

  "scripts": {
    "storybook": "start-storybook -p 6006 -s public"

After adding styling and assets, the app will render a bit strangely. That’s OK. We aren’t working on the app right now. We’re starting off with building our first component!

Commit changes

When our project was initialized, Vue CLI already created a local repository for us. At this stage it's safe to add our files to the first commit.

Run the following commands to add and commit the changes we've done so far.

$ git add .

Followed by:

$ git commit -m "first commit"

Let's start building our first component!

Next Chapter
Simple component
Build a simple component in isolation