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 blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay