Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mbj36/vue-socialmedia-share
🔊 Vue component for social sharing of links - https://codesandbox.io/s/kk0mqj11lv
https://github.com/mbj36/vue-socialmedia-share
sharing-platform social-network vue vue-components vue2 vuejs2
Last synced: about 2 months ago
JSON representation
🔊 Vue component for social sharing of links - https://codesandbox.io/s/kk0mqj11lv
- Host: GitHub
- URL: https://github.com/mbj36/vue-socialmedia-share
- Owner: mbj36
- License: mit
- Created: 2018-05-29T13:06:41.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-06-01T13:20:41.000Z (over 6 years ago)
- Last Synced: 2024-07-13T20:06:47.411Z (2 months ago)
- Topics: sharing-platform, social-network, vue, vue-components, vue2, vuejs2
- Language: Vue
- Homepage:
- Size: 200 KB
- Stars: 70
- Watchers: 5
- Forks: 15
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-socialmedia-share
> Vue component for social sharing
### vue-socialmedia-share is a vue component for sharing links to social networks
## Demo
[](https://codesandbox.io/s/kk0mqj11lv)
## Features
* No external script loading
* Opens a new share tab
* Share Button for:
* [Facebook](https://github.com/mbj36/vue-socialmedia-share#facebook)
* [Twitter](https://github.com/mbj36/vue-socialmedia-share#twitter)
* [Reddit](https://github.com/mbj36/vue-socialmedia-share#reddit)
* [LinkedIn](https://github.com/mbj36/vue-socialmedia-share#linkedin)
* [Google +](https://github.com/mbj36/vue-socialmedia-share#google-)
* [WhatsApp](https://github.com/mbj36/vue-socialmedia-share#whatsapp)
* [Telegram](https://github.com/mbj36/vue-socialmedia-share#telegram)
* [Email](https://github.com/mbj36/vue-socialmedia-share#email)
* [Pinterest](https://github.com/mbj36/vue-socialmedia-share#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
```js
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
```js
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
```js
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
```js
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
```js
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
```js
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
```js
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 +
```js
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
```javascript
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 |
## Contributing Guide
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Author
© [Mohit Bajoria](https://mbj36.xyz)
## License
[MIT](https://github.com/mbj36/vue-socialmedia-share/blob/master/LICENSE)
Like it ? 
it