Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Simple Developer
Simple Developer
We can easily add social sharing buttons to your NuxtJS project using vue-social-sharing package.
We can easily add social sharing buttons to your NuxtJS project using vue-social-sharing package.
npm install vue-social-sharing --save
vue-social-sharing/nuxt
to modules in your nuxt.config.jsexport default { modules: [ 'vue-social-sharing/nuxt', ], }
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' }, ] } }, }
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() }, }
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() } }, }
<ShareNetwork />
vue component in your templateI’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>