Vue Js Social Share Button Example

Sometimes you need social share button in your application to marketing your product or content. In this example i will show you that how to create social share button for your vue js application. This package gives us most popular social network to share our content like facebook, twitter, instagram, linkedin etc.

To create this social share button i will use vue-social-sharing package. So from this vue social sharing tutorial example you will learn that from scratch. You can use this package in nuxt js application also. So this vue social sharing tutorial is applicable for vue js and nuxt js app.

Preview for Facebook:

vue-js-social-share-button

 

To create this vue js social share button run this below command to install it.

# Yarn
yarn add vue-social-sharing

# NPM
npm install --save vue-social-sharing

 

It is also available in Vue 3 in Alpha build, you can try it with the following command:

# Yarn
yarn add vue-social-sharing@next

# NPM
npm install --save vue-social-sharing@next

 

Remember: that this is an alpha build, not all feature are available yet and you will certainly encounter some bugs.

 

For your nuxt js application

nuxt.config.js

modules: [
  'vue-social-sharing/nuxt'
]

 

After installing this package, now use it like that

 

Read also: Vue js Password Strength Meter Example

 

Hope it can help you.

 

#vue-js #vue-3 #social-share-button