Open4

Vue.js(Nuxt.js)でQRコード作成

とーざきとーざき

vue-qrcodeを使用する

ライブラリインストール

npm install qrcode@1 @chenfengyuan/vue-qrcode@1

アプリケーションのvueバージョンが2系のため、バージョンを指定してインストールしている。vue-qrcodeの設定方法がバージョンによって違うので、確認する場合は、バージョンごとのREADMEを参照するとよい。

参考: fengyuanchen/vue-qrcode at v1.0.2 https://github.com/fengyuanchen/vue-qrcode/tree/v1.0.2

とーざきとーざき

プラグインを作成

plugins/vueQrcode.js

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

Vue.component(VueQrcode.name, VueQrcode)
とーざきとーざき

作成したプラグインを適応

nuxt.config.js

plugins: ['@/plugins/vueQrcode'],
とーざきとーざき

QRコードの利用

利用したい箇所で呼び出す

<qrcode :value="http://example.com" :options="{ width: 500 }" />

value: 生成元のURL
options: オプション。設定例としてwidthを設定。他オプションについては、必要な場合はgithubページ参照。