[Vuetify] QRCode (Capacitor)

TheScanner.vue

<template>
  <div v-if="show" class="p-scanning">
    <div class="d-flex align-center flex-grow-1">
      <div class="p-scanning__crosshair"></div>
    </div>

    <div class="flex-shrink-1">
      <v-text-field
        v-model="inputCode"
        label="Enter manually"
        solo
        prepend-inner-icon="mdi-qrcode"
        @keydown.enter="submitInputCode"
      ></v-text-field>
    </div>
  </div>
</template>

<script>
import { Plugins } from "@capacitor/core";

import AlertMixin from "@/mixins/AlertMixin";
import mitt from "mitt";

const { BarcodeScanner, Device } = Plugins;

export default {
  mixins: [AlertMixin],

  data() {
    return {
      show: false,
      inputCode: null,
      isMobilePlatform: false
    };
  },

  watch: {
    show() {
      this.$emit("scanning", this.show);
    },
    $route() {
      BarcodeScanner.stopScan();

      this.hideScanner();
    }
  },

  methods: {
    hideScanner() {
      if (this.isMobilePlatform) {
        BarcodeScanner.showBackground();
      }

      document
        .querySelector(".v-application")
        .classList.remove("v-application--hide");

      this.show = false;
    },

    showScanner() {
      if (this.isMobilePlatform) {
        BarcodeScanner.hideBackground();
      }

      document
        .querySelector(".v-application")
        .classList.add("v-application--hide");

      this.show = true;
    },

    async read() {
      let content = null;

      try {
        if (this.isMobilePlatform) {
          const status = await BarcodeScanner.checkPermission({ force: true });
          if (!status.granted) return null;
        }

        this.showScanner();

        const result = await new Promise(resolve => {
          this.event.all.clear();
          this.event.on("inputCode", resolve);

          if (this.isMobilePlatform) {
            BarcodeScanner.startScan().then(resolve);
          }
        });

        if (result.hasContent) {
          content = result.content;
        }

        if (this.inputCode) {
          content = this.inputCode;
          this.inputCode = null;
        }
      } finally {
        if (this.isMobilePlatform) {
          BarcodeScanner.stopScan();
        }

        this.hideScanner();
      }

      return content;
    },

    submitInputCode() {
      this.event.emit("inputCode", this.inputCode);
    }
  },

  async created() {
    this.event = mitt();

    const deviceInfo = await Device.getInfo();
    this.isMobilePlatform = deviceInfo.platform !== "web";
  }
};
</script>

<style lang="scss">
.v-application--hide {
  background: transparent !important;
}

.p-scanning {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 56px);

  &__crosshair {
    border: 3px dashed black;
    border-radius: 8px;
    opacity: 0.5;

    width: 50vw;
    height: 50vw;
  }
}
</style>