Vue3和Nuxt3下使用qrcode.vue生成二维码。

在Vue3和Nuxt3下生成二维码推荐使用 nodejs下qrcode.vue组件，记一下使用方法和分别在Vue3和Nuxt3下分别的使用方法。 安装组件： ``` npm i qrcode.vue --save ``` Vue3下示例代码：(在components下建立组件） ``` <template>  <qrcode-vue :value="value" :size="size" /> </template> <script setup> import QrcodeVue from 'qrcode.vue' export default {    data() {      return {        value: 'https://example.com',        size: 300,      }    },    components: {      QrcodeVue,    },  } ``` 使用时直接调用组件，跟上value和size参数即可，带入网页路径直接以http://或https://开头，扫码自动转向。 Nuxt3下使用，并直接客户端渲染示例代码：（在components下建立组件qrcode.client.vue,使用client主要是标记为客户端渲染） ``` <script setup> import qrcodeVue from 'qrcode.vue'; defineProps({     content:{type:String,require:true,default:''},     size:{type:Number,require:false,default:100}, }); <template>   <qrcode-vue :value="content" :size="size"/> </template> ``` 使用时直接br ``` `<qrcode :content="内容" :size="大小"/>` ``` 即可调用，并在客户端渲染生成指定大小的二维码。这里使用了Vue3的setup语法糖，使用传统写法也可以，取决于个人习惯。