vue-play - npm Package Compare versions

Comparing version 2.0.0-rc.3 to 2.0.0

package.json

 {
   "name": "vue-play",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0",
   "description": "Play with your vue components.",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -1,3 +0,5 @@
-![logo](./media/logo.png)
+# vue-play
 
+[![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/egoist/vue-play) [![gitter](https://img.shields.io/gitter/room/vue-play/vue-play.svg?style=flat-square)](https://gitter.im/vue-play/vue-play)
+
 A minimalistic framework for demonstrating your Vue components, inspired by [react-storybook](https://github.com/kadirahq/react-storybook).
@@ -33,16 +35,38 @@
 
-### The easy way
+Install it:
 
 ```bash
-# use npm or yarn
-npm install -g getplay
-cd my-vue-project
-# run this to configure your project
-getplay
-# to start developing `play app`
-npm run play
-# to build the `play app`
-npm run play:build
+cd my-project
+npm install --save-dev vue-play vue-play-cli
+# vue-play-cli gives you the `vue-play` command
+# vue-play is the UI utils.
 ```
 
+Add npm scripts:
+
+```json
+{
+  "scripts": {
+    "play": "vue-play start",
+    "play:build": "vue-play build"
+  }
+}
+```
+
+Write `play entry` to load your examples:
+
+```js
+// ./play/index.js
+import {play} from 'vue-play'
+import MyButton from './components/MyButton.vue'
+
+play('Button', module)
+  .add('with text', h => h(MyButton, 'hello'))
+  .add('with emoji', h => h(MyButton, '💫')
+```
+
+Then just run `npm run play` and go to `http://localhost:5000`
+
+For more usages on vue-play-cli, please head to [vue-play/vue-play-cli](https://github.com/vue-play/vue-play-cli).
+
 <details><summary>The hard way</summary>
@@ -98,7 +122,7 @@
   plugins: [
-    HtmlWebpackPlugin({
+    new HtmlWebpackPlugin({
       filename: 'index.html',
       chunks: ['app']
     }),
-    HtmlWebpackPlugin({
+    new HtmlWebpackPlugin({
       filename: 'preview.html',
@@ -163,6 +187,8 @@ chunks: ['preview']
 play('MyButton', module)
-  .add('with text', '<my-button>text</my-button>')
+  .add('with text', {
+    template: '<my-button>text</my-button>'
+  })
 ```
 
-You can also put the example `'<my-button>text</my-button>'` in a seperate file, like `.vue` file and register components there, locally.
+You can also put the example component in a seperate file, like `.vue` file and register components there, locally.
 
@@ -174,2 +200,3 @@ ## Component Shorthand
 ```js
+import Example from './Example.vue'
 play('Button', module)
@@ -183,5 +210,8 @@ .add('template shorthand', '<my-button>text</my-button>')
     // ...
-  })
+  }).
+  add('single file', Example)
 ```
 
+**note:** If you are using `template` shorthand, you should use [Vue standalone build](https://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build) as well.
+
 ## Additional Component Properties
@@ -219,3 +249,3 @@
 - [button example](http://vue-play-button.surge.sh/#/) - [source](https://github.com/vue-play/vue-play/tree/master/play)
-- [vue-slim-modal](https://egoistian.com/vue-slim-modal/#/) - [source](https://github.com/egoist/vue-slim-modal/tree/master/playspot)
+- [vue-slim-modal](https://egoistian.com/vue-slim-modal/#/) - [source](https://github.com/egoist/vue-slim-modal/tree/master/play)
 
@@ -222,0 +252,0 @@ ## Development

src/router/index.js

@@ -11,3 +11,3 @@ import Vue from 'vue'
     {
-      path: '/',
+      path: '*',
       component: Home
@@ -14,0 +14,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

198662

increased by0.62%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

260

increased by13.04%

No dependency changes