Problems in import external native javascript file in vue3?

Question

I want to use js library "https://github.com/davidshimjs/qrcodejs" in vue3 following the tutorial "https://www.geeksforgeeks.org/how-to-make-a-qr-code-generator-using-qrcode-js/". I tried the npm package but it didn't work. So, i tried to use the pure js library, including the package from tag "script", by CDN approach, but i didn't reach QRCode object of the package. It gave me an error that it is not defined. So, my question is, can i include javascript native libraries in vue, from \public\index.html in vue3?? Is there a way to do this? You can give examples, it doesn't have to be with this specific package. Thanks for all your help.

What I did:

1. Include package in \public\index.html

<script src= "https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"> </script>

2. use the QRCode object, in the component, within the tag script, creating a QRCode object, as follows:

   var qrcode = new QRCode("qrcode", "https://www.geeksforgeeks.org");

Result: "130:19 error 'QRCode' is not defined no-undef"

Answer 1

Use https://github.com/Intosoft/custoqr It has guide for integrating on vuejs. This is pure JS lib so can be integrated on any JavaScript project

Doc for VueJS

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { generateSVGString } from '@intosoft/custoqr';

export default defineComponent({
  setup() {
    const svgString = ref<string>('');

    onMounted(() => {
      const config = {}; // Paste config here
      svgString.value = generateSVGString(config);
    });

    return {
      svgString
    };
  }
});
</script>

<template>
<div v-html="svgString"></div>
</template>