1---
2category: '@Integrations'
3---
4 
5# useQRCode
6 
7Wrapper for [`qrcode`](https://github.com/soldair/node-qrcode).
8 
9## Install
10 
11```bash
12npm i qrcode@^1
13```
14 
15## Usage
16 
17```ts
18import { useQRCode } from '@vueuse/integrations/useQRCode'
19 
20// `qrcode` will be a ref of data URL
21const qrcode = useQRCode('text-to-encode')
22```
23 
24or passing a `ref` to it, the returned data URL ref will change along with the source ref's changes.
25 
26```ts
27import { useQRCode } from '@vueuse/integrations/useQRCode'
28import { shallowRef } from 'vue'
29 
30const text = shallowRef('text-to-encode')
31const qrcode = useQRCode(text)
32```
33 
34```html
35<input v-model="text" type="text" />
36<img :src="qrcode" alt="QR Code" />
37```
38 
39## Type Declarations
40 
41```ts
42/**
43 * Wrapper for qrcode.
44 *
45 * @see https://vueuse.org/useQRCode
46 * @param text
47 * @param options
48 */
49export declare function useQRCode(
50  text: MaybeRefOrGetter<string>,
51  options?: QRCode.QRCodeToDataURLOptions,
52): ShallowRef<string, string>
53```
54