How to use it in vue

[lintiansheng]

I want to use it in a vue project

[mebjas]

I assume this is copy of #48.

I have not worked with vue before but I assume there is an import error. I'll play around and see how to do it and get back.

[mebjas]

Meanwhile it'd be nice if you could share screenshot or error message here - I am closing the other one as duplicate for now.

[mebjas]

@lintiansheng I have not used vue js before and I went through the basic tutorials to come up with working example

I have defined a component in this js file: https://github.com/mebjas/html5-qrcode-examples/blob/master/vuejs/vuejs/main.js

Vue.component('qrcode-scanner', {
	props: {
		qrBox: Number,
	},
        // rest of things ... refer the link to js file 

and the set the component in html like

<qrcode-scanner v-bind:qrBox="250" style="width: 500px;"></qrcode-scanner>

The demo looks like this

[mebjas]

I am sure this is a hacky way to do this, I'll read more about vue and try to implement a proper component

[lintiansheng]

thank your very much,I used the CDN import to solve it。

[mebjas]

I recently made an update to the library which makes integration much easier with complete user interface to the scanner. The new class included in the library is called Html5QrcodeScanner

This makes the VueJs component much simpler as well. - Just following lines*

Vue.component('qrcode-scanner', {
	props: {
		qrbox: Number,
		fps: Number,
	},
	template: `<div id="qr-code-full-region"></div>`,
	mounted: function () {
		var config = { fps: this.fps ? this.fps : 10 };
		if (this.qrbox) {
			config['qrbox'] = this.qrbox;
		}

		function onScanSuccess(qrCodeMessage) {
			console.log(qrCodeMessage);
		}
		
		var html5QrcodeScanner = new Html5QrcodeScanner(
			"qr-code-full-region", config);
		html5QrcodeScanner.render(onScanSuccess);
	}
});

You may have to update onScanSuccess and bind it directly with the some component callback - I am sure there are ways to do it - I am just not aware of it.

Using it in html is the same

<qrcode-scanner 
    v-bind:qrbox="250" 
    v-bind:fps="10"
    style="width: 500px;">
</qrcode-scanner>

Updated demo code here as well - https://github.com/mebjas/html5-qrcode-examples/tree/master/vuejs

[mebjas]

Closing this issue!