Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/10quality/vue-social-shares
Social sharer for Vue.
https://github.com/10quality/vue-social-shares
Last synced: 5 days ago
JSON representation
Social sharer for Vue.
- Host: GitHub
- URL: https://github.com/10quality/vue-social-shares
- Owner: 10quality
- License: mit
- Created: 2016-06-30T18:49:12.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-08-11T17:50:51.000Z (over 8 years ago)
- Last Synced: 2024-09-17T00:46:34.444Z (2 months ago)
- Language: JavaScript
- Size: 9.77 KB
- Stars: 12
- Watchers: 4
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Social Shares Component (for [Vue](http://vuejs.org/))
[](https://badge.fury.io/gh/10quality%2Fvue-social-shares)
[](https://badge.fury.io/bo/vue-social-shares)
Social network sharing component for [Vue Js](http://vuejs.org/).
[Demo](http://codepen.io/amostajo/pen/ZOKyYR)
## Package index
- [Installation](#installation)
- [Usage](#usage)
- [Props](#props)
- [Custom binding](#custom-binding)
- [Events](#event)
- [Networks supported](#networks-supported)
- [License](#license)
## Installation
Several installation options are available:
- [Download the latest release](https://github.com/10quality/vue-social-shares/releases).
- Install with [Bower](http://bower.io): `bower install vue-social-shares`.
## Usage
Add the following resources for the component to function correctly.
```html
```
Add the component in your vue view.
```html
Share in facebook
Share in whatsapp
```
### Props
List of available props to use in component:
Prop | Data Type | Default | Description
-------------- | ---------- | --------- | -----------
`url` | String | current | URL to share.
`title` | String | | Sharing title (if available).
`description` | String | | Sharing description (if available).
`twitter-user` | String | | Twitter user (Only for twitter).
Usage example:
```html
```
```javascript
new Vue({
el: '#app',
data: {url:undefined},
});
```
### Custom binding
Instead of using child components to enable share functionality:
```html
Share in facebook
```
Click event binding can be applied instead, using component method `share`:
```html
```
### Events
List of available events to use in component:
Event | Passes | Description
--------------------- | ----------------------------------------------- | -----------
`social_shares_click` | `network`: Selected network. `url`: shared url. | Triggered when a share network is clicked.
Usage example:
```javascript
new Vue({
el: '#app',
events: {
'social_shares_click': function(network, url) {
// TODO my code here
}
},
});
```
### Networks supported
List of available networks to use in component:
Network | Child component or key
-------------- | -----------------------
Facebook | `facebook`
Twitter | `twitter`
Google + | `googleplus`
Pinterest | `pinterest`
Reddit | `reddit`
LinkedIn | `linkedin`
Whatsapp | `whatsapp` (mobile only)
## License
Copyright (c) 2016 [10Quality](http://www.10quality.com/). Under MIT License.