useQRCode
wrapper for qrcode
Demo
Anthony Fu
Okuto Oyama
Alex Kozack
Antério VieiraInstall
npm i qrcode
npm i qrcode
Usage
import { useQRCode } from '@vueuse/integrations/useQRCode'
// `qrcode` will be a ref of data URL
const qrcode = useQRCode('text-to-encode')
import { useQRCode } from '@vueuse/integrations/useQRCode'
// `qrcode` will be a ref of data URL
const qrcode = useQRCode('text-to-encode')
or passing a ref to it, the returned data URL ref will change along with the source ref's changes.
import { ref } from 'vue'
import { useQRCode } from '@vueuse/integrations/useQRCode'
const text = ref('text-to-encode')
const qrcode = useQRCode(text)
import { ref } from 'vue'
import { useQRCode } from '@vueuse/integrations/useQRCode'
const text = ref('text-to-encode')
const qrcode = useQRCode(text)
<input v-model="text" type="text">
<img :src="qrcode" alt="QR Code" />
<input v-model="text" type="text">
<img :src="qrcode" alt="QR Code" />
Type Declarations
/**
* Wrapper for qrcode.
*
* @see https://vueuse.org/useQRCode
* @param text
* @param options
*/
export declare function useQRCode(
text: MaybeRef<string>,
options?: QRCode.QRCodeToDataURLOptions
): Ref<string>
/**
* Wrapper for qrcode.
*
* @see https://vueuse.org/useQRCode
* @param text
* @param options
*/
export declare function useQRCode(
text: MaybeRef<string>,
options?: QRCode.QRCodeToDataURLOptions
): Ref<string>
Source
Contributors
Anthony Fu Okuto Oyama Alex Kozack Antério Vieira