fix qrcode lib

Author: xdeq

components/modals/QRCodeModal.vue

@@ -1,6 +1,6 @@
 <script setup>
 /** Vendor */
-import qrcode from "qrcode"
+import { generate } from "lean-qr"
 
 /** UI */
 import Modal from "@/components/ui/Modal.vue"
@@ -21,17 +21,19 @@ watch(
 	() => {
 		if (props.show) {
 			nextTick(() => {
-				qrcode.toDataURL(
-					cacheStore.qr.data,
-					{
-						color: {
-							light: "#0000",
-						},
-					},
-					(err, url) => {
-						qrEl.value.src = url
-					},
-				)
+				const qrCode = generate(cacheStore.qr.data)
+				qrCode.toCanvas(document.getElementById("my-qr-code"))
+				// qrcode.toDataURL(
+				// 	cacheStore.qr.data,
+				// 	{
+				// 		color: {
+				// 			light: "#0000",
+				// 		},
+				// 	},
+				// 	(err, url) => {
+				// 		qrEl.value.src = url
+				// 	},
+				// )
 			})
 		}
 	},
@@ -53,7 +55,8 @@ watch(
 					</Flex>
 				</Flex>
 
-				<img ref="qrEl" :class="$style.qrcode" />
+				<!-- <img ref="qrEl" :class="$style.qrcode" /> -->
+				<canvas id="my-qr-code" :class="$style.qrcode" />
 			</Flex>
 		</Flex>
 	</Modal>
@@ -79,6 +82,7 @@ watch(
 
 .qrcode {
 	filter: invert(1);
+	image-rendering: pixelated;
 
 	user-select: none;
 	-webkit-user-drag: none;

package.json

@@ -13,7 +13,7 @@
 	},
 	"devDependencies": {
 		"@nuxt/devtools": "latest",
-		"nuxt": "3.8.2",
+		"nuxt": "3.9.1",
 		"nuxt-og-image": "2.0.28",
 		"nuxt-simple-sitemap": "^4.2.0",
 		"sass": "1.66.1",
@@ -28,6 +28,7 @@
 		"d3": "^7.8.5",
 		"d3-hierarchy": "^3.1.2",
 		"focus-trap": "7.5.2",
+		"lean-qr": "^2.3.2",
 		"luxon": "3.4.3",
 		"nuxt-site-config": "^2.1.2",
 		"pinia": "2.1.6",