Skip to content

useQRCode ​

Category
Export Size
371 B
Package
@vueuse/integrations
Last Changed
last year

Wrapper for qrcode.

Demo ​

Text content for QRCode
QR Code
Available in the @vueuse/integrations add-on.

Install ​

bash
npm i qrcode@^1

Usage ​

ts
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)
html
<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: MaybeRefOrGetter<string>,
  options?: QRCode.QRCodeToDataURLOptions,
): Ref<string>

Source ​

Source • Demo • Docs

Contributors ​

Anthony Fu
Doctorwu
Curt Grimes
Okuto Oyama
Alex Kozack
Antério Vieira

Changelog ​

v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
10e98 - feat(toRef)!: rename resolveRef to toRef

Released under the MIT License.