Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thisDOTname/vue-share-it
A Vue.js component for sharing links to social networks
https://github.com/thisDOTname/vue-share-it
social-buttons vue-component vuejs
Last synced: about 1 month ago
JSON representation
A Vue.js component for sharing links to social networks
- Host: GitHub
- URL: https://github.com/thisDOTname/vue-share-it
- Owner: thisDOTname
- License: mit
- Created: 2019-09-05T09:42:44.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T09:23:59.000Z (about 1 year ago)
- Last Synced: 2024-03-24T23:00:23.752Z (about 2 months ago)
- Topics: social-buttons, vue-component, vuejs
- Language: Vue
- Homepage: https://thisdotname.github.io/vue-share-it/
- Size: 2.49 MB
- Stars: 22
- Watchers: 3
- Forks: 10
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-vue - vue-share-it - A Vue.js component for sharing links to social networks (Components & Libraries / UI Components)
- awesome-vue - vue-share-it - A Vue.js component for sharing links to social networks (Components & Libraries / UI Components)
- awesome-vue - vue-share-it - A Vue.js component for sharing links to social networks (Components & Libraries / UI Components)
- awesome-vue - vue-share-it - A Vue.js component for sharing links to social networks (Components & Libraries / UI Components)
- awesome-vue - vue-share-it - A Vue.js component for sharing links to social networks (Components & Libraries / UI Components)
- awesome-vue - vue-share-it - A Vue.js component for sharing links to social networks (Components & Libraries / UI Components)
- awesome-vue - vue-share-it - A Vue.js component for sharing links to social networks (Components & Libraries / UI Components)
- awesome-vue - vue-share-it - A Vue.js component for sharing links to social networks (Components & Libraries / UI Components)
- awesome-vue - vue-share-it - A Vue.js component for sharing links to social networks (Components & Libraries / UI Components)
- awesome-vue - vue-share-it - A Vue.js component for sharing links to social networks (Components & Libraries / UI Components)
README
# 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
```
## 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 | {
linkedin: {},
twitter: {},
facebook: {},
whatsapp: {},
reddit: {},
} | 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
```
---
**Global configs**
```html
```
---
**Targets**
```html
```
---
**Dark**
```html
```
---
**Dense**
```html
```
---
**Outlined**
```html
```
---
**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
```
---
**Icons**
```html
```
---
**Outlined icons**
```html
```
---
**Rounded icons**
```html
```
---
**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
```
---
**Using slots**
```html
mdi-twitter
Tweet it!
mdi-whatsapp
Share on Whatsapp
```
**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 |
| | |