vue-qriouslyとは

 

「vue-qriously」でQRコードを作成する

 

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

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

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

 

インストール

以下のnpmyarnCDNを使ってインストールします。

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コードを読み込むライブラリを合わせて利用するとより便利です。

「vue-qrcode-reader」でQRコードリーダーをWEBページに実装する

 

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

QRコードを作成する

 

今日はこの辺でー

 

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください