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.
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!
- 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
$ npm install vue-goodshare --save
Init vue-goodshare
component after Vue.js in your main JavaScript file. There is two way to do this.
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:
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:
- 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
Development and maintenance engaged by Vic Shóstak (aka Koddr).
If you want to say «thank you» and/or ask me about vue-goodshare
— create new issue.