VueUseuseQRCode
Wrapper for qrcode.
Demo
Available in the @vueuse/integrations add-on.Install
bash
npm i qrcode
npm i qrcode
Usage
ts
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.
ts
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)
html
<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
typescript
/**
* Wrapper for qrcode.
*
* @see https://vueuse.org/useQRCode
* @param text
* @param options
*/
export declare function useQRCode(
text: MaybeComputedRef<string>,
options?: QRCode.QRCodeToDataURLOptions
): Ref<string>
/**
* Wrapper for qrcode.
*
* @see https://vueuse.org/useQRCode
* @param text
* @param options
*/
export declare function useQRCode(
text: MaybeComputedRef<string>,
options?: QRCode.QRCodeToDataURLOptions
): Ref<string>
Source
Contributors
Anthony Fu
Curt Grimes
Okuto Oyama
Alex Kozack
Antério Vieira