# vue-share-it

> A Vue.js component for sharing links to social networks

Latest version **1.2.0** (published 2025-05-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-share-it
pnpm add vue-share-it
yarn add vue-share-it
bun add vue-share-it
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2025-05-27 |
| First published | 2019-10-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 219.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 21 |
| Author | Hemant Rai |
| Maintainers | hemantisme |
| Keywords | vue, vuejs, plugin, social, share, buttons |

## Links

- npm: https://www.npmjs.com/package/vue-share-it
- Repository: https://github.com/thisDOTname/vue-share-it
- Homepage: https://github.com/thisDOTname/vue-share-it#readme
- Issues: https://github.com/thisDOTname/vue-share-it/issues
- npm.io page: https://npm.io/package/vue-share-it

## Dependencies (4)

- [@fortawesome/vue-fontawesome](https://npm.io/package/@fortawesome/vue-fontawesome.md) ^0.1.7
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^1.2.22
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^5.10.2
- [@fortawesome/free-brands-svg-icons](https://npm.io/package/@fortawesome/free-brands-svg-icons.md) ^6.7.2

## Recent versions

- 1.2.0 (latest) — 2025-05-27
- 1.1.8 — 2023-08-30
- 1.1.7 — 2023-01-09
- 1.1.6 — 2021-09-09
- 1.1.5 — 2021-08-18
- 1.1.4 — 2021-06-21
- 1.1.3 — 2020-11-02
- 1.1.2 — 2020-09-27
- 1.1.1 — 2020-01-08
- 1.1.0 — 2020-01-08
- 1.0.14 — 2019-11-21
- 1.0.13 — 2019-11-15
- 1.0.12 — 2019-10-08
- 1.0.11 — 2019-10-08
- 1.0.10 — 2019-10-07
- … 9 more at https://npm.io/package/vue-share-it/versions

## README

![Release](https://img.shields.io/npm/v/vue-share-it)
![Vue.js](https://img.shields.io/badge/vue-2.x-brightgreen)
![License](https://img.shields.io/npm/l/vue-share-it)

# vue-share-it
> A highly customizable Vue.js component for sharing links on social networks.

## Features

* Easy install
* Highly customizable
* Extensive documentation & examples
* Developer support
* SEO friendly

## Examples
[Live demo](https://codesandbox.io/s/vue-share-it-examples-hsmp4)

[Docs](https://thisdotname.github.io/vue-share-it/)

## Installation

```sh
# Yarn 
yarn add vue-share-it

# NPM 
npm install vue-share-it --save
```

## Usage

**Browserify / Webpack**

```javascript
import shareIt from 'vue-share-it';

Vue.use(shareIt);
```

**HTML**

```html
<script src="https://unpkg.com/vue-share-it@x.x.x/dist/vue-share-it.js"></script>
```

## Supported social-media platforms

|  Platform  |  Value   |
|:----------:|:---------|
| Twitter    | twitter  |
| LinkedIn   | linkedin |
| Facebook   | facebook |
| Whatsapp   | whatsapp |
| Reddit     | reddit   |
|            |          |


## API

**Props**

| Prop         | Data type | Default   | Description   |
|:------------:|:---------:|:---------:|:-------------:|
| text         | String    | ''        | Caption       |
| url          | String    | ''        | URL to share  |
| width        | Number    | 600       | Width of the share window      |
| height       | Number    | 600       | Height of the share window |
| dense        | Boolean   | false     | Dense button styling      |
| dark         | Boolean   | false     | Dark button styling      |
| targets      | Array     | []        | Specify social media targets, defaults to all available targets |
| icons        | Boolean   | false     | Use icons as buttons      |
| outline      | Boolean   | false     | Outline button styling |
| round        | Boolean   | false     | Round button styling for icons      |
| iconSize     | String    | lg        | Specify icon size. See [size chart](#sizeChart) below      |
| shareConfig  | Object    | {<br>linkedin: {},<br>twitter: {},<br>facebook: {},<br>whatsapp: {},<br>reddit: {},<br>} | Advanced configuration for target specific styling      |
|              |           |           |               |


**Events**

|    Name   |    Description                                            |    Value    |
|:---------:|:---------------------------------------------------------:|:------------|
| clicked   | Event that is emitted when a share button is clicked      | Returns social media platform which was clicked. E.g. ["twitter"] |
|           |                                                           |             |

**Slots**

|    Name              |    Description                  |
|:--------------------:|:-------------------------------:|
| `${platform}-icon`   |  Custom icon for platform       |
| `${platform}-label`  |  Custom label for platform      |
|                      |                                 |



## Examples

**Using vue-share-it component**

**Default**

```html
<share-it />
```
---
**Global configs**
```html
<share-it text="This is sample text" url="https://www.google.com" :height="600" :width="600" />
```
---
**Targets**
```html
<share-it :targets="['twitter', 'facebook']" />
```
---
**Dark**
```html
<share-it dark />
```
---
**Dense**
```html
<share-it dense />
```
---
**Outlined**
```html
<share-it outline />
```
---
**Button configs**
```javascript
const share = {
  twitter: {
    size: "2x",
    label: "Custom label!",
    round: true,
  },
  linkedin: {
    size: "2x",
    color: "#333",
    backgroundColor: "yellow",
  },
  facebook: {
    size: "3x",
    dark: true
  },
  whatsapp: {
    size: "2x",
    dense: true,
    outline: true,
    color: 'green',
  },
}
```
```html
<share-it :shareConfig="share" />
```
---
**Icons**
```html
<share-it icons />
```
---
**Outlined icons**
```html
<share-it icons outline />
```
---
**Rounded icons**
```html
<share-it icons outline round />
```
---
**Icon configs**
```javascript
const iconConfig ={
  twitter: {
    icon: true,
    size: "sm",
    color: "#333",
    round: true,
    backgroundColor: 'yellow'
  },
  linkedin: {
    icon: true,
    size: "lg",
    outline: true,
    round: true,
    
  },
  facebook: {
    icon: true,
    size: "2x",
    outline: true,
    round: true
  },
  whatsapp: {
    icon: true,
    size: "3x",
    outline: true,
    round: true
  },
  reddit: {
    icon: true,
    size: "4x",
    outline: true,
    round: true
  },
}
```
```html
<share-it :shareConfig="iconConfig" />
```
---
**Using slots**
```html
<share-it>
  <template v-slot:twitter-icon>
    <v-icon>mdi-twitter</v-icon>
  </template>
  <template v-slot:twitter-label>
    <em>Tweet it!</em>
  </template>
  <template v-slot:whatsapp-icon>
    <v-icon>mdi-whatsapp</v-icon>
  </template>
  <template v-slot:whatsapp-label>
    <em>Share on Whatsapp</em>
  </template>
</share-it>
```

<a name="sizeChart">
</a>

**Size chart**

|    Code   |    Size    |
|:---------:|:----------:|
| xs        | .75em      |
| sm        | .875em     |
| lg        | 1.33em     |
| 2x        | 2em        |
| 3x        | 3em        |
| 4x        | 4em        |
| 5x        | 5em        |
| 6x        | 6em        |
| 7x        | 7em        |
| 8x        | 8em        |
| 9x        | 9em        |
| 10x       | 10em       |
|           |            |

---
_Source: https://npm.io/package/vue-share-it · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._