How To Make A Qr-code Generator With Vue JS And Quasar Framework

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 👇🏽:

yarn global add @vue/cli
# OR
npm install -g @vue/cli

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 👇🏽:

yarn global add @quasar/cli
# or
npm install -g @quasar/cli

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:

quasar create qr-generator

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 👇🏽:

quasar dev

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:

<template>
  <q-page class="flex flex-center">
    <img
      alt="Quasar logo"
      src="~assets/quasar-logo-vertical.svg"
      style="width: 200px; height: 200px"
    >
  </q-page>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'PageIndex'
})
</script>

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:

<template>
  <q-page>

     <q-input v-model="qrLink" label="Input value to generate" />
     <br/>
     <q-btn color="primary" label="Generate QR Code" />

      <canvas id="qr-code">

    </canvas>

  </q-page>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'PageIndex',
  data(){
    return{
      qrLink: ''
    }
  },
  methods: {

  }
})
</script>

Now we'll create a function in methods that lets us generate the Qr-code, but first we'll test if it works:

 methods: {
    generateQrCode: function(){
      console.log('generated code')
    }
  }

Then we'll bind the function to the button with @click

<q-btn color="primary" label="Generate QR Code" 
     @click="generateQrCode"
     />

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:

$ npm install --save qrious
# OR:
$ yarn add qrious

Then import it:

import QRious from "qrious";

Then we'll need to add some validation to the input field:

<q-input
      v-model="qrLink"
      label="Input value to generate"
      :rules="[(val) => !!val || 'Link field cannot be empty']"
    />

Then in the generateQrCode function we'll also add some validation and the code to generate the Qr-code itself:

generateQrCode: function () {
      if (this.qrLink != "" && this.qrLink != "\n") {
        new QRious({
                level: "H",
                padding: 25,
                size: 300,
                element: document.getElementById("qr-code"),
                value: this.qrLink,
              });
      }
    }

And Viola!, We have built our Qr-code generator 🎊

The code should look like this:

<template>
  <q-page>
    <q-input
      v-model="qrLink"
      label="Input value to generate"
      :rules="[(val) => !!val || 'Link field cannot be empty']"
    />
    <br />
    <q-btn color="primary" label="Generate QR Code" @click="generateQrCode" />

    <canvas id="qr-code"></canvas>
  </q-page>
</template>

<script>
import { defineComponent } from "vue";
import QRious from "qrious";

export default defineComponent({
  name: "PageIndex",
  data() {
    return {
      qrLink: "",
    };
  },
  methods: {
    generateQrCode: function () {
      if (this.qrLink != "" && this.qrLink != "\n") {
        new QRious({
          level: "H",
          padding: 25,
          size: 300,
          element: document.getElementById("qr-code"),
          value: this.qrLink,
        });
      }
    },
  },
});
</script>

Contact me if it looks like this

Visit the Github repo for this article here

My Github Profile

My Twitter

My Portfolio