vue-qrcode-component

Create QR codes with a simple Vue component

Installation

Follow the Installation guide before trying to reproduce any of the following examples.

Remember that you need a Vue instance so your components can be handled by Vue.


                            import Vue from 'vue'
                            

                            import VueQRCodeComponent from 'vue-qrcode-component'
                            



                            // Register the Vue component
                            

                            Vue.component('qr-code', VueQRCodeComponent)
                            


                            
                            // Create a Vue instance
                            

                            const app = new Vue({
                                el: '#app'
                            });

Simple usage

Just set a value for the required text prop.


                            <qr-code text="Hello World!"></qr-code>

Dynamic value

You can use v-bind: or the : shorthand to use a variable as text prop.


                            <input type="text" v-model="message">
                            



                            <qr-code :text="message"></qr-code>

Since the text prop has a watcher, when the value of the variable changes the component will generate a QR code for the new value.

Colors and sizing

You can fix the QR code width and height with the size prop (default 256, works in pixels).

Colors can be changed using color (default #000) and bg-color (default #FFF) props.

NOTE: If you use a darker color in bg-color than in color some QR code readers could have problems to understand your QR code.


                            <qr-code text="Your text" :size="100" color="blue"></qr-code>
                            

                            <qr-code text="Your text" :size="125" color="#e74c3c" bg-color="gold"></qr-code>
                            

                            <qr-code text="Your text" :size="150" color="#34495e" bg-color="#2ecc71"></qr-code>

Error Correction Level

You can use v-bind: or the : shorthand to use a variable as text prop.

Since the text prop has a watcher, when the value of the variable changes, the component will generate a QR code for the new value.


                            <qr-code text="Your text" error-level="L"></qr-code>
                            

                            <qr-code text="Your text" error-level="M"></qr-code>
                            

                            <qr-code text="Your text" error-level="Q"></qr-code>
                            

                            <qr-code text="Your text" error-level="H"></qr-code>

Created by Gerard Reches