Nuxtプロジェクトに vue-qrcodeを使って現在のページのURLをQRコードで表示する

vue-qrcodeを使って現在のページのURLをQRコードで表示してみます

インストール

npm install @chenfengyuan/vue-qrcode vue

typescriptで使うため型定義もインストール

npm install @types/chenfengyuan__vue-qrcode

plugins/vueQrcod.tsを作成しコンポーネントを登録

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

Vue.component(VueQrcode.name, VueQrcode)

nuxt.config.tsに作成したpluginを追加

export default {
//省略
   ** Plugins to load before mounting the App
   */
  plugins: [
    '@/plugins/vueQrcod' // 追加
  ],
// 省略
}

これで利用する準備は完了あとはQRコードを表示したいところに以下のように記述

<qrcode :value="url" :options="{ width: 200 }"></qrcode>

リモートで働くプログラマーの検索結果