about uscontact

How to add Social Sharing Buttons to NuxtJS

Author: zemna
Date: April 18, 2021
Share this:

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: [

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 } })
      this.tags = Object.assign({}, ...tagsList.map((s) => ({ [s.name]: s })))
    [this.prev, this.next] = await this.$content('articles')
      .only(['title', 'slug'])
      .sortBy('createdAt', 'asc')

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.

      v-for="network in networks"
      :style="{backgroundColor: network.color}"
      <font-awesome-icon :icon="network.icon" class="text-white fa-fw fa-lg" />
Share this:

Leave a Reply

Your email address will not be published. Required fields are marked *


Professional software development agency estalished in Indonesia. We offers website setup, web application development, fulfillment service, and etc.
Follow us
Follow us to get latest news and tutorials.
2022 - Copyright, All Rights Reserved, Made by ZEMNA.NET with ❤️