Social share button and copyToclipboard with nuxt js

copyToclipboard.vue

<template>
  <v-card id="create">
    <v-speed-dial
      v-model="fab"
      :top="top"
      :bottom="bottom"
      :right="right"
      :left="left"
      :direction="direction"
      :open-on-hover="hover"
      :transition="transition"
    >
      <template v-slot:activator>
        <v-btn v-model="fab" elevation="5" color="#dc3545" dark fab small>
          <v-icon v-if="fab"> mdi-close </v-icon>
          <v-icon v-else> mdi-share-variant </v-icon>
        </v-btn>
      </template>
      <v-btn
        fab
        dark
        small
        elevation="5"
        v-for="s in social"
        :key="s.id"
        :href="`${s.url}${pageUrl}`"
        target="_blank"
        :color="s.color"
      >
        <v-icon>mdi-{{ s.id }}</v-icon>
      </v-btn>

      <v-btn
        fab
        dark
        small
        @click="clipBoard"
        elevation="5"
        color="#dc3545"
        ref="clipboard"
        :timeout="timeout"
      >
        <v-icon>mdi-content-copy</v-icon>
      </v-btn>
    </v-speed-dial>
    <v-snackbar v-model="snackbar" centered tile top>
      Copied to Clipboard

      <template v-slot:action="{ attrs }">
        <v-btn color="#dc3545" text v-bind="attrs" @click="snackbar = false">
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </v-card>
</template>


<script>
export default {
// pass current route value with prop
  props: {
    pageUrl: {
      type: String,
    },
  },
  data: () => ({
    snackbar: false,
    timeout: 2000,
    direction: 'top',
    fab: false,
    fling: false,
    hover: false,
    tabs: null,
    top: false,
    right: true,
    bottom: true,
    left: false,
    transition: 'slide-y-reverse-transition',
    social1: ['facebook', 'linkedin', 'twitter', 'content-copy'],
    social: [
      {
        id: 'facebook',
        url: 'https://www.facebook.com/sharer/sharer.php?u=',
        color: '#0D89F0',
      },
      {
        id: 'whatsapp',
        url: 'https://wa.me/?text=Checkout%20this%20page.%20$',
        color: '#4ECD5C',
      },
      {
        id: 'linkedin',
        url: 'https://www.linkedin.com/shareArticle?mini=true&url=',
        color: '#0A66C2',
      },
      {
        id: 'twitter',
        url: 'http://twitter.com/share?url=',
        color: '#1A91DA',
      },
    ],
  }),

  methods: {
    clipBoard() {
      this.snackbar = true;
      navigator.clipboard.writeText(this.pageUrl);
    },
  },

  watch: {
    top(val) {
      this.bottom = !val;
    },
    right(val) {
      this.left = !val;
    },
    bottom(val) {
      this.top = !val;
    },
    left(val) {
      this.right = !val;
    },
  },
};
</script>


<style lang="scss" scoped>
@import '~/assets/scss/_include-media.scss';

/* This is for documentation purposes and will not be needed in your application */
#create .v-speed-dial {
  position: absolute;
  right: 5px;
}

#create .v-btn--floating {
  position: relative;
}

#create {
  position: fixed;
  right: 10px;
  bottom: 60px;
  z-index: 5;
}

@include media('>=tablet') {
  #create {
    position: fixed;
    right: 10px;
    bottom: 60px;
    z-index: 5;
  }
}

//Media for Desktop size

@include media('>=desktop') {
  #create {
    position: fixed;
    right: 15%;
    bottom: 10%;
    z-index: 5;
  }
}
</style>