contact-card-barcode.vue

<template>
  <div class="ph4 pv3 bg-washed-red vh-100">
    <!-- header goes here -->

    <div class="flex flex-wrap justify-between">
      <form class="tc w-50-ns w-100 mt4 ph5-ns">
        <!-- form field goes here -->
        <button class="f6 link dim br2 ph3 pv2 db white bg-dark-green ba b--green pointer tl mv3" type="submit">Generate Barcode</button>
      </form>

      <section class="w-50-ns w-100 tl pa3">
        <VueBarcode ref="barcode" :value="contactName + ' ' + contactNumber" tag="img" name="barcode.png"></VueBarcode>
      </section>
    </div>
  </div>
</template>

<script>
  import VueBarcode from '@chenfengyuan/vue-barcode';

export default {
  components: {
    VueBarcode
  },
 
}
</script>