2.3.4 • Published 7 years ago

@mrborek/vue-social-sharing v2.3.4

Weekly downloads
1
License
MIT
Repository
github
Last release
7 years ago

vue-social-sharing


Release Build Status Coverage Status Downloads License vue1 vue2

A Vue.js component for sharing links to social networks

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 = require('vue-social-sharing');

Vue.use(SocialSharing);
HTML
<script src="/dist/vue-social-sharing.min.js"></script>

Using the social sharing component

<social-sharing url="https://vuejs.org/" inline-template>
  <div>
      <network network="facebook">
        <i class="fa fa-facebook"></i> Facebook
      </network>
      <network network="googleplus">
        <i class="fa fa-google-plus"></i> Google +
      </network>
      <network network="linkedin">
        <i class="fa fa-linkedin"></i> LinkedIn
      </network>
      <network network="pinterest">
        <i class="fa fa-pinterest"></i> Pinterest
      </network>
      <network network="reddit">
        <i class="fa fa-reddit"></i> Reddit
      </network>
      <network network="twitter">
        <i class="fa fa-twitter"></i> Twitter
      </network>
      <network network="vk">
        <i class="fa fa-vk"></i> VKontakte
      </network>
      <network network="weibo">
        <i class="fa fa-weibo"></i> Weibo
      </network> 
      <network network="whatsapp">
        <i class="fa fa-whatsapp"></i> Whatsapp
      </network>
  </div>
</social-sharing>

Available properties

List of available props to use in the component:

PropData TypeDefaultDescription
urlFunctioncurrentURL to share.
titleStringSharing title (when available).
descriptionStringSharing description (when available).
quoteStringFacebook quote (Facebook only).
hashtagsStringA list of comma-separated hashtags (Twitter only).
twitter-userStringTwitter user (Twitter only).
mediaStringUrl to a media (Pinterest only).

Available events

Events are emitted on the vue $root instance:

NameDataDescription
social_shares_openNetwork object, shared urlFired when a sharing popup is open
social_shares_changeNetwork object, shared urlFired when the user open a new sharing popup while another is already open
social_shares_closeNetwork object, shared urlFired when a sharing popup is closed or changed by another popup

You can listen to a vue-social-sharing event by using the following code:

Vue.$root.$on('social_shares_open', function (network, url) {
  // your event code
});

Note that the social_shares_close event is not fired for Whatsapp.

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.

License

MIT