Skip to content
On this page

useQRCode

Category
Package
@vueuse/integrations
Last Changed
2 months ago

wrapper for qrcode

Demo

Text content for QRCode
QR Code
available in add-on @vueuse/integrations

Install

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

SourceDemoDocs

Contributors

Anthony Fu
Okuto Oyama
Alex Kozack
Antério Vieira

Changelog

No recent changes
useQRCode has loaded