Vue.js for SEO-friendly Social Sharing Networking Component

Vue Share it is a highly customizable Vue.js plugin for sharing links on social networks.

Features

Easy installation
Highly customizable
Comprehensive documentation and examples
Developer Support
SEO friendly

Must Read: Social Sharing Buttons Plugin for VuePress

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-share-it

# NPM
$ npm install vue-share-it --save

1. Import the vue-share-it component.

import shareIt from 'vue-share-it';

2. Register the componnet.

Vue.use(shareIt);

3. Create virtual social share buttons in the template.

<shareit />

4. Use emoticons instead.

<share-it :icons="true" />
<share-it icons outline />
<share-it icons outline round />

5. Enable/disable social platforms.

<share-it :targets="['twitter', 'facebook']" />

6. More props to customize the social share buttons.

shareConfig: {
  type: Object,
  default: () => {
    return {
      linkedin: {},
      twitter: {},
      facebook: {},
      whatsapp: {},
      reddit: {},
      email: {},
    }
  }
},
targets: {
  type: Array,
  default: () => {
    return []
  }
},
text: {
  type: String,
  default: ''
},
url: {
  type: String,
  default: ''
},
width: {
  type: Number,
  default: 600
},
height: {
  type: Number,
  default: 600
},
dense: {
  type: Boolean,
  default: false
},
dark: {
  type: Boolean,
  default: false
},
icons: {
  type: Boolean,
  default: false
},
outline: {
  type: Boolean,
  default: false
},
round: {
  type: Boolean,
  default: false
},
iconSize: {
  type: String,
  default: 'lg'
}

Supported social-media platforms

Must Read: Fast and Easy Social Sharing Buttons Shareable Library | SocialShareJS

Platform	Value
Twitter	twitter
LinkedIn	linkedin
Facebook	facebook
Whatsapp	whatsapp
Reddit	reddit

API

Props

Must Read: Create Custom Social Sharing Buttons | C Share Plugin

Prop	Data type	Default	Description
text	String	”	Caption
url	String	”	URL to share
width	Number	600	Width of the share window
height	Number	600	Height of the share window
dense	Boolean	false	Dense button styling
dark	Boolean	false	Dark button styling
targets	Array	[]	Specify social media targets, defaults to all available targets
icons	Boolean	false	Use icons as buttons
outline	Boolean	false	Outline button styling
round	Boolean	false	Round button styling for icons
iconSize	String	lg	Specify icon size.
shareConfig	Object	{ linkedin: {}, twitter: {}, facebook: {}, whatsapp: {}, reddit: {}, }	Advanced configuration for target-specific styling