vue-qrcode-readerでQRコードを読み取る（2024年1月）

以下の記事が分かりやすかったのですが、ライブラリが更新されてイベント名等に変更があったため、記事を作成しました。
decodeからdetectに変更されていることに気づかず、1日費やしてしまいました...
https://qiita.com/TakenoriHirao/items/8906fb01e5bb542dd0f9
vue-qrcode-reader

追加

yarn add vue-qrcode-reader
npm install vue-qrcode-reader

vueに登録

import Vue from 'vue'
import { QrcodeStream } from 'vue-qrcode-reader'

Vue.component('my-component', {
  components: { QrcodeStream },
)

使う

html

<qrcode-stream @detect="onDetect"></qrcode-stream>

scripts

methods: {
  onDetect (content) {
    console.log('onDetect')
  }
}