wvRypVP

index.html

<div id="app">
  <qrcode-stream @detect="onDetect" @error="onError"></qrcode-stream>
</div>

script.js

  const { createApp, ref } = Vue

  Vue.createApp({    
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }, 
    
    methods: {
      onDetect(detectedCodes) {
        console.log(detectedCodes)
      },
      
      onError(error) {
        console.error(error)
      }
    }
  }).mount('#app')

scripts

<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-qrcode-reader@5.3.0/dist/vue-qrcode-reader.umd.cjs"></script>

style.css

#app {
  width: 600px;
}

wvrypvp.markdown

wvRypVP

A Pen by 9kopb on CodePen.

License.