Vue component for social sharing
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
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 |
Author
© Mohit Bajoria
License
MIT
Related