vue-play

3.2.1 verified Fri May 01 auth: no javascript deprecated

A minimalistic framework for demonstrating Vue components, inspired by react-storybook. Version 3.2.1 is the latest stable release, but the package is effectively unmaintained since 2017 and no longer works with modern Vue 2+ or Node versions. It was a precursor to tools like Storybook for Vue. Key differentiator: lightweight, zero-config setup for component demos, but limited to Vue 2 and outdated build tooling (vbuild).

Common errors

error Cannot read property 'play' of undefined ↓

cause The package is not installed or the import path is wrong.

fix

Run 'npm install vue-play' and use 'import { play } from 'vue-play''

error Module not found: Can't resolve 'vue-play' ↓

cause The package is missing from node_modules.

fix

Install the package: npm install vue-play --save-dev

Warnings

deprecated vue-play is deprecated and no longer maintained. It does not work with Vue 2.0+ without extra configuration and uses outdated build tools. ↓

fix Migrate to Storybook for Vue (https://storybook.js.org) or Vue's own component playground.

breaking v3 changed the export from default to named export { play }. ↓

fix Use 'import { play } from 'vue-play'' instead of 'import play from 'vue-play''.

gotcha The default render function syntax changed in v3; the old h => h(Component) may not work in all cases. Use () => h(Component) or template strings. ↓

fix Always return a VNode from the scenario function: 'add('name', () => h(Component))'

Install

npm install vue-play

yarn add vue-play

pnpm add vue-play

Imports

play
wrong
```
const { play } = require('vue-play')
```
correct
```
import { play } from 'vue-play'
```
ESM import is required; the package does not provide a CommonJS build.
default import (play)
wrong
```
import { play } from 'vue-play'
```
correct
```
import play from 'vue-play'
```
In older versions (<3.0) vue-play exported a default function, but v3+ uses named export. Check your version.
require() style
wrong
```
const play = require('vue-play')
```
correct
```
const play = require('vue-play').play
```
require() returns the module object; you must destructure .play.

Quickstart

Demonstrates how to define a component demo with two scenarios using render functions.

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

play('MyButton')
  .add('with text', h => h(MyButton, ['hello world']))
  .add('with emoji', h => h(MyButton, ['😃🍻']))