くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Vue.js > Vue/NuxtでQRコード生成

Vue/NuxtでQRコード生成

Vue.js Nuxt.js javascript Node.js

ブラウザ上でQRコードを生成したいなと探していたら、
よさげなVueコンポーネントを見つけたので、試してみたときの備忘録。

使ったのは、fengyuanchen/vue-qrcode。
soldair/node-qrcodeを使ったVueコンポーネントライブラリ。

インストール

まずは、インストール。Vueのバージョンによってvue-qrcodeのバージョンも変わるので注意。

// Vue3の場合は、vue-qrcodeのv2を使う
npm install vue@3 qrcode@1 @chenfengyuan/vue-qrcode@2

// Vue2の場合は、vue-qrcodeのv1を使う
npm install vue@2 qrcode@1 @chenfengyuan/vue-qrcode@1

使い方

使い方も簡単。コンポートを設定して、

import Vue from 'vue';
import VueQrcode from '@chenfengyuan/vue-qrcode';

Vue.component(VueQrcode.name, VueQrcode);

valueにQRコードの中身を設定するだけ！

<VueQrcode :value="qrCode" :options="{ width: 200 }" />

optionsでnode-qrcodeのoptionsを設定できる。

以上！便利(´ω｀)

参考にしたサイト様