vue-play

library3.2.1jsnpmunverified

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).

web-framework testing

npm install vue-play

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-PLAY

vue-play

web-frameworkjavascriptv3.2.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

play

✓ import { play } from 'vue-play'

✗ const { play } = require('vue-play')

ESM import is required; the package does not provide a CommonJS build.

default import (play)

✓ import play from 'vue-play'

✗ 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

✓ const play = require('vue-play').play

✗ const play = require('vue-play')

require() returns the module object; you must destructure .play.

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, ['😃🍻']))

Debug

Known issues

deprecatedvue-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.

affects: >=3.0.0

breakingv3 changed the export from default to named export { play }.

fix

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

affects: >=3.0.0

gotchaThe 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))'

affects: >=3.0.0

Errors

Common errors & fixes

Cannot read property 'play' of undefined

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

fix

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

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

The package is missing from node_modules.

fix

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

Upgrade

Version history

3.2.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/egoist/vue-play ↗

packagehttps://www.npmjs.com/package/vue-play ↗