Vue Js Copy Paste Image | Image Paste Clipboard

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <h3>Vue Js Paste Image from Clipboard </h3>
  <div id="app">
    <div ref="target" @paste="onPaste" style='cursor:pointer'>Click here and use Control-V to paste the image.
    </div>
    <br>
    <img v-if="imageDataURL" :src="imageDataURL" alt="Pasted Image" />

</div>
  <script type="module">
    const app = new Vue({
      el: "#app",
      data() {
        return {
          imageDataURL: null
        };
      },
      methods: {
        onPaste(event) {
          const clipboardData = event.clipboardData || window.clipboardData;
          const items = clipboardData.items;
          for (let i = 0; i < items.length; i++) {
            if (items[i].type.indexOf("image") !== -1) {
              const imageFile = items[i].getAsFile();
              this.processImage(imageFile);
            }
          }
        },
        processImage(imageFile) {
          const reader = new FileReader();
          reader.onload = event => {
            this.imageDataURL = event.target.result;
          };
          reader.readAsDataURL(imageFile);
        }
      }
    })
  </script>
  <style scoped>
    #app {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

#app img {
      max-width: 100%;
    }

#app div {
      padding: 20px;
      border: 2px dashed #ccc;
      border-radius: 5px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: #555;
      background-color: #f9f9f9;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
    }

#app div:hover {
      border-color: #555;
      background-color: #fff;
      color: #333;
    }

#app div:focus {
      outline: none;
    }

#app img {
      margin-top: 20px;
    }
  </style>
</body>

</html>