about uscontact

How to add Social Sharing Buttons to NuxtJS

Category:
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: [
        '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>
Share this:

Leave a Reply

Your email address will not be published.

ZEMNA.NET

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 ❤️
magnifiercrossmenu