くらげになりたい。

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

Vue/NuxtでQRコード生成

ブラウザ上で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);

valueQRコードの中身を設定するだけ!

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

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

以上!便利(´ω`)

参考にしたサイト様