How To Make A Qr-code Generator With Vue JS And Quasar Framework
Create a simple QRCode generator using VueJS and Quasar Framework
Time to read: ~ 5 min
**What Is Vue JS (Like you don't already know 🙄)
Vue JS is one of the most popular JavaScript front-end frameworks today, created by Evan You in February 2014, it has risen in popularity over the years. The latest version of Vue JS as of October 2021 is Vue 3.
You can install Vue CLI with the following commands 👇🏽:
What Is The Quasar Framework?
Quasar Framework is a Vue JS framework that lets you develop Vue JS apps with ease and simplicity, it provides components and many other features for developing a SPA (Single Page Application), PWA (Progressive Web App), BEX (Browser Extension), SSR (Server-side Rendered App), Hybrid Mobile app, Multi-Platform Desktop App and every other Heavenly thing you desire. You can check out the documentation here.
Quasar CLI can be installed with the following commands 👇🏽:
When both Vue CLI and Quasar CLI are installed, we move on to the next step
Creating A New Quasar App 📱
We'll create a new quasar app by navigating to our desired location and running:
This may take a while to wrap up but when its done, open the newly generated qr-generator folder in your preferred IDE, I use Visual Studio Code
You should see a file structure like this 👇🏽:
Now, we run the app by opening our terminal in the qr-generator folder location and entering 👇🏽:
We should now see a home screen like this 👇🏽:
Now that we've created a new Quasar App, its time to get into the coding part
Coding Our App 🖥
The first thing we'll do is to go into the pages folder and open up Index.vue, we should see the following code:
We'll remove the image and add an input field and a button attaching v-models to create a two way binding for the input:
Now we'll create a function in methods that lets us generate the Qr-code, but first we'll test if it works:
Then we'll bind the function to the button with @click
When we click the button and check our console we should see the message:
Now we'll need to actually generate a QR Code, for this we'll need to install a library called QRious:
Then import it:
Then we'll need to add some validation to the input field:
Then in the generateQrCode function we'll also add some validation and the code to generate the Qr-code itself:
And Viola!, We have built our Qr-code generator �*
The code should look like this:
Contact me if it looks like this
Visit the Github repo for this article here
My Portfolio