How to Generate Barcode Using Quasar

Hello everyone. This post is only for Quasar Framework lovers. Yes, I’m a one of them. As a framework, it has helped me to achieve my goals easily within less time-frame. Anyways, this is about a thing I wanted when I was going to develop an asset management app. When I was searching for a barcode reader and generator I found out Patrick’s repo which is very helpful for Quasar Barcode Reader function.  That’s a great one if you need to try it.

However, the purpose of this tutorial was to teach you how to generate a barcode. Because I couldn’t find a way specifically written to quasar framework.

Let’s install the vue-barcode first using yarn or npm.

yarn add vue-barcode

Then create a page and create a route for that page and paste the following code.

<center class="q-mt-xl">
<input v-model="barcodeValue" /><br>
<barcode v-bind:value="barcodeValue">
Enter Your Text

import VueBarcode from 'vue-barcode';
export default {
data() {
return {
barcodeValue: '',
components: {
'barcode': VueBarcode



OK That’s all. Just check it. You will see a Realtime output there.