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.