🍿 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.
Switch branches/tags
Clone or download
Latest commit a702476 Sep 5, 2018

README.md

vue-goodshare logo

vue-goodshare

npm version vue js site license

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.

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!

Full Documentation

Requirements

  • Vue.js >= 2.5.x
  • vue-style-loader >= 3.1.x
  • css-loader >= 0.28.x
  • sass-loader >= 6.0.x
  • node-sass >= 4.9.x

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:

screen shot

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>

And result is:

screen shot

Live demo & Testing on localhost

  • Clone repository from GitHub:
$ git clone https://github.com/koddr/vue-goodshare.git
  • Go to examples folder:
$ cd vue-goodshare/examples
  • Start simple Python 3.4+ HTTP server (only macOS and Linux):
$ python3 -m http.server 4000 --bind localhost

Author & maintainers

Development and maintenance engaged by Vic Shóstak (aka Koddr). If you want to say «thank you» and/or ask me about vue-goodsharecreate new issue.


Your assistance will help make project even better!

Thanks for supporting!


License

The MIT License (MIT)