How to add Social Sharing Buttons to NuxtJS

We can easily add social sharing buttons to your NuxtJS project using vue-social-sharing package.

Install required packages from npm

npm install vue-social-sharing --save

Add vue-social-sharing/nuxt to modules in your nuxt.config.js

export default {
    modules: [
        'vue-social-sharing/nuxt',
    ],
}

Set required data in your vue page

export default {
  data() {
    return {
      article: {},
      tags: [],
      prev: null,
      next: null,
      sharing: {
        url: process.env.baseUrl + this.$route.fullPath,
        title: '',
        description: '',
        quote: '',
        hashtags: '',
        twitterUser: 'zemna'
      },
      networks: [
        { network: 'facebook', icon: ['fab', 'facebook-f'], color: '#1877f2' },
        { network: 'twitter', icon: ['fab', 'twitter'], color: '#1da1f2' },
        { network: 'messenger', icon: ['fab', 'facebook-messenger'], color: '#0084ff' },
        { network: 'pinterest', icon: ['fab', 'pinterest'], color: '#bd081c' },
        { network: 'telegram', icon: ['fab', 'telegram-plane'], color: '#0088cc' },
        { network: 'whatsapp', icon: ['fab', 'whatsapp'], color: '#25d366' },
      ]
    }
  },
}

Use fetch() than asyncData() to set data after load

export default {
  async fetch () { // Change asyncData() to fetch() to access 'this' inside function
    this.article = await this.$content('articles', this.$route.params.slug).fetch()
    this.tags = []
    if (this.article.tags) {
      const tagsList = await this.$content('tags')
        .only(['name', 'slug'])
        .where({ slug: { $containsAny: this.article.tags } })
        .fetch()
      this.tags = Object.assign({}, ...tagsList.map((s) => ({ [s.name]: s })))
    }
    [this.prev, this.next] = await this.$content('articles')
      .only(['title', 'slug'])
      .sortBy('createdAt', 'asc')
      .surround(this.$route.params.slug)
      .fetch()
  },
}

Use watch to set sharing information after load

export default {
  watch: {
    article: function (val) {
      this.sharing.title = this.article.title
      this.sharing.description = this.article.description
      this.sharing.hashtags = this.article.tags.toString()
    }
  },
}

Add <ShareNetwork /> vue component in your template

I'll use <font-awesome-icon /> vue component to display social media icon. This article helps you to setup.

<template>
  <div>
    <ShareNetwork
      v-for="network in networks"
      :network="network.network"
      :key="network.network"
      :style="{backgroundColor: network.color}"
      :url="sharing.url"
      :title="sharing.title"
      :description="sharing.description"
      :quote="sharing.quote"
      :hashtags="sharing.hashtags"
      :twitterUser="sharing.twitterUser">
      <font-awesome-icon :icon="network.icon" class="text-white fa-fw fa-lg" />
    </ShareNetwork>
  </div>
</template>