If you want to implement a vue component for sharing links to social networks then follow these steps
vue-socialmedia-share
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:
- Facebook
- Twitter
- Reddit
- LinkedIn
- Google +
- WhatsApp
- Telegram
- Email
- Pinterest
- 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
Facebook
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) |
Twitter
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 |
LinkedIn
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) |
Reddit
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 |
WhatsApp
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 |
Pinterest
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) |
Email
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 |