{"id":13429193,"url":"https://github.com/vue-play/vue-play","last_synced_at":"2025-10-05T21:31:41.654Z","repository":{"id":65395116,"uuid":"70248705","full_name":"vue-play/vue-play","owner":"vue-play","description":"🍭 A minimalistic framework for demonstrating your Vue components","archived":true,"fork":false,"pushed_at":"2018-10-12T09:50:09.000Z","size":2062,"stargazers_count":967,"open_issues_count":32,"forks_count":45,"subscribers_count":31,"default_branch":"master","last_synced_at":"2025-08-27T11:21:13.698Z","etag":null,"topics":["demonstrate","storybook","vue"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vue-play.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-07T13:23:49.000Z","updated_at":"2025-08-17T20:57:28.000Z","dependencies_parsed_at":"2023-02-21T10:30:44.453Z","dependency_job_id":null,"html_url":"https://github.com/vue-play/vue-play","commit_stats":null,"previous_names":["egoist/vue-play"],"tags_count":34,"template":false,"template_full_name":null,"purl":"pkg:github/vue-play/vue-play","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-play%2Fvue-play","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-play%2Fvue-play/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-play%2Fvue-play/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-play%2Fvue-play/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vue-play","download_url":"https://codeload.github.com/vue-play/vue-play/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-play%2Fvue-play/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278525526,"owners_count":26001321,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-05T02:00:06.059Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["demonstrate","storybook","vue"],"created_at":"2024-07-31T02:00:29.664Z","updated_at":"2025-10-05T21:31:41.281Z","avatar_url":"https://github.com/vue-play.png","language":"JavaScript","funding_links":[],"categories":["Awesome Vue.js","辅助工具","叫研发工具组","Components \u0026 Libraries","JavaScript","Dev Tools"],"sub_categories":["Development Tools","文档","Dev Tools","Docs"],"readme":"# vue-play\n\n[![NPM version](https://img.shields.io/npm/v/vue-play.svg?style=flat-square)](https://npmjs.com/package/vue-play) [![NPM downloads](https://img.shields.io/npm/dm/vue-play.svg?style=flat-square)](https://npmjs.com/package/vue-play) [![Build Status](https://img.shields.io/circleci/project/vue-play/vue-play/master.svg?style=flat-square)](https://circleci.com/gh/vue-play/vue-play) [![gitter](https://img.shields.io/gitter/room/vue-play/vue-play.svg?style=flat-square)](https://gitter.im/vue-play/vue-play)\n\nA minimalistic framework for demonstrating your Vue components, inspired by [react-storybook](https://github.com/kadirahq/react-storybook).\n\n![preview](./media/preview.gif)\n\n## Table of Contents\n\n\u003c!-- toc --\u003e\n\n- [Getting Started](#getting-started)\n- [Writing Scenarios](#writing-scenarios)\n  * [Keeping Scenarios](#keeping-scenarios)\n  * [Writing Scenarios](#writing-scenarios-1)\n  * [Loading Scenarios Dynamically](#loading-scenarios-dynamically)\n  * [Register Components](#register-components)\n  * [Use Component as `play()` argument](#use-component-as-play-argument)\n- [Component Shorthand](#component-shorthand)\n- [Additional Component Properties](#additional-component-properties)\n  * [example](#example)\n  * [readme](#readme)\n- [Component Injection](#component-injection)\n  * [this.$log(data)](#thislogdata)\n- [Showcase](#showcase)\n- [Development](#development)\n- [License](#license)\n\n\u003c!-- tocstop --\u003e\n\n## Getting Started\n\nIntegrate `vue-play` into your project using [getplay](https://github.com/vue-play/getplay):\n\n```bash\nyarn global add getplay\ncd my-project\ngetplay\n```\n\nThen you can run `yarn play` and go to `http://localhost:5000`\n\nSo far we got:\n\n- npm scripts `yarn play` \u0026 `yarn build:play`\n- A `./play` folder where you write scenarios for your component\n- A `./play.config.js` file which helps you configure webpack easily using [Poi](https://poi.js.org)\n\n\nThe only thing you really need to worry about is `./play/index.js`, since you will write scenarios or dynamically load scenarios there.\n\n## Writing Scenarios\n\n`scenario`, a.k.a. story in react-storybook, it's usually an example component for demonstrating your real component.\n\n### Keeping Scenarios\n\nYou 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.\n\n### Writing Scenarios\n\n```js\nimport { play } from 'vue-play'\nimport MyButton from '../src/components/MyButton.vue'\n\n// Use `play` to describe component title\n// use .add to add scenario for that component\nplay('MyButton')\n  .add('with text', h =\u003e h(MyButton, ['hello world']))\n  .add('with emoji', h =\u003e h(MyButton, ['😃🍻']))\n```\n\n### Loading Scenarios Dynamically\n\nWe can use Webpack's [require.context](https://webpack.github.io/docs/context.html#require-context) to load modules dynamically.\n\n```js\nconst load = requireContext =\u003e requireContext.keys().map(requireContext)\n\n// load files which end with `.play.js` in `../src/components` folder\nload(require.context('../src/components', true, /.play.js$/))\n```\n\n### Register Components\n\nIf you are using render function you won't need to register components, you only need this when you are using the template property, and it's same way as you do in other Vue app:\n\n```js\n// ./play/index.js\nimport Vue from 'vue'\nimport MyButton from './MyButton.vue'\n\n// register globally\nVue.component('my-button', MyButton)\n\nplay('MyButton')\n  .add('with text', {\n    template: '\u003cmy-button\u003etext\u003c/my-button\u003e'\n  })\n```\n\nYou can also [register components locally](https://vuejs.org/v2/guide/components.html#Local-Registration).\n\n### Use Component as `play()` argument\n\n```js\nimport MyButton from './MyButton.vue'\n\n// assuming MyButton.name is 'my-button'\nplay(MyButton)\n  // MyButton will be automatially registered in scenarios\n  // so you don't have to register it again\n  .add('with text', '\u003cmy-button\u003e\u003c/my-button\u003e')\n\n// then the app sidebar will look like:\n// - my-button\n//    - with text\n```\n\nTo customize the `displayName` in sidebar and the `componentName` which is used to register itself in scenarios, you can simply set them in your component:\n\n```vue\n\u003c!-- ./MyButton.vue --\u003e\n\u003cscript\u003e\n  export default {\n    name: 'my-other-button',\n    displayName: 'Show off my cute button'\n  }\n\u003c/script\u003e\n```\n\nOr use methods:\n\n```js\nplay(MyButton)\n  .name('my-other-button')\n  .displayName('Show off my cute button')\n  .add('with text', '\u003cmy-other-button\u003etext\u003c/my-other-button\u003e')\n```\n\n## Component Shorthand\n\nIf you only need `template` or `render` property for your component, you can use `component shorthand`, which means you can directly set the value of scenario to a template string or render function:\n\n```js\nimport Example from './Example.vue'\nplay('Button')\n  .add('template shorthand', '\u003cmy-button\u003etext\u003c/my-button\u003e')\n  .add('render function shorthand', h =\u003e h(MyButton, ['text']))\n  .add('full component', {\n    data() {},\n    methods: {},\n    render(h) {}\n    // ...\n  }).\n  .add('single file', Example)\n```\n\n**note:** If you are using `template` shorthand or `template` property in component options, you should use [Vue standalone build](https://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build) as well. For `vue-play-cli`, it's as simple as using `--standalone` option.\n\n## Additional Component Properties\n\nThe component for each scenario is a typical Vue component, but it can also accept some additional properties for documenting its usage, eg:\n\n```js\nplay('Button')\n  .add('with text', {\n    // a valid vue component\n    ...component,\n    // additional\n    example,\n    // ...\n  })\n```\n\n### example\n\nType: `string`\n\nThe example code of your component.\n\n### readme\n\nType: `HTML string`\n\nOptionally display a readme tab to show detailed usage.\n\n## Component Injection\n\n### this.$log(data)\n\nLog data to app console.\n\n## Showcase\n\nFeel free to add your projects here:\n\n- [button example](http://vue-play-button.surge.sh/#/) - [source](https://github.com/vue-play/vue-play/tree/master/play)\n- [vue-slim-modal](https://egoistian.com/vue-slim-modal/#/) - [source](https://github.com/egoist/vue-slim-modal/tree/master/play)\n\n## Development\n\n```bash\n# run example play script\nnpm run play\n\n# build vue-play\n# you don't need this when developing\nnpm run build\n```\n\n## License\n\n[MIT](https://egoist.mit-license.org) \u0026copy; [EGOIST](https://github.com/egoist)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-play%2Fvue-play","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvue-play%2Fvue-play","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-play%2Fvue-play/lists"}