ShareLink.vue

<template>
  <v-speed-dial v-model="dialShare" absolute top right direction="left" open-on-hover>
    <template #activator>
      <v-btn fab bottom small color="primary">
        <v-icon v-if="dialShare">mdi-close</v-icon>
        <v-icon v-else>mdi-share-variant</v-icon>
      </v-btn>
    </template>
    <v-btn dark fab bottom color="blue darken-7" small :href="`https://www.linkedin.com/shareArticle?mini=true&url=${pageUrl}`" target="_blank">
      <v-icon>mdi-linkedin</v-icon>
    </v-btn>
    <v-btn dark fab bottom color="blue" small :href="`https://www.facebook.com/sharer/sharer.php?u=${pageUrl}`" target="_blank">
      <v-icon>mdi-facebook</v-icon>
    </v-btn>
    <v-btn dark fab bottom color="green" small :href="`https://wa.me/?text=Checkout%20this%20page.%20${pageUrl}`" target="_blank">
      <v-icon>mdi-whatsapp</v-icon>
    </v-btn>
    <v-btn dark fab bottom color="primary" small :href="`mailto:?subject=JASS analysis&amp;body=Here is an analysis computed in JASS: ${pageUrl}`" target="_blank" title="Send by mail">
      <v-icon>mdi-email</v-icon>
    </v-btn>
    <v-btn dark fab bottom color="primary" small title="Copy to clipboard" @click="copySign()">
      <v-icon>mdi-clipboard</v-icon>
    </v-btn>
  </v-speed-dial>
</template>

<script>
export default {
  props: {
    pageUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialShare: false
    }
  },
  methods: {
    copySign() {
      navigator.clipboard.writeText(this.pageUrl);
    }
  }
}
</script>