If you want to implement a vue component for sharing links to social networks then follow these steps

vue-socialmedia-share is a vue component for sharing links to social networks
Features
- No external script loading
- Opens a new share tab
- Share Button for:
- Google +
- Telegram
- Social Media icons includes in the library
- Change the size of icons
Installation
yarn add vue-socialmedia-share
or
npm install vue-socialmedia-share
API
import { Facebook } from 'vue-socialmedia-share'; // usage in local component export default { components: { Facebook } };
Props
Prop | Data Type | Required | Description |
---|---|---|---|
url | String | true | URL to share. |
scale | String | Size of icon (1-9) |
import { Twitter } from 'vue-socialmedia-share'; // usage in local component export default { components: { Twitter } };
Prop | Data Type | Required | Description |
---|---|---|---|
url | String | true | URL to share. |
scale | String | Size of icon(1-9) | |
title | String | Title of the shared page |
import { Linkedin } from 'vue-socialmedia-share'; // usage in local component export default { components: { Linkedin } };
Prop | Data Type | Required | Description |
---|---|---|---|
url | String | true | URL to share. |
scale | String | Size of icon(1-9) |
import { Reddit } from 'vue-socialmedia-share'; // usage in local component export default { components: { Reddit } };
Prop | Data Type | Required | Description |
---|---|---|---|
url | String | true | URL to share. |
scale | String | Size of icon(1-9) | |
title | String | Title of the shared page |
Telegram
import { Telegram } from 'vue-socialmedia-share'; // usage in local component export default { components: { Telegram } };
Prop | Data Type | Required | Description |
---|---|---|---|
url | String | true | URL to share. |
scale | String | Size of icon(1-9) | |
title | String | Title of the shared page |
import { WhatsApp } from 'vue-socialmedia-share'; // usage in local component export default { components: { WhatsApp } };
Prop | Data Type | Required | Description |
---|---|---|---|
url | String | true | URL to share. |
scale | String | Size of icon(1-9) | |
title | String | Title of the shared page |
import { Pinterest } from 'vue-socialmedia-share'; // usage in local component export default { components: { Pinterest } };
Prop | Data Type | Required | Description |
---|---|---|---|
url | String | true | URL to share. |
scale | String | Size of icon(1-9) |
Google +
import { Google } from 'vue-socialmedia-share'; // usage in local component export default { components: { Google } };
Prop | Data Type | Required | Description |
---|---|---|---|
url | String | true | URL to share. |
scale | String | Size of icon(1-9) |
import { Email } from 'vue-socialmedia-share'; // usage in local component export default { components: { Email } };
Prop | Data Type | Required | Description |
---|---|---|---|
url | String | true | URL to share. |
scale | String | Size of icon(1-9) | |
subject | String | Subject of email | |
body | String | Body of email |