useQRCode

qrcode のラッパー。

インストール

npm i qrcode@^1

使用方法

import { useQRCode } from '@vueuse/integrations/useQRCode'

// `qrcode` はデータURLのrefになります
const qrcode = useQRCode('text-to-encode')

または ref を渡すことで、返されるデータURLのrefはソースrefの変更に応じて変化します。

import { useQRCode } from '@vueuse/integrations/useQRCode'
import { shallowRef } from 'vue'

const text = shallowRef('text-to-encode')
const qrcode = useQRCode(text)

<input v-model="text" type="text" />
<img :src="qrcode" alt="QR Code" />