Menambahkan Tombol Share di Nuxt JS

August 13, 2021 3 min read
Belajar bagaimana menambahkan Tombol Social Sharing di Nuxt JS.

Ini adalah lanjutan dari artikel Membuat Blog Dengan Nuxt Content . Setelah kita sudah membuat blog, kita bisa melanjutkan ke tahap berikutnya dengan menambahkan salah satu komponen penting di blog, yaitu tombol share atau social sharing button.

Untuk menambahkan tombol share, kita bisa menggunakan modul vue-social-sharing. Berikut ini langkah-langkahnya.

Install Paket yang Dibutuhkan

Pertama, install paket yang dibutuhkan, yaitu vue-social-sharing.

npm install vue-social-sharing --save

Tambahkan Modul ke dalam nuxt.config.js

Selanjutnya, tambahkan modul ke dalam nuxt.config.js.

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


Tambahkan Tombol Share ke Komponen Artikelmu

Selanjutnya, tambahkan tombol share ke dalam tampilan artikelmu, dan lakukan sedikit konfigurasi.

<template>
...
</template>
<script>
export default {
  data() {
    return {
      article: {},
      tags: [],
      prev: null,
      next: null,
      sharing: {
        url: process.env.baseUrl + this.$route.fullPath,
        title: '',
        description: '',
        quote: '',
        hashtags: '',
        twitterUser: 'username_twittermu'
      },
      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' },
      ]
    }
  },
}
</script>


Gunakan fetch() dan asyncData() Untuk Mengatur Data

Lalu, kita bisa menggunakan fetch() dan asyncData untuk mengambil data yang dibutuhkan seperti, judul artikel, link artikel, atau tag artikel yang dibutuhkan.

<template>
...
</template>
<script>
export default {
  ...
  async fetch () {
    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()
  },
  ...
}
</script>


Tambahkan watch() Untuk Mengatur Data Yang Perlu Dibagikan Setelah Artikel di Ambil

<template>
...
</template>
<script>
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()
    }
  },
  ...
}
</script>


Tambahkan <ShareNetwork/> Ke Dalam Halaman Artikel

Terakhir, tambahkan <ShareNetwork/> ke dalam <template>...</template> artikelmu.

<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>
<script>
export default {
  ...
}
</script>


Disini saya menggunakan <font-awesome-icon /> untuk menampilkan icon social medianya, kamu bisa mengubahnya sesuai kebutuhan. Lihat cara installasinya di artikel Menambahkan Font Awesome di Nuxt JS

Itulah cara menambahkan tombol social sharing di Nuxt.js, semoga bermanfaat.


Terima kasih sudah membaca artikel "Menambahkan Tombol Share di Nuxt JS"
Bagikan
Silahkan Login untuk berkomentar.