Vuejs 2 support added

smronju · Oct 10, 2016 · 0993e75 · 0993e75
1 parent 26218f2
commit 0993e75
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 50 deletions.
diff --git a/VueWebcam.js b/VueWebcam.js
@@ -1,6 +1,18 @@
 const Vue = require('vue');
 
 const WebcamComponent = Vue.extend({
+    render: function (h) {
+        return h('video', {
+            ref: 'video',
+            attrs: {
+                width: this.width,
+                height: this.height,
+                src: this.src,
+                autoplay: this.autoplay,
+                style: this.styleObject
+            }
+        });
+    },
     props: {
         autoplay: {
             type: Boolean,
@@ -23,16 +35,6 @@ const WebcamComponent = Vue.extend({
             default: 'image/jpeg'
         }
     },
-    template: `
-        <video
-            v-el:video
-            :width="width"
-            :height="height"
-            :src="src"
-            :autoplay="autoplay"
-            :style="styleObject"
-        ></video>
-    `,
     data () {
         return {
             video: '',
@@ -55,7 +57,7 @@ const WebcamComponent = Vue.extend({
         getCanvas () {
             if (!this.hasUserMedia) return null;
 
-            const video = this.$els.video;
+            const video = this.$refs.video;
             if (!this.ctx) {
                 const canvas = document.createElement('canvas');
                 canvas.height = video.clientHeight;
@@ -79,8 +81,8 @@ const WebcamComponent = Vue.extend({
         }
 
     },
-    ready () {
-        this.video = this.$els.video;
+    mounted: function () {
+        this.video = this.$refs.video;
         navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
 
         if (navigator.getUserMedia) {
@@ -93,12 +95,12 @@ const WebcamComponent = Vue.extend({
             });
         }
     },
-    beforeDestroy () {
+    beforeDestroy: function () {
         this.video.pause();
         this.src = '';
         this.stream.getTracks()[0].stop();
     },
-    destroyed () {
+    destroyed: function () {
         console.log('Destroyed');
     }
 });

diff --git a/example/.babelrc b/example/.babelrc
@@ -1,5 +1,5 @@
 {
-    "presets": ["es2015", "stage-2"],
-    "plugins": ["transform-runtime"],
-    "comments": false
+    "presets": [
+        ["es2015", { "modules": false }]
+    ]
 }
diff --git a/example/README.md b/example/README.md
@@ -1,11 +1,11 @@
 # vue-cropperjs-example
 
-> Example project for vue-webcam component.
+> Example project for vue-webcam package
 
 ## Build Setup
 
 ``` bash
-# install dependencies.
+# install dependencies
 npm install
 
 # serve with hot reload at localhost:8080

diff --git a/example/index.html b/example/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="style.css" />
 </head>
 <body>
-    <app></app>
+    <div id="app"></div>
     <script src="dist/build.js"></script>
 </body>
 </html>
diff --git a/example/package.json b/example/package.json
@@ -10,27 +10,19 @@
     "start": "webpack-dev-server --open --inline --hot"
   },
   "dependencies": {
-    "babel-runtime": "^6.0.0",
-    "vue": "^1.0.26",
-    "vue-webcam": "^1.0.0"
+    "vue": "^2.0.1",
+    "vue-webcam": "^2.0.2"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",
     "babel-loader": "^6.0.0",
-    "babel-plugin-transform-runtime": "^6.0.0",
     "babel-preset-es2015": "^6.0.0",
-    "babel-preset-stage-2": "^6.0.0",
-    "cross-env": "^1.0.6",
-    "css-loader": "^0.23.1",
-    "file-loader": "^0.8.4",
-    "json-loader": "^0.5.4",
+    "cross-env": "^3.0.0",
+    "css-loader": "^0.25.0",
+    "file-loader": "^0.9.0",
     "style-loader": "^0.13.1",
-    "url-loader": "^0.5.7",
-    "vue-hot-reload-api": "^1.2.0",
-    "vue-html-loader": "^1.0.0",
-    "vue-loader": "^8.2.1",
-    "vue-style-loader": "^1.0.0",
-    "webpack": "^1.12.2",
-    "webpack-dev-server": "^1.12.0"
+    "vue-loader": "^9.4.0",
+    "webpack": "2.1.0-beta.22",
+    "webpack-dev-server": "^2.1.0-beta.0"
   }
 }
diff --git a/example/src/App.vue b/example/src/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="app">
-        <vue-webcam v-ref:webcam></vue-webcam>
+        <vue-webcam ref='webcam'></vue-webcam>
         <hr/>
         <img :src="photo" alt="" style="width:400px;height:300px" />
         <hr/>
@@ -12,6 +12,7 @@
 import VueWebcam from 'vue-webcam';
 
 export default {
+    name: 'App',
     components: { VueWebcam },
     data () {
         return {

diff --git a/example/src/main.js b/example/src/main.js
@@ -2,6 +2,6 @@ import Vue from 'vue'
 import App from './App.vue'
 
 new Vue({
-    el: 'body',
-    components: { App }
-})
+    el: '#app',
+    render: h => h(App)
+});
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -23,16 +23,12 @@ module.exports = {
                 exclude: /node_modules/
             },
             {
-                test: /\.json$/,
-                loader: 'json'
-            },
-            {
-                test: /\.html$/,
-                loader: 'vue-html'
+                test: /\.css$/,
+                loader: 'style-loader!css-loader'
             },
             {
                 test: /\.(png|jpg|gif|svg)$/,
-                loader: 'url',
+                loader: 'file',
                 query: {
                     limit: 10000,
                     name: '[name].[ext]?[hash]'

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "vue-webcam",
-    "version": "1.0.0",
+    "version": "2.0.2",
     "description": "A Vue component for capturing image from webcam.",
     "main": "VueWebcam.js",
     "keywords": [
@@ -21,6 +21,6 @@
     },
     "license": "MIT",
     "peerDependencies": {
-        "vue": "^1.0.26"
+        "vue": ">=2.0.0"
     }
 }