Get started

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 and Angular.

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 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 --preset hichroma/vue-preset-learnstorybook taskbox
cd taskbox

# Add Storybook:
npx -p @storybook/cli getstorybook

Make some adjustments

We need to make a couple of small adjustments to storybook's config to ensure that it works well with our Vue CLI application. First, let's merge the babel.config.js that Vue CLI created with the .babelrc that storybook created. We'll remove the babel.config.js and change .babelrc to:

{
  "presets": ["@vue/app"]
}

Also, we'll add a .storybook/webpack.config.js to ensure that Storybook understands a couple of Vue webpack conventions:

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');

module.exports = (storybookBaseConfig, configType) => {
  storybookBaseConfig.plugins.push(new VueLoaderPlugin());
  storybookBaseConfig.module.rules.push({
    test: /\.css$/,
    use: ['vue-style-loader', 'css-loader'],
  });
  storybookBaseConfig.resolve = {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      '@': path.join(__dirname, '..', 'src'),
    },
  };
  return storybookBaseConfig;
};

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 run storybook

# Run the frontend app proper on port 8080:
yarn serve
NOTE: If yarn test throws an error, you may need to install watchman as advised in this issue.

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. We’ll simply compile the LESS to a single CSS file and include it in our app. Copy and paste this compiled CSS into the src/index.css file per CRA’s convention.

Taskbox UI

If you want to modify the styling, the source LESS files are provided in the GitHub repo.

Add assets

We also need to add the font and icon directories to the public/ folder.

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!

Keep your code in sync with this chapter. View d1c4858 on GitHub.
Tweet "I’m learning Storybook! It’s a great dev tool for UI components."
Simple component
Build a simple component in isolation