Renders QR codes for shards

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "secrets.js-grempe": "^1.1.0",
     "vue": "^2.5.17",
+    "vue-qriously": "^1.1.1",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {

src/main.js

@@ -1,10 +1,15 @@
 import Vue from 'vue'
+
+import VueQriously from 'vue-qriously'
+Vue.use(VueQriously)
+
 import App from './App.vue'
 import router from './router'
+
 import OnlinePlugin from './plugins/online'
+Vue.use(OnlinePlugin)
 
 Vue.config.productionTip = false
-Vue.use(OnlinePlugin)
 
 new Vue({
   router,

src/views/Share.vue

@@ -4,7 +4,11 @@
     <textarea v-model="secret" placeholder="Your secret goes here"></textarea>
     <p><input type="range" v-model.number="totalShards" v-bind:min="requiredShards" max="16"/>{{totalShards}}</p>
     <p><input type="range" v-model.number="requiredShards" min="1" v-bind:max="totalShards"/>{{requiredShards}}</p>
-    <p>{{shards}}</p>
+
+    <div>
+        <qriously v-for="shard in shards" v-bind:key="shard" v-bind:value="shard" size="200"/>
+    </div>
+
 </div>
 </template>
 

yarn.lock

@@ -6691,6 +6691,11 @@ vue-loader@^15.4.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-qriously@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/vue-qriously/-/vue-qriously-1.1.1.tgz#b3a84b05280cb1edfd153bbc003f031995ea7ce7"
+  integrity sha512-AlP8A7LpXWF5lyJsQYxtPE3+qlRqIBX9CP3cn0Oiov9QFNovp+3z7VJLqHRQh6poXO5K2RbZwAiY3hsVVlQbRg==
+
 vue-router@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.1.tgz#d9b05ad9c7420ba0f626d6500d693e60092cc1e9"