Introduction
The best QR Code library is by far qr-code-styling for creating customizable QR codes in javascript. While it doesn't work out-of-the-box in Nuxt 3, due to its lack of server-side rendering support and not being a Vue 3 plugin either.
In this post, I will show you how I manage to make it work on fliqr.codes using Nuxt 3 client plugin.
Step 1: Install Dependencies
First, make sure you have qr-code-styling installed in your Nuxt 3 project:
npm install qr-code-styling
Step 2: Create a Nuxt 3 Plugin
Create a plugin file plugins/qrcode.client.ts to initialize the QRCodeStyling and provide it as a plugin:
// plugins/qrcode.client.ts
import QRCodeStyling, { Options } from 'qr-code-styling';
export default defineNuxtPlugin((nuxtApp) => {
let qrCodeStyling: QRCodeStyling;
return {
provide: {
// Provide a helper that returns an instance of QRCodeStyling
qrCodeStyling: (options: Partial<Options>) : QRCodeStyling => {
if (qrCodeStyling) return qrCodeStyling;
qrCodeStyling = new QRCodeStyling(options);
return qrCodeStyling;
},
// Provide here other helpers you may need
// ...
}
}
});
Step 3: Create QRCode Component
Now, create a QRCode component QRCode.vue.
<template>
<div ref="qrCode"></div>
</template>
<script setup lang="ts">
import type QRCodeStyling from 'qr-code-styling';
import { ref, watch, onMounted, defineProps, useNuxtApp } from 'nuxt';
const props = defineProps({
data: String
});
const { $qrCodeStyling } = useNuxtApp();
const qrCode = ref<HTMLElement | null>(null);
// Default options
const options = {
width: 300,
height: 300,
type: "svg",
data: props.data,
image: "https://fliqr.codes/fliqr.svg",
dotsOptions: {
color: "#000",
type: "rounded"
},
backgroundOptions: {
color: "#fff",
},
imageOptions: {
crossOrigin: "anonymous",
margin: 10
}
};
const qrCodeStyling: QRCodeStyling = $qrCodeStyling(options);
onMounted(() => {
// Append QR code to DOM element
qrCodeStyling.append(qrCode.value);
// Add viewbox to make it resizable
qrCode.value!.firstChild!.setAttribute('viewBox', '0 0 300 300');
});
watch(() => props.data, (newValue: string) => {
// Update QR code data when props change
options.data = newValue;
qrCodeStyling.update(options);
// Add viewbox to make it resizable
qrCode.value!.firstChild!.setAttribute('viewBox', '0 0 300 300');
});
</script>
<style scoped>
svg{
width: 100%;
height:100%;
}
</style>
Step 4: Using QRCode Component
Now, you can use the QRCode component in your Nuxt 3 pages or components. For example:
<template>
<QRCode :data="qrData" />
<button @click="downloadQRCode()">Download</button>
</template>
<script setup lang="ts">
import QRCode from '@/components/QRCode.vue';
// Define QR code data
const qrData = 'https://fliqr.codes';
// Function to download the QR Code
function downloadQRCode () {
const { $qrCodeStyling } = useNuxtApp();
$qrCodeStyling.download();
}
</script>
This setup initializes the QRCodeStyling library in a Nuxt 3 plugin and utilizes it in a Vue component to generate and display QR codes dynamically. Make sure to adjust the qrData variable according to your application logic.
Conclusion
And that's it ! You've learned how to easily integrate the QRCodeStyling library into your Nuxt 3 project. With a custom plugin and Vue component, you can easily generate and update QR codes based on dynamic data.
Don't forget to check Nuxt and qr-code-styling documentation for more information.
If you have any questions or suggestions, please feel free to leave a comment !
Thanks
Top comments (0)