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 default to #000 and #FFF respectively, ignoring those set in the nuxt.config.ts file. You can override this by passing the blackColor and whiteColor options to the composable.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>