npm install --save qrcode

// ts聲明
npm i --save-dev @types/qrcode

import QRCode from 'qrcode'

// With promises
QRCode.toDataURL('I am a pony!')
  .then(url => {
    console.log(url)
  })
  .catch(err => {
    console.error(err)
  })

// With async/await
const generateQR = async text => {
  try {
    console.log(await QRCode.toDataURL(text))
  } catch (err) {
    console.error(err)
  }
}

import QRCode from 'qrcode';

QRCode.toDataURL('I am a pony!', function (err, url) {
  console.log(url) //base64圖片地址
})

<template>
  <div>
    <h1>二維碼</h1>
    <img
      :src="imageUrl"
      mode="scaleToFill"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import QRCode from 'qrcode'

const imageUrl = ref('');

(
  function getQrcode() {
    QRCode.toDataURL('I am a pony!')
      .then(url => {
        console.log(url)
        imageUrl.value = url
      })
      .catch(err => {
        console.error(err)
      })
  }
)()
</script>

import QRCode from 'qrcode';

QRCode.toString('http://www.google.com', function (err, string) {
  if (err) throw err
  console.log(string)//svg字符串
})

<template>
  <div>
    <h1>二維碼</h1>
    <div v-html="imageUrl" style="width: 100px; height: 100px"></div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import QRCode from 'qrcode'

const imageUrl = ref('');

(
  function getQrcode() {
    QRCode.toString('http://www.google.com', 
    function (err, string) {
      if (err) throw err
      imageUrl.value = string
      console.log(string)//svg字符串
    })
  }
)()
</script>

 import QRCode from 'qrcode';

 QRCode.toCanvas(document.getElementById('canvas'), 'http://www.google.com', 
  function (error) {
    if (error) throw error;
    console.log('success!');
  });

<template>
  <canvas id="canvas"></canvas>
</template>

<script setup>
import { onMounted } from 'vue'
import QRCode from 'qrcode';

onMounted(() => {

  const options = { // 設(shè)置二維碼的參數(shù)，例如大小、邊距等
    width: 200,
    height: 200,
    margin: 2,
  };

  (
    function getQrcode() {
      QRCode.toCanvas(
        document.getElementById('canvas'),
        'http://www.google.com',
        options,
        function (error) {
          if (error) throw error;
          console.log('success!');
        });
    }
  )()
})
</script>

import QRCode from 'qrcode'

var options = {
  errorCorrectionLevel: 'H',
  margin: 1,
  color: {
    dark:"#010599FF",
    light:"#FFBF60FF"
  }
}

QRCode.toDataURL('http://www.google.com', options, 
function (err, url) {
  if (err) throw err
  var img = document.getElementById('image')
  img.src = url
})