{"id":26616,"library":"vue-play","title":"vue-play","description":"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).","status":"deprecated","version":"3.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/egoist/vue-play","tags":["javascript","vue","play","storybook","component","ui"],"install":[{"cmd":"npm install vue-play","lang":"bash","label":"npm"},{"cmd":"yarn add vue-play","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-play","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM import is required; the package does not provide a CommonJS build.","wrong":"const { play } = require('vue-play')","symbol":"play","correct":"import { play } from 'vue-play'"},{"note":"In older versions (<3.0) vue-play exported a default function, but v3+ uses named export. Check your version.","wrong":"import { play } from 'vue-play'","symbol":"default import (play)","correct":"import play from 'vue-play'"},{"note":"require() returns the module object; you must destructure .play.","wrong":"const play = require('vue-play')","symbol":"require() style","correct":"const play = require('vue-play').play"}],"quickstart":{"code":"import { play } from 'vue-play'\nimport MyButton from './MyButton.vue'\n\nplay('MyButton')\n  .add('with text', h => h(MyButton, ['hello world']))\n  .add('with emoji', h => h(MyButton, ['😃🍻']))","lang":"javascript","description":"Demonstrates how to define a component demo with two scenarios using render functions."},"warnings":[{"fix":"Migrate to Storybook for Vue (https://storybook.js.org) or Vue's own component playground.","message":"vue-play is deprecated and no longer maintained. It does not work with Vue 2.0+ without extra configuration and uses outdated build tools.","severity":"deprecated","affected_versions":">=3.0.0"},{"fix":"Use 'import { play } from 'vue-play'' instead of 'import play from 'vue-play''.","message":"v3 changed the export from default to named export { play }.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Always return a VNode from the scenario function: 'add('name', () => h(Component))'","message":"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.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run 'npm install vue-play' and use 'import { play } from 'vue-play''","cause":"The package is not installed or the import path is wrong.","error":"Cannot read property 'play' of undefined"},{"fix":"Install the package: npm install vue-play --save-dev","cause":"The package is missing from node_modules.","error":"Module not found: Can't resolve 'vue-play'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}