## Introduction The best QR Code library is by far [qr-code-styling](https://qr-code-styling.com/) 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](https://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: ```bash 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: ```ts // 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) : 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`. ```vue ``` ## Step 4: Using QRCode Component Now, you can use the QRCode component in your Nuxt 3 pages or components. For example: ```vue ``` 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](https://nuxt.com/docs/guide/directory-structure/plugins) and [qr-code-styling](https://github.com/kozakdenys/qr-code-styling) documentation for more information. If you have any questions or suggestions, please feel free to leave a comment ! Thanks

benuuts

How to use qr-code-styling in Nuxt 3

Join Our Newsletter. No Spam, Only the good stuff.