Vue3 generates QR code qrcode based on domain name

1. npm install components

npm i qrcode

2. Import components

import {
    
     ref } from 'vue';
import QRCode from 'qrcode';

3. Put labels where needed

<template>
	<div>
	  <h1>生成二维码</h1>
	  <input type="text" v-model="text" placeholder="请输入要生成二维码的内容" />
	  <button @click="generateQRCode">生成</button>
	  <br />
	  <br />
	  <div v-if="qrCode">
		<img :src="qrCode" alt="QR Code" />
	  </div>
	</div>
  </template>
  <style scoped>
  h1 {
    
    
	font-size: 2rem;
	margin-bottom: 1rem;
  }
  input {
    
    
	padding: 0.5rem;
	font-size: 1.2rem;
	border-radius: 0.25rem;
	border: 1px solid #ccc;
	margin-right: 1rem;
  }
  button {
    
    
	padding: 0.5rem 1rem;
	font-size: 1.2rem;
	border-radius: 0.25rem;
	border: none;
	background-color: #4caf50;
	color: #fff;
	cursor: pointer;
  }
  img {
    
    
	max-width: 100%;
	height: auto;
	margin-top: 1rem;
  }
  </style>
  

Fourth, put the domain name that needs to be generated into

 export default {
    
    
	name: 'QRCodeGenerator',
	setup() {
    
    
	  const text = ref('');
	  const qrCode = ref('');
  
	  const generateQRCode = async () => {
    
    
		try {
    
    
		  const qrCodeDataUrl = await QRCode.toDataURL(text.value);
		  qrCode.value = qrCodeDataUrl;
		} catch (error) {
    
    
		  console.error(error);
		}
	  };
  
	  return {
    
    
		text,
		qrCode,
		generateQRCode,
	  };
	},
  };