vue-play

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

Table of Contents

• Getting Started
• Writing Scenarios
  • Keeping Scenarios
  • Writing Scenarios
  • Loading Scenarios Dynamically
  • Register Components
  • Use Component as play() argument
• Component Shorthand
• Additional Component Properties
  • example
  • readme
• Component Injection
  • this.$log(data)
• Showcase
• Development
• License

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, ['