Generate
useQrcode Composable
Learn how to generate QRCodes using the related composable.
useQrcode
Much like the Qrcode component, the useQrcode composable only requires a single value argument to work.
What makes it different is that we also have a toBase64 property, which, when set to true, will return a base64 encoded string of the QRCode image.
<template>
<img class="w-full h-full" :src="qr" alt="QR Code">
</template>
<script setup lang="ts">
const qr = useQrcode('https://nuxt.com', {
toBase64: true,
})
</script>
When encoding QRCode images to base64, the
blackColor and whiteColor will fallback to #000 and #FFF respectively if it cannot find the related CSS variables (e.g. when using Nuxt UI and generating QRCodes from an API handler).Reactivity
The useQrcode composable is reactive, meaning that if you change the value or any of the options, the QRCode will automatically update.
<template>
<UContainer>
<UInput v-model="text" />
<USelect v-model="variant" :items="variants" />
<img class="w-full h-full" :src="qr" alt="QR Code">
</UContainer>
</template>
<script setup lang="ts">
import type { SVGVariant } from 'nuxt-qrcode'
const text = ref('Hello World')
const variant = ref<SVGVariant>('pixelated')
const variants = ref(['default', 'circle', 'pixelated', 'rounded', 'dots'])
const qr = useQrcode(text, {
toBase64: true,
variant,
})
</script>