概要

Vue.jsのページにQRコードを表示させる要件があったので対応しました。
qrcodeパッケージを利用しました。

※ このパッケージは汎用性が高く、Vue.jsだけでなく、任意のフレームワークで使えます。

実装内容

インストール

% yarn add qrcode

画面実装

<canvas id="qrcode"></canvas>

import QRCode from 'qrcode'
const canvas = document.getElementById('qrcode')
const data = 'qrcode-string-data'
QRCode.toCanvas(canvas, data, function (e) {
  if (e) console.error(e)
})

• qrcode表示用のcanvasを定義しておきます。（必要であればcssなどを作って見た目をよくしておきます。）
• qrcodeパッケージを利用して任意の文字列をレンダリングできます。

以上になります。