DEV Community

Ben
Ben

Posted on

11

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
Enter fullscreen mode Exit fullscreen mode

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
            // ...
        }
    }
});
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more