contact-card-barcode-shareable-link.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" @submit.prevent="upload">
         <!-- form field goes here --></div>
        <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" class="dn"></VueBarcode>
        <section v-if="results && results.secure_url">
          <img :src="results.secure_url" :alt="results.public_id" class="mv3" />
          <input disabled type="text" class="db w-90 pv3 ph2 br2 ba b--black-40 f7" :value="results.url" />
          <button class="f6 link dim br2 ph3 pv2 db white bg-dark-green ba b--green mt2">Share link</button>
        </section>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      // data option goes here
    }
  }, 
  methods: {
    // function to upload image and return it from Cloudinary
    upload () {
      this.$axios(requestObj)
      .then(response => {
        this.results = response.data;
        navigator.clipboard
        .writeText(this.results.url)
      })
    }
  }
}
</script>