Skip to content

🍿 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.

License

Notifications You must be signed in to change notification settings

gen4sp/vue-goodshare-with-events

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

68 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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)

About

🍿 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.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Vue 99.1%
  • JavaScript 0.9%