With the magic of Vue, it's pretty easy to do a whole host of pretty cool things dynamically. As a quick example, here's a dynamic QR Code generator using a text box linked to the vue-qriously library.

As you edit the text, the QR code will update automagically. You can also resize the QR code with the slider. An error correction level can be chosen via the dropdown box. The colour can be selected using an html color input.

The result is a PNG image, so you can right click on it and save it locally.


Here's the code I wrote, a Single File Component (SFC) that generates the QR Code. The <qriously> tag loads the vue-qriously plugin, which performs the magic of creating the QR code.

		<input id="text" v-model="text" title="Text">
		<select id="error" v-model="error" title="Error Correction Level">
			<option value="L">L (7%)</option>
			<option value="M">M (15%)</option>
			<option value="Q">Q (25%)</option>
			<option value="H">H (30%)</option>
		<input id="slider" type="range" min="100" max="700" v-model.number="size" :title="size + ' px'" />
		<input type="color" v-model="colour">
		<qriously id="qr" :value="text" :size="size" :level="error" :foreground="colour" title="Right click to save" />

	//import {qriously} from 'vue-qriously'
	export default {
		/*components: {
		data() {
			return {
				text: "https://mark.honeychurch.org/",
				size: 300,
				error: "L",
				colour: "#000000"

<style scoped>
	#text {
		width: 80%;
		padding: 0.5em;
		margin-bottom: 2em;

	#error {
		padding: 0.5em;

	#slider {
		width: 80%;
		margin-right: 1em;
		margin-bottom: 2em;

	#qr {
		text-align: center;
		/*height: 700px;*/