1.5.0 update importing issues

README.md

@@ -29,12 +29,27 @@ yarn add vue-web-cam
 
 ```javascript
 import Vue from 'vue'
-import WebCam from 'vue-web-cam'
+import WebCam from "../../src";
+Vue.use(WebCam);
+
+
+<vue-web-cam ... />
 
-Vue.use(WebCam)
 // or
-import {WebCam} from 'vue-web-cam'
-Vue.component(WebCam.name, WebCam)
+import { WebCam } from "vue-web-cam";
+
+components: {
+    WebCam
+}
+
+<web-cam ... />
+
+components: {
+    'vue-web-cam': WebCam
+}
+
+<vue-web-cam ... />
+
 ```
 
 ## Testing & Dev

build/webpack.config.js

@@ -1,6 +1,7 @@
 var path = require("path");
 var webpack = require("webpack");
 const VueLoaderPlugin = require("vue-loader/lib/plugin");
+const { version } = require("../package.json");
 
 module.exports = {
   mode: "production",
@@ -50,6 +51,7 @@ module.exports = {
   plugins: [
     new VueLoaderPlugin(),
     new webpack.DefinePlugin({
+      __VERSION__: JSON.stringify(version),
       "process.env": {
         NODE_ENV: '"production"'
       }

demo/src/main.js

@@ -1,8 +1,8 @@
 import Vue from "vue";
 import App from "./main.vue";
 
-// import WebCam from 'plugin'
-// Vue.use(WebCam)
+// import WebCam from "../../src";
+// Vue.use(WebCam);
 
 new Vue({
   el: "#app",

demo/src/main.vue

@@ -5,14 +5,14 @@
         <h2>Current Camera</h2>
         <code v-if="device">{{ device.label }}</code>
         <div class="border">
-          <web-cam ref="webcam"
-                   :device-id="deviceId"
-                   width="100%"
-                   @started="onStarted" 
-                   @stopped="onStopped" 
-                   @error="onError"
-                   @cameras="onCameras"
-                   @camera-change="onCameraChange" />
+          <vue-web-cam ref="webcam"
+                       :device-id="deviceId"
+                       width="100%"
+                       @started="onStarted" 
+                       @stopped="onStopped" 
+                       @error="onError"
+                       @cameras="onCameras"
+                       @camera-change="onCameraChange" />
         </div>
 
         <div class="row">
@@ -53,7 +53,7 @@ import { WebCam } from "vue-web-cam";
 export default {
   name: "App",
   components: {
-    WebCam
+    "vue-web-cam": WebCam
   },
   data() {
     return {
@@ -74,7 +74,7 @@ export default {
     },
     devices: function() {
       // Once we have a list select the first one
-      const [first, ...tail] = devices;
+      const [first, ...tail] = this.devices;
       if (first) {
         this.camera = first.deviceId;
         this.deviceId = first.deviceId;

demo/webpack.config.js

@@ -2,6 +2,7 @@ var path = require("path");
 var webpack = require("webpack");
 var HtmlWebpackPlugin = require("html-webpack-plugin");
 const VueLoaderPlugin = require("vue-loader/lib/plugin");
+const { version } = require("../package.json");
 
 module.exports = {
   mode: "development",
@@ -49,8 +50,7 @@ module.exports = {
     }
   },
   devServer: {
-    historyApiFallback: true,
-    noInfo: true
+    historyApiFallback: true
   },
   performance: {
     hints: false
@@ -59,6 +59,7 @@ module.exports = {
   plugins: [
     new VueLoaderPlugin(),
     new webpack.DefinePlugin({
+      __VERSION__: JSON.stringify(version),
       "process.env": "'development'"
     }),
     new webpack.HotModuleReplacementPlugin(),
@@ -75,6 +76,7 @@ if (process.env.NODE_ENV === "production") {
   // http://vue-loader.vuejs.org/en/workflow/production.html
   module.exports.plugins = (module.exports.plugins || []).concat([
     new webpack.DefinePlugin({
+      __VERSION__: JSON.stringify(version),
       "process.env": {
         NODE_ENV: '"production"'
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-web-cam",
-  "version": "1.4.4",
+  "version": "1.5.0",
   "description": "Webcam component for Vuejs applications",
   "main": "dist/index.js",
   "author": {
@@ -13,11 +13,6 @@
       "name": "Vincent Gabriel",
       "email": "vadimg88@gmail.com",
       "url": "https://github.com/vinceg"
-    },
-    {
-      "name": "Riccardo Giorato",
-      "email": "riccardoemanuele.giorato@gmail.com",
-      "url": "https://github.com/giorat"
     }
   ],
   "scripts": {

src/index.js

@@ -1,11 +1,15 @@
 import WebCam from "./webcam";
 
-const install = function(Vue, opts = {}) {
-  if (install.installed) return;
-  Vue.component(WebCam.name, WebCam);
-};
+function plugin(Vue) {
+  Vue.component("vue-web-cam", WebCam);
+}
 
-export default {
-  WebCam,
-  install
-};
+// Install by default if using the script tag
+if (typeof window !== "undefined" && window.Vue) {
+  window.Vue.use(plugin);
+}
+
+export default plugin;
+const version = "__VERSION__";
+// Export all components too
+export { WebCam, version };

src/webcam.vue

@@ -39,7 +39,7 @@ export default {
       type: Object,
       default: null,
       validator: value => {
-        return value.height && value.width
+        return value.height && value.width;
       }
     }
   },
@@ -172,10 +172,9 @@ export default {
      * test access
      */
     testMediaAccess() {
-
       let constraints = { video: true };
 
-      if(this.resolution) {
+      if (this.resolution) {
         constraints.video = {};
         constraints.video.height = this.resolution.height;
         constraints.video.width = this.resolution.width;
@@ -190,13 +189,12 @@ export default {
      * load the Camera passed as index!
      */
     loadCamera(device) {
+      let constraints = { video: { deviceId: { exact: device } } };
 
-      let constraints = { video: { deviceId: { exact: device }}};
-
-      if(this.resolution) {
+      if (this.resolution) {
         constraints.video.height = this.resolution.height;
         constraints.video.width = this.resolution.width;
-      } 
+      }
 
       navigator.mediaDevices
         .getUserMedia(constraints)