How to use qr-code-styling in Nuxt 3

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