vue-share-buttons

A set of social buttons for Vue.js

3,427 52

vue-components vue2 vuejs2 share share-link share-buttons social-buttons

Install
`npm install vue-share-buttons`
Latest Version:	1.1.1 (Jan 31, 2022)
Vue:	2
License:	MIT
Last Updated:	Aug 4, 2022
Links:	GitHub · npm

Maintainer: alexandrshy

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

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
    url="https://github.com/"
    description="GitHub is where people build software."
  />
</div>

And we get the button

Options

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

Buttons with a counter

Facebook, LinkedIn

Option	Type's	Default	Description
url	String	`document.location.href`	URL-address you want to share
btnText	String	`Facebook`, `LinkedIn`, 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)
customIcon	String	`''`	Custom imag

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	`Odnoklassniki`	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
customIcon	String	`''`	Custom image
sharePic	String	`''`	Link to image instead of favicon

Tumblr

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)
customIcon	String	`''`	Custom image

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
sharePic	String	`''`	Link to image instead of favicon
customIcon	String	`''`	Custom image

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)
customIcon	String	`''`	Custom image

Buttons without a counter

Twitter, 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`, `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"
customIcon	String	`''`	Custom image

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"
customIcon	String	`''`	Custom image

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"
customIcon	String	`''`	Custom image

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"
customIcon	String	`''`	Custom image

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"
customIcon	String	`''`	Custom image

Buttons for instant messengers

Facebook Messenger

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
customIcon	String	`''`	Custom image

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
customIcon	String	`''`	Custom image

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
customIcon	String	`''`	Custom image

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
subject	String	`document.title`	Email subject
customIcon	String	`''`	Custom image

Full list of social networks

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

Not worked

Facebook counter
LinkedIn counter

Example

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

Live Demo

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

Live Demo

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

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)

Related Packages

vuejs-countdown-timer

Vue 2 countdown and timer component

53,691 48

vue2 vuejs2 countdown-timer vue-component

vue-label-edit

Click to show input text box Vue Component ... inspired by Trello (Originally de...

1,764 0

vue-components vuejs2 vue vuejs

label-edit

Click to show input text box Vue Component ... inspired by Trello

1,684 22

vue-components vuejs2 vue vuejs

vuejs-scroll-fixed-header

Vue2 scroll fixed header component

18,285 4

vue2 vuejs2 fixed-header scroll-fixed-header vue-component

vue-simple-addthis-share

Simple AddThis share component for Vue.js

10,920 12

share vuejs2 addthis nuxt vue vuejs

Version History

Version	Released	Vue	License
1.1.1	Jan 31, 2022	^2.6.14	MIT
1.1.0	Jun 28, 2020	^2.6.6	MIT
1.0.8	Jun 28, 2020	^2.6.6	MIT
1.0.7	Jun 28, 2020	^2.6.6	MIT
1.0.6	Apr 9, 2019	^2.6.6	MIT
1.0.5	Apr 7, 2019	^2.6.6	MIT
1.0.4	Apr 7, 2019	^2.6.6	MIT
1.0.3	Apr 7, 2019	^2.6.6	MIT
1.0.2	Apr 6, 2019	^2.6.6	MIT
1.0.1	Apr 6, 2019	^2.6.6	MIT
1.0.0	Apr 5, 2019	^2.6.6	MIT
0.1.7	Apr 3, 2019	^2.6.6	MIT
0.1.6	Apr 1, 2019	^2.6.6	MIT
0.1.5	Apr 1, 2019	^2.6.6	MIT
0.1.0	Mar 31, 2019	^2.6.6

vue-share-buttons

vue-share-buttons

Menu

Installation

Install using npm

Install using Yarn

Icons

Usage

Import component

Add the button to your template

And we get the button

Options

Buttons with a counter

Buttons without a counter

Buttons for instant messengers

Send a message via email

Full list of social networks

Not worked

Example

Author

Link

Roadmap

License

Related Packages

Version History