dl_site_nuxt/components/contact-footer.vue

<template>
  <ul class="contact-footer">
    <li class="mr-4 box_shadow" v-for="(item,index) in contactFooter" :key="index">
      <a :href="item.link"  @click="toShare(item.id)" target="_blank">
        <b-img :src="item.icon" :alt="item.alt"></b-img>
      </a>
    </li>
  </ul>
</template>

<script>

export default {
  name: 'ContactFooter',
  data() {
    return {
      contactFooter: [
        {
          icon: require('../assets/image/icon/Facebook-colorful.png'),
          link: 'javascript:;',
          alt: 'Facebook',
          id: 'facebook',
        },
        {
          icon: require('../assets/image/icon/X-colorful.png'),
          link: 'javascript:;',
          alt: 'X',
          id: 'x',
        },
        {
          icon: require('../assets/image/icon/in-colorful.png'),
          link: 'javascript:;',
          alt: 'Linkedin',
          id: 'linkedin'
        },
        {
          icon: require('../assets/image/icon/google-colorful.png'),
          link: 'javascript:;',
          alt: 'Pinterest',
          id: 'pinterest'
        },

        {
          icon: require('../assets/image/icon/fax-colorful.png'),
          link: 'javascript:;',
          alt: 'Whatsapp',
          id: 'whatsapp'
        }
      ]
    }
  },
  methods:{
    toShare(id){
      const url = encodeURIComponent(window.location.href);
      const title = encodeURIComponent(document.title);

      if (id === 'facebook') {
        window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank');
      }
      if (id === 'x') {
        window.open(`https://twitter.com/intent/tweet?url=${url}&text=${title}`, '_blank');
      }
      if (id === 'linkedin') {
        window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}`, '_blank');
      }
      if (id === 'pinterest') {
        window.open(`https://pinterest.com/pin/create/button/?url=${url}`, '_blank');
      }
      if (id === 'whatsapp') {
        window.open(`https://api.whatsapp.com/send?text=${title}%20${url}`, '_blank');
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.contact-footer {
  height: 3.5rem;
  margin: .625rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f3f8;
  border-radius: .375rem;
}
</style>