DEV Community


Posted on

How to use qr-code-styling in Nuxt 3


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 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.

  <div ref="qrCode"></div>

<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",
  image: "",
  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
  // Add viewbox to make it resizable
  qrCode.value!.firstChild!.setAttribute('viewBox', '0 0 300 300');

watch(() =>, (newValue: string) => {
  // Update QR code data when props change = newValue;
  // Add viewbox to make it resizable
  qrCode.value!.firstChild!.setAttribute('viewBox', '0 0 300 300');

<style scoped>
  width: 100%;
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:

  <QRCode :data="qrData" />
  <button @click="downloadQRCode()">Download</button>

<script setup lang="ts">
import QRCode from '@/components/QRCode.vue';

// Define QR code data
const qrData = '';

// Function to download the QR Code
function downloadQRCode () {
  const { $qrCodeStyling } = useNuxtApp();
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.


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 !


Top comments (0)