Vue Social Sharing
A Vue.js component for sharing links on major social networks. Less than 2kb gzipped.
For Vue.js prior to < V2 use vue-social-sharing v0.x
For SSR and Vue.js 2 support use vue-social-sharing v2.x
Demo
Installation
# Yarn yarn add vue-social-sharing # NPM npm install --save vue-social-sharing # Bower bower install vue-social-sharing
Usage
Loading the library
Browserify / Webpack
var SocialSharing = ; Vue;
HTML
Using the social sharing component
Email Facebook Google + Line LinkedIn Odnoklassniki Pinterest Reddit Skype SMS Telegram Twitter VKontakte Weibo Whatsapp
Available properties
List of available props to use in the component:
Prop | Data Type | Default | Description |
---|---|---|---|
url |
String | current | URL to share. |
title |
String | Sharing title (when available). | |
description |
String | Sharing description (when available). | |
quote |
String | Facebook quote (Facebook only). | |
hashtags |
String | A list of comma-separated hashtags (Twitter and Facebook). | |
twitter-user |
String | Twitter user (Twitter only). | |
media |
String | Url to a media (Pinterest only). | |
network-tag |
String | "span" | Tag the network component should render. |
Available events
Events are emitted on the vue $root instance:
Name | Data | Description |
---|---|---|
social_shares_open |
Network object, shared url | Fired when a sharing popup is open |
social_shares_change |
Network object, shared url | Fired when the user open a new sharing popup while another is already open |
social_shares_close |
Network object, shared url | Fired when a sharing popup is closed or changed by another popup |
You can listen to a vue-social-sharing
$root event by using the following code:
Vue$root;
And on the Local Vue-social-sharing instance:
Name | Data | Description |
---|---|---|
open |
Network object, shared url | Fired when a sharing popup is open |
change |
Network object, shared url | Fired when the user open a new sharing popup while another is already open |
close |
Network object, shared url | Fired when a sharing popup is closed or changed by another popup |
You can listen to a vue-social-sharing
local event by using the following code:
Note that the
social_shares_close
event is not fired for the Whatsapp, SMS and Email sharers.
Extending the network list
Since version 2.3.1
you can extend and override the list of available networks by passing the additional networks as attribute. You can see a working example of the feature in the examples/vue2-example.html
file:
Custom network
There are two available network types:
Type | Effect |
---|---|
popup |
Open the sharing link in a new popup |
direct |
Open directly the sharing link (suitable for mobile apps sharing, emails, sms, ...) |
Feature request
Feel free to open an issue to ask for a new social network support.
Changelog
Details changes for each release are documented in the CHANGELOG.md.
Issues
Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.
Contribution
Please make sure to read the Contributing Guide before making a pull request.