I've spent the past few months experimenting with React and Vue in order to familiarize myself with view layers other than blaze.

I've been using a component-first approach when working with these libraries, and found Storybook to be an invaluable tool for react development. Before giving Vue a try, I looked for a Storybook-like alternative and was pleased to find vue-play.

While not as sophisticated as Storybook, vue-play does meet the basic need: show a list of components and their configurations.

@egoist has put a lot of work into making the package as easy to install as possible. In this post, I'll describe how I added vue-play to my existing vue-cli webpack project.

I created a more detailed (and updated) set of instructions here. I will leave the following in place for older versions of vue-play.

The first step is to get the pacakges:

npm install -D vue-play vue-play-cli

Note that we'll be using vue-play-cli to make the webpack magic happen. I've tried manually configuring webpack for vue-play, and found it to be a huge pain.

Next, add a play script to your package.json. Your scripts section should look like this:

"scripts": {
  "dev": "node build/dev-server.js",
  "play": "vue-play start ./src/play --webpack-config ./build/webpack.dev.conf.js",
  ...
},

Now add src/play/index.js. I recommend using a script to load all of your scenarios (stories) for you. Mine looks like this:

import { configure } from 'vue-play';

// import any global css for your application
import '../css';

const load = requireContext => requireContext.keys().map(requireContext);
const scenarios = load(require.context('./scenarios', true, /.js$/));
configure(scenarios, module);

In other words, it looks through the src/play/scenarios directory and automatically loads all the js files. This ends up being a lot easier than manually importing them each time one is added.

Finally, we'll add a scenario - this example will be src/play/scenarios/FancyButton.js:

import { play } from 'vue-play';
import FancyButton from 'components/FancyButton';

play('FancyButton', module)
  .add('default', h => h(FancyButton));

When you're ready, you can npm run play and browse your components. Enjoy!