【Nuxt.js】簡単にQRコード生成を実装する方法を紹介

#144　Nuxt.jsのアプリでQRコードを生成する

Nuxt.jsでQRコードを生成する方法をまとめます。今回はnode-qrcodeというnode.jsのライブラリを使用して実装していきます。

 

目次

[toc]

 

 

開発環境

• node.js v10.15.3
• npm 6.4.1
• nuxt 2.0.0
• vue 2.6.11
• node-qrcode 1.4.4

 

手順

1, node-qrcodeのインストール

githubはこちら

soldair/node-qrcode: qr code generator

 

インストールしたいNuxt appのルートディレクトリで、

npm i qrcode

 

package.jsonに追加されているか確認します。

 

package.json

{
  "name": "hogehoge",
  "version": "1.0.0",
  "description": "xxxxxxxxxxxx",
  "author": "fugafuga",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/pwa": "^3.0.0-0",
    "nuxt": "^2.0.0",
    "qrcode": "^1.4.4", // ここ
    "reset-css": "^5.0.1",
    "vue": "^2.6.11",
    "vue-carousel": "^0.18.0"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^1.0.1",
    "@nuxtjs/eslint-module": "^1.0.0",
    "@nuxtjs/style-resources": "^1.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^6.1.0",
    "eslint-plugin-nuxt": ">=0.4.2",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0"
  }
}

 

 

2, コーディング

今回はURLを使ってQRコードを表示します。

 

/xxxxx/index.vue

<template>
  <div>
    <img v-if="qrURL" :src="qrURL" alt="QRcode">
  </div>
</template>

<script>
import QRCode from 'qrcode'

export default {
  data () {
    return {
      text: 'ここの内容がQRコードで出力されます。',
      qrURL: null // QRコードのURLを入れる用
    }
  },
  mounted: {
    this.renderQR()
  },
  methods: {
    renderQR () {
      const d = this
      QRCode.toDataURL(this.text, (err, url) => {
        if (err) { throw err }
        d.qrURL = url
      })
    }
  }
}
</script>

 

他にもcanvasで直接QRを表示する方法もありました。（詳しくはnode-qrcodeのgithubに書いてあります。）

 

まとめ

今回はNuxtで簡単にQRコードが生成できる方法でした。インストールしてコード少し書くだけで実装できるのでぜひ試してみてください。

以上ありがとうございました。