vue.js

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

2019年8月15日

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

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

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

 

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

QRコードを作成する

 

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-vue.js
-, ,