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
A minimalistic framework for demonstrating your Vue components, inspired by react-storybook.
Table of Contents
- Getting Started
- Writing Scenarios
- Component Shorthand
- Additional Component Properties
- Component Injection
- 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, ['
Github Repository
Tags: #VueJs #Framework