お手軽なQRコード作成ライブラリ「vue-qriously」で試す

vue-qriouslyとは

 

 

vue-qriouslyは、QRコードを作成することができるライブラリです。

qriousというライブラリが元になっています。

QRコードを作成する時に色やサイズなどの設定を行うことができます。

 

インストール

以下のnpm、yarn、CDNを使ってインストールします。

npm

npm install --save vue-qriously

yarn

yarn add vue-qriously

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-qriously.min.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/theomessin/vue-qriously

導入手順

QRコードジェネレーターを実装します。

1. ライブラリの取り込み

（1）webpack等の場合 ※モジュール版は未検証です。

import VueQriously from 'vue-qriously'
Vue.use(VueQriously)

（2）WEBページの場合

Vue.use(window['vue-qriously']);

2.メソッドを設定

new Vue({
  el: "#app",
  data: {
    url:null
  }
})

3. <qriously>テンプレートを準備

<div id="app">
  <qriously :value="url" :size="200" />
</div>

 

サンプル

>>専用ページで確認する

 

さいごに

QRコードを作成することができるライブラリでした。

 

昨日公開したQRコードを読み込むライブラリを合わせて利用するとより便利です。

QRコードリーダーがWEBページで？！「vue-qrcode-reader」の使い方

 

Vue.jsを使いたくないなーという方は下記の記事を参考にしてください。

QRコードを作成する

 

今日はこの辺でー