#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コードが生成できる方法でした。インストールしてコード少し書くだけで実装できるのでぜひ試してみてください。
以上ありがとうございました。