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

投稿日:

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

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

 

目次

 

 

開発環境

  • 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のルートディレクトリで、

 

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

 

package.json

 

 

2, コーディング

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

 

/xxxxx/index.vue

 

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

 

まとめ

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

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

-プログラミング学習
-, ,

Copyright© s u p ? , 2020 All Rights Reserved.