How To Make A Qr-code Generator With Vue JS And Quasar Framework
Tags: quasarframework, javascript, vue
Published: 2021-10-16 02:42:35

### **What Is Vue JS (Like you **don't already know 🙄)**

[Vue JS](https://v3.vuejs.org) 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 👇🏽:

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



### What Is The Quasar Framework?

[Quasar Framework](https://quasar.dev/) 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 👇🏽:

```bash
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:

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



![Quasar File Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xndjcopozd54bvlkvhyw.png)

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

```bash
quasar dev
```

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

![Quasar home](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dafmqfxfsvad97vwhzle.png)

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

![Prepare](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f98w1tkd03bi9ql97i5h.gif)

### 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:

```vue
<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:

```vue
<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:

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

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

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

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

![Generated code console message](/home/n3rd/Pictures/console-gen-code.png)

Now we'll need to actually generate a QR Code, for this we'll need to install a library called **QRious**:

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

Then import it:

```javascript
import QRious from "qrious";
```

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

```vue
<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:



```javascript
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:

```vue
<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>

```

![Done](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3zpl55sbw1ox48utmz7.gif)

**Contact me if it looks like this**

![Man falling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7cl31629b7jvl8cxnhp.gif)

**Visit the Github repo for this article [here](https://github.com/n3-rd/qr-gen)**



[My Github Profile](https://github.com/n3-rd)

[My Twitter](https://twitter.com/web_n3rd)

[My Portfolio](https://n3-rd.github.io)