Social Shares Component (for Vue)
Social network sharing component for Vue Js.
Several installation options are available:
- Download the latest release.
- Install with Bower:
bower install vue-social-shares.
Add the following resources for the component to function correctly.
<!-- Required Javascript -->
<script src="vue.js"></script>
<script src="[component path]/dist/vue.social-shares.min.js"></script>Add the component in your vue view.
<!-- Assuming your view app is APP. -->
<body id="app">
<social-shares inline-template>
<facebook>
Share in facebook
</facebook>
<whatsapp>
Share in whatsapp
</whatsapp>
</social-shares>
</body>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:
<body id="app">
<social-shares inline-template
:url.sync="url"
twitter-user="10quality"
>
<facebook>
<i class="fa fa-facebook"></i>
</facebook>
<twitter>
<i class="fa fa-twitter"></i>
</twitter>
</social-shares>
</body>new Vue({
el: '#app',
data: {url:undefined},
});Instead of using child components to enable share functionality:
<body id="app">
<social-shares inline-template>
<facebook>
Share in facebook
</facebook>
</social-shares>
</body>Click event binding can be applied instead, using component method share:
<body id="app">
<social-shares inline-template>
<a title="Share in facebook"
@click="share('facebook')"
>
Share in facebook
</a>
</social-shares>
</body>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:
new Vue({
el: '#app',
events: {
'social_shares_click': function(network, url) {
// TODO my code here
}
},
});List of available networks to use in component:
| Network | Child component or key |
|---|---|
facebook |
|
twitter |
|
| Google + | googleplus |
pinterest |
|
reddit |
|
linkedin |
|
whatsapp (mobile only) |
Copyright (c) 2016 10Quality. Under MIT License.