Support for vue3

package.json

@@ -6,56 +6,40 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "build-lib": "vue-cli-service build --target lib --name vue-image-upload-resize src/components/index.js",
-    "build-wc": "vue-cli-service build --target wc --name vue-image-upload-resize src/components/ImageUploader.vue",
-    "test": "vue-cli-service test:unit"
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "blueimp-canvas-to-blob": "^3.14.0",
-    "vue": "^2.5.17"
+    "blueimp-canvas-to-blob": "^3.29.0",
+    "core-js": "^3.8.3",
+    "vue": "^3.2.45"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.2.0",
-    "@vue/cli-plugin-eslint": "^3.2.0",
-    "@vue/cli-plugin-unit-jest": "^3.2.0",
-    "@vue/cli-service": "^3.2.0",
-    "@vue/eslint-config-prettier": "^5.0.0",
-    "@vue/test-utils": "^1.0.0-beta.20",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.8.0",
-    "eslint": "^5.8.0",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-vue": "^5.0.0-0",
-    "vue-template-compiler": "^2.5.17"
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "^5.0.8",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3"
   },
-  "files": [
-    "dist",
-    "src/components/ImageUploader.vue",
-    "src/utils/exif.js"
-  ],
-  "keywords": [
-    "vue",
-    "upload",
-    "uploader",
-    "img",
-    "image",
-    "resize"
-  ],
-  "license": "MIT",
-  "main": "dist/vue-image-upload-resize.umd.js",
-  "module": "dist/vue-image-upload-resize.common.js",
-  "unpkg": "dist/vue-image-upload-resize.umd.min.js",
-  "browser": {
-    "./sfc": "src/ImageUploader.vue"
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/kartoteket/vue-image-upload-resize.git"
-  },
-  "bugs": {
-    "url": "https://github.com/kartoteket/vue-image-upload-resize/issues"
-  },
-  "homepage": "https://github.com/kartoteket/vue-image-upload-resize#readme"
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
 }

src/App.vue

@@ -1,61 +1,57 @@
 <template>
-  <div id="app">
+  <div>
     <image-uploader
       :preview="true"
       :className="['fileinput', { 'fileinput--loaded': hasImage }]"
-      :capture="false"
+      :capture="true"
       :debug="1"
       doNotResize="gif"
       :autoRotate="true"
       outputFormat="verbose"
       @input="setImage"
     >
-      <label for="fileInput" slot="upload-label">
+      <label for="fileInput">
         <figure>
-          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 32 32"
+          >
             <path
               class="path1"
               d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875s3.973-8.875 8.875-8.875c4.902 0 8.875 3.973 8.875 8.875s-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z"
             ></path>
           </svg>
         </figure>
-        <span class="upload-caption">{{ hasImage ? 'Replace' : 'Upload' }}</span>
+        <span class="upload-caption">{{
+          hasImage ? "Replace" : "Upload"
+        }}</span>
       </label>
     </image-uploader>
   </div>
 </template>
 
 <script>
-import ImageUploader from './components/ImageUploader.vue'
-
+import ImageUploader from "./components/ImageUploader.vue";
 export default {
-  name: 'app',
+  name: "App",
   components: {
     ImageUploader,
   },
   data() {
-    return { hasImage: false }
-  },
-  methods: {
-    setImage: function(output) {
-      this.hasImage = true
-      this.image = output
-      console.log(output)
-    },
+    return { hasImage: false };
   },
-}
+};
 </script>
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
 }
-#fileInput {
-  display: none;
-}
 </style>