DEV Community

Cover image for How To Make A Qr-code Generator With Vue JS And Quasar Framework
N3-rd
N3-rd

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Quasar File Structure

Now, we run the app by opening our terminal in the qr-generator folder location and entering 👇🏽:

quasar dev
Enter fullscreen mode Exit fullscreen mode

We should now see a home screen like this 👇🏽:

Quasar home

Now that we've created a new Quasar App, its time to get into the coding part

Prepare

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>

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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')
    }
  }
Enter fullscreen mode Exit fullscreen mode

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

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

When we click the button and check our console we should see the message:

Generated code console 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
Enter fullscreen mode Exit fullscreen mode

Then import it:

import QRious from "qrious";
Enter fullscreen mode Exit fullscreen mode

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']"
    />
Enter fullscreen mode Exit fullscreen mode

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,
              });
      }
    }
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

Done

Contact me if it looks like this

Man falling

Visit the Github repo for this article here

My Github Profile

My Twitter

My Portfolio

Discussion (0)