Vue.js component for social share

vue-goodshare

Vue.js component for social share. A simple way to share a link on the pages of your website in the most popular (and not so) social networks. Powered by goodshare.js project.

View demo Download Source

Features

Simple install, extensive documentation, developer support, SEO friendly, many options for customization of appearance, clean code without scripts tracking user activity on the page, high speed.

Beautiful button design already included. Just choose one, add attribute to component and save!

Requirements

Vue.js >= 2.4.0
vue-style-loader >= 3.0.0
css-loader >= 0.28.0
sass-loader >= 6.0.0
node-sass >= 4.6.0

Install component

$ npm install vue-goodshare --save

Usage

Init vue-goodshare component after Vue.js in your main JavaScript file. There is two way to do this.

Single share element

Includes only needed social networks and/or mobile messengers.

// ./src/js/script.js

import Vue from 'vue'

// Import vue-goodshare single elements
import VueGoodshareFacebook from 'vue-goodshare/src/providers/Facebook.vue'

const app = new Vue({
  el: '#app',
  components: {
    VueGoodshareFacebook
  }
})

Add components to HTML template (with attributes):

<!-- ./index.html -->

<div id="app">

  <vue-goodshare-facebook 
    page_url="https://github.com" 
    title_social="Facebook"
    has_counter
    has_icon 
  ></vue-goodshare-facebook>
  
</div>

And result is:

Bundle of share elements

Facebook, Twitter, LinkedIn, Google Plus, Tumblr, Pinterest, Reddit

// ./src/js/script.js

import Vue from 'vue'

// Import vue-goodshare bundle
import VueGoodshare from 'vue-goodshare'

const app = new Vue({
  el: '#app',
  components: {
    VueGoodshare
  }
})

Add component to HTML template (without attributes):

<!-- ./index.html -->

<div id="app">

  <vue-goodshare></vue-goodshare>

</div>