A Vue.js component for sharing links to social networks

vue-social-sharing

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

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/"
                      title="The Progressive JavaScript Framework"
                      description="Intuitive, Fast and Composable MVVM for building interactive interfaces."
                      quote="Vue is a progressive framework for building user interfaces."
                      hashtags="vuejs,javascript,framework"
                      twitter-user="vuejs"
                      inline-template>
  <div>
      <network network="email">
          <i class="fa fa-envelope"></i> Email
      </network>
      <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="line">
        <i class="fa fa-line"></i> Line
      </network>
      <network network="linkedin">
        <i class="fa fa-linkedin"></i> LinkedIn
      </network>
      <network network="odnoklassniki">
        <i class="fa fa-odnoklassniki"></i> Odnoklassniki
      </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="skype">
        <i class="fa fa-skype"></i> Skype
      </network>
      <network network="sms">
        <i class="fa fa-commenting-o"></i> SMS
      </network>
      <network network="telegram">
        <i class="fa fa-telegram"></i> Telegram
      </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:

Available events

Events are emitted on the vue $root instance:

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

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

And on the Local Vue-social-sharing instance:

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

<some-component>
    <social-sharing @open="open()" @change="change()" @close="close()">
    </social-sharing>
</some-component>

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. You can see a working example of the feature in the examples/vue2-example.html file:

<social-sharing ...:networks="overriddenNetworks" inline-template>
    <div>
        <network network="custom">
            Custom network
        </network>
    </div>
</social-sharing>

<script>
    ...
    
    new Vue({
      data: {
        overriddenNetworks: {
          "custom": {
            "sharer": "https://mycustomdomain.com",
            "type": "popup"
          },
        }
      }
    });
</script>

There are two available network types:

GitHub