npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-share-buttons

v1.1.1

Published

A set of social buttons for Vue.js

Downloads

418

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

alexandrshyalexandrshy

Keywords

vue2vuejs2vue-componentsshareshare-linkshare-buttonssocial-buttons

Readme

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
    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 />

Live Demo

<facebook-button class="share-button--outline" hasCounter />

Live Demo

<facebook-button
  class="share-button--painted"
  url="https://github.com/"
  hasCounter
/>

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)