GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → Alexandrshy → Vue Share Buttons

Alexandrshy / Vue Share Buttons

Licence: mit
🔗A set of social buttons for Vue.js

Labels

vuevuejscomponentvuejs2vue2vue-componentsshare

Projects that are alternatives of or similar to Vue Share Buttons

Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (+644.12%)
Mutual labels:  component, vue-components, vuejs2, vue2
V Bar
The virtual responsive crossbrowser scrollbar component for VueJS 2x
Stars: ✭ 216 (+535.29%)
Mutual labels:  component, vue-components, vuejs2, vue2
Vuesax
New Framework Components for Vue.js 2
Stars: ✭ 5,293 (+15467.65%)
Mutual labels:  component, vue-components, vuejs2, vue2
Vue Snotify
Vuejs 2 Notification Center
Stars: ✭ 755 (+2120.59%)
Mutual labels:  vue-components, vuejs2, vue2
Semantic Ui Vue
Semantic UI integration for Vue
Stars: ✭ 914 (+2588.24%)
Mutual labels:  vue-components, vuejs2, vue2
Vuejs Component Style Guide
Vue.js Component Style Guide
Stars: ✭ 2,796 (+8123.53%)
Mutual labels:  vue-components, vuejs2, vue2
Vue Marquee Text Component
[CSS GPU Animation] Marquee Text for vuejs
Stars: ✭ 226 (+564.71%)
Mutual labels:  component, vuejs2, vue2
Quasar
Quasar Framework - Build high-performance VueJS user interfaces in record time
Stars: ✭ 20,090 (+58988.24%)
Mutual labels:  vue-components, vuejs2, vue2
Mui Vue2
mui+mint+vue2.x+vue-router+vuex+webpack最终打包成原生apk的app项目,样式使用vue移动端mint ui框架，原生手机能力偏重于mui框架，欢迎star！
Stars: ✭ 278 (+717.65%)
Mutual labels:  vue-components, vuejs2, vue2
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.
Stars: ✭ 345 (+914.71%)
Mutual labels:  share, vue-components, vuejs2
Vue Touch Ripple
👆 Touch ripple component for @vuejs
Stars: ✭ 443 (+1202.94%)
Mutual labels:  vue-components, vuejs2, vue2
Tui
This is a high quanlity components library for VUE
Stars: ✭ 258 (+658.82%)
Mutual labels:  vue-components, vuejs2, vue2
vue-notification-bell
Vue.js notification bell component.
Stars: ✭ 64 (+88.24%)
Mutual labels:  vuejs2, vue-components, vue2
Vue Quill Editor
🍡@quilljs editor component for @vuejs
Stars: ✭ 6,874 (+20117.65%)
Mutual labels:  vue-components, vuejs2, vue2
Vue Gl
Vue.js components rendering 3D WebGL graphics reactively with three.js
Stars: ✭ 434 (+1176.47%)
Mutual labels:  vue-components, vuejs2, vue2
Fish Ui
A Vue.js 2.0 UI Toolkit for Web
Stars: ✭ 861 (+2432.35%)
Mutual labels:  component, vue-components, vue2
Vue Cnodejs
基于vue.js重写Cnodejs.org社区的webapp
Stars: ✭ 3,065 (+8914.71%)
Mutual labels:  vue-components, vuejs2, vue2
Vue Info Card
Simple and beautiful card component with an elegant spark line, for VueJS.
Stars: ✭ 159 (+367.65%)
Mutual labels:  component, vue-components, vuejs2
Vue Video Player
🎞 @videojs component for @vuejs
Stars: ✭ 4,026 (+11741.18%)
Mutual labels:  vue-components, vuejs2, vue2
Vue Swatches
🎨 Help the user picking beautiful colors!
Stars: ✭ 456 (+1241.18%)
Mutual labels:  component, vue-components, vuejs2
View All Similar Projects ➔

vue-share-buttons

Vue component for placing buttons in your project using which you can share anything. If vue-share-buttons doesn't have a social network for you, just make a Pull request or create new issue for me

Menu

Installation

Install using npm

npm i vue-share-buttons

Link to NPM

Install using Yarn

yarn add vue-share-buttons

Link to Yarn

Icons

For icons, I use simpleicons

Usage

You need to import each social button separately. For example, you want to use the share button on Twitter. To do this you need:

Import component

import TwitterButton from "vue-share-buttons/src/components/TwitterButton";

const app = new Vue({
  el: "#app",
  components: {
    TwitterButton,
  },
});

Add the button to your template

<div id="app">
  <twitter-button
    shareUrl="https://github.com/"
    shareDescription="GitHub is where people build software."
  />
</div>

And we get the button

vue-share-buttons-twitter

Options

Below are the options you can pass to create your own button.

Buttons with a counter

Facebook, LinkedIn, Odnoklassniki

Option Type's Default Description
url String document.location.href URL-address you want to share
description String document.title Messages you want to share
btnText String Facebook, LinkedIn, Odnoklassniki, etc. Text to be written on your button
hasIcon Boolean true Presence of social network icon in the button
isBlank Boolean true Open the "share on social networks" frame in a new window
modalWidth Number 500 If the property "isBlank" is set to false, you can set the width of the modal window the "share on social networks"
modalHeight Number 500 If the property "isBlank" is set to false, you can set the height of the modal window the "share on social networks"
hasCounter Boolean false Presence of a counter with the number of share
digitsCounter Number 0 The number of decimal places in the counter
keyCounter String '' Counter ID (note, it must be unique if you use several buttons with a counter for the same social network on the same page)

Tumblr, Vkontakte

Option Type's Default Description
url String document.location.href URL-address you want to share
description String document.title Messages you want to share
title String '' Title you want to share
btnText String Tumblr, Vkontakte Text to be written on your button
hasIcon Boolean true Presence of social network icon in the button
isBlank Boolean true Open the "share on social networks" frame in a new window
modalWidth Number 500 If the property "isBlank" is set to false, you can set the width of the modal window the "share on social networks"
modalHeight Number 500 If the property "isBlank" is set to false, you can set the height of the modal window the "share on social networks"
hasCounter Boolean false Presence of a counter with the number of share
digitsCounter Number 0 The number of decimal places in the counter
keyCounter String '' Counter ID (note, it must be unique if you use several buttons with a counter for the same social network on the same page)

Pinterest

Option Type's Default Description
url String document.location.href URL-address you want to share
description String document.title Messages you want to share
picture String '' Picture you want to share
btnText String Pinterest Text to be written on your button
hasIcon Boolean true Presence of social network icon in the button
isBlank Boolean true Open the "share on social networks" frame in a new window
modalWidth Number 500 If the property "isBlank" is set to false, you can set the width of the modal window the "share on social networks"
modalHeight Number 500 If the property "isBlank" is set to false, you can set the height of the modal window the "share on social networks"
hasCounter Boolean false Presence of a counter with the number of share
digitsCounter Number 0 The number of decimal places in the counter
keyCounter String '' Counter ID (note, it must be unique if you use several buttons with a counter for the same social network on the same page)

Buttons without a counter

Twitter, Evernote, Hatena, Instapaper, LiveJournal

Option Type's Default Description
url String document.location.href URL-address you want to share
description String document.title Messages you want to share
btnText String Twitter, Evernote, Hatena, Instapaper, LiveJournal Text to be written on your button
hasIcon Boolean true Presence of social network icon in the button
isBlank Boolean true Open the "share on social networks" frame in a new window
modalWidth Number 500 If the property "isBlank" is set to false, you can set the width of the modal window the "share on social networks"
modalHeight Number 500 If the property "isBlank" is set to false, you can set the height of the modal window the "share on social networks"

Digg, Xing, Pocket

Option Type's Default Description
url String document.location.href URL-address you want to share
btnText String Digg, Xing, Pocket Text to be written on your button
hasIcon Boolean true Presence of social network icon in the button
isBlank Boolean true Open the "share on social networks" frame in a new window
modalWidth Number 500 If the property "isBlank" is set to false, you can set the width of the modal window the "share on social networks"
modalHeight Number 500 If the property "isBlank" is set to false, you can set the height of the modal window the "share on social networks"

Blogger

Option Type's Default Description
url String document.location.href URL-address you want to share
description String document.title Messages you want to share
title String '' Title you want to share
btnText String Blogger Text to be written on your button
hasIcon Boolean true Presence of social network icon in the button
isBlank Boolean true Open the "share on social networks" frame in a new window
modalWidth Number 500 If the property "isBlank" is set to false, you can set the width of the modal window the "share on social networks"
modalHeight Number 500 If the property "isBlank" is set to false, you can set the height of the modal window the "share on social networks"

Reddit, Renren

Option Type's Default Description
url String document.location.href URL-address you want to share
title String '' Title you want to share
btnText String Reddit, Renren Text to be written on your button
hasIcon Boolean true Presence of social network icon in the button
isBlank Boolean true Open the "share on social networks" frame in a new window
modalWidth Number 500 If the property "isBlank" is set to false, you can set the width of the modal window the "share on social networks"
modalHeight Number 500 If the property "isBlank" is set to false, you can set the height of the modal window the "share on social networks"

Weibo

Option Type's Default Description
url String document.location.href URL-address you want to share
description String document.title Messages you want to share
picture String '' Picture you want to share
title String '' Title you want to share
btnText String Weibo Text to be written on your button
hasIcon Boolean true Presence of social network icon in the button
isBlank Boolean true Open the "share on social networks" frame in a new window
modalWidth Number 500 If the property "isBlank" is set to false, you can set the width of the modal window the "share on social networks"
modalHeight Number 500 If the property "isBlank" is set to false, you can set the height of the modal window the "share on social networks"

Buttons for instant messengers

Facebook

Option Type's Default Description
appID String '' A unique identifier for the application
url String document.location.href URL-address you want to share
btnText String Facebook Text to be written on your button
hasIcon Boolean true Presence of social network icon in the button

Viber, WhatsApp

Option Type's Default Description
url String document.location.href URL-address you want to share
btnText String Viber, WhatsApp Text to be written on your button
hasIcon Boolean true Presence of social network icon in the button

Telegram

Option Type's Default Description
url String document.location.href URL-address you want to share
description String document.title Messages you want to share
btnText String Telegram Text to be written on your button
hasIcon Boolean true Presence of social network icon in the button

Send a message via email

This isn't really a share button, this is a button that allows you to open the software to send an email message, but it may be useful for you 🙃

Option Type's Default Description
url String document.location.href URL-address you want to share
btnText String Email Text to be written on your button
hasIcon Boolean true Presence of social network icon in the button

Full list of social networks

  • Blogger
  • Digg
  • Evernote
  • Facebook
  • Hatena
  • Instapaper
  • LinkedIn
  • LiveJournal
  • Odnoklassniki
  • Pinterest
  • Pocket
  • Reddit
  • Renren
  • Tumblr
  • Twitter
  • Vkontakte
  • Weibo
  • Xing
  • Telegram
  • Viber
  • WhatsApp

Example

<twitter-button v-bind:isBlank="false" btnText />
Twitter button with icon

Live Demo

<twitter-button class="share-button--circle" v-bind:hasIcon="false" />
Twitter circle button

Live Demo

<twitter-button v-bind:hasIcon="false" class="share-button--outline">
  /></twitter-button
>
Twitter outline button without icon

Live Demo

<twitter-button class="share-button--circle share-button--outline" btnText />
Twitter outline and circle button with icon

Live Demo

<facebook-button class="share-button--outline" hasCounter />
Twitter outline button with icon and counter

Live Demo

<facebook-button
  class="share-button--painted"
  url="https://github.com/"
  hasCounter
/>
Twitter painted button with icon and counter

Live Demo

Author

This component was developed by Alexander Shulaev for personal purposes and submitted to Open Source, if it will help someone I will be very happy about it😊

Link

SVG-icon by Simple Icons

Roadmap

  • Implement a workflow with automatic version update and automatic publication of changes in npm via GitHub action

License

The MIT License (MIT)

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].