A minimalistic framework for demonstrating your Vue components

A minimalistic framework for demonstrating your Vue components

vue-play A minimalistic framework for demonstrating your Vue components, inspired by react-storybook. Live Demo http://vue-play-button.surge.sh/#/ https://egoistian.com/vue-slim-modal/#/ GitHub

vue-play

NPM version NPM downloads Build Status gitter

A minimalistic framework for demonstrating your Vue components, inspired by react-storybook.

preview

Table of Contents

Getting Started

Integrate vue-play into your project using getplay:

yarn global add getplay
cd my-project
getplay

Then you can run yarn play and go to http://localhost:5000

So far we got:

  • npm scripts yarn play & yarn build:play
  • A ./play folder where you write scenarios for your component
  • A ./play.config.js file which helps you configure webpack easily using Poi

The only thing you really need to worry about is ./play/index.js, since you will write scenarios or dynamically load scenarios there.

Writing Scenarios

scenario, a.k.a. story in react-storybook, it's usually an example component for demonstrating your real component.

Keeping Scenarios

You can keep scenarios anywhere you want, by default keep them all at ./play/index.js, you can also use separate files for them, or even name them *.play.js in your component directory and load them dynamically.

Writing Scenarios

import { play } from 'vue-play'
import MyButton from '../src/components/MyButton.vue'

// Use `play` to describe component title
// use .add to add scenario for that component
play('MyButton')
  .add('with text', h => h(MyButton, ['hello world']))
  .add('with emoji', h => h(MyButton, ['

Github Repository