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 |
---|---|
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 |
Events
Must Read: Create Custom Social Share Buttons with JavaScript and HTML5 | sharer.js
Name | Description | Value |
---|---|---|
clicked | The event that is emitted when a share button is clicked | Returns social media platform which was clicked. E.g. [“twitter”] |
Slots
Name | Description |
---|---|
${platform}-icon | Custom icon for platform |
${platform}-label | Custom icon for the platform |
Size chart
Code | Size |
---|---|
xs | .75em |
sm | .875em |
lg | 1.33em |
2x | 2em |
3x | 3em |
4x | 4em |
5x | 5em |
6x | 6em |
7x | 7em |
8x | 8em |
9x | 9em |
10x | 10em |
See Demo And Download

Official Website(thisDOTname): Click Here
This superior jQuery/javascript plugin is developed by thisDOTname. For extra Advanced Usage, please go to the official website.