With the magic of Vue (opens new window), 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 (opens new window) 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.

L (7%) M (15%) Q (25%) H (30%)

Code

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

<template>
	<form>
		<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>
		</select>
		<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" />
	</form>
</template>

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

<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;*/
	}
</style>