🍿 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.
Branch: master
Clone or download
Latest commit a702476 Sep 5, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Add issue template Nov 7, 2017
docs Add Email share support Sep 5, 2018
examples Update dependencies Nov 7, 2017
src Add Email share support Sep 5, 2018
.editorconfig Update docs, add .editorconfig Oct 29, 2017
.gitignore Update dependencies, push to npm Dec 5, 2017
LICENSE Add VK and FB providers, improve docs Oct 29, 2017
README.md Update README.md Aug 28, 2018
package-lock.json Add Prettier to code, Update dependencies Aug 28, 2018
package.json

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)