Vue share it is a highly customizable Vue.js plugin for sharing links on social networks.
share image on social media javascript, social share button, social share javascript, bs social share plugin, social media share buttons html
Features
- Easy installation
- Highly customizable
- Comprehensive documentation and examples
- Developer Support
- SEO friendly
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' }
Props
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. See [size chart](#sizeChart) below |
shareConfig | Object | {
linkedin: {}, twitter: {}, facebook: {}, whatsapp: {}, reddit: {}, } | Advanced configuration for target specific styling |
Customizable & SEO-friendly Social Sharing Component, vue-share-it Plugin/Github, social media footer html
See Demo And Download
Official Website(thisDOTname): Click Here
This superior jQuery/javascript plugin is developed by thisDOTname. For extra Advanced Usages, please go to the official website.