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.
<template>
<div>
<center class="q-mt-xl">
<input v-model="barcodeValue" /><br>
<barcode v-bind:value="barcodeValue">
Enter Your Text
</barcode>
</center>
</div>
</template>
<script>
import VueBarcode from 'vue-barcode';
export default {
data() {
return {
barcodeValue: '',
}
},
components: {
'barcode': VueBarcode
}
}
</script>
<style>
</style>
OK That’s all. Just check it. You will see a Realtime output there.