BETA
Sort by:
Sorting

All pages will be filtered by your selected preferences

Buy us a coffeePsst! We're working to help you locate only the best packages and tools. If you think we're doing a good job, buy us a coffee :)
Buy us a coffeePsst! We're working to help you locate only the best packages and tools. If you think we're doing a good job, buy us a coffee :)

vue-share-it

A Vue.js component for sharing links to social networks


18
9
2 months ago
259

Release Vue.js License

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

Docs

Installation

# Yarn 
yarn add vue-share-it

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

Usage

Browserify / Webpack

import shareIt from 'vue-share-it';

Vue.use(shareIt);

HTML

<script src="https://unpkg.com/[email protected]/dist/vue-share-it.js"></script>

Supported social-media platforms

PlatformValue
Twittertwitter
LinkedInlinkedin
Facebookfacebook
Whatsappwhatsapp
Redditreddit

API

Props

PropData typeDefaultDescription
textString''Caption
urlString''URL to share
widthNumber600Width of the share window
heightNumber600Height of the share window
denseBooleanfalseDense button styling
darkBooleanfalseDark button styling
targetsArray[]Specify social media targets, defaults to all available targets
iconsBooleanfalseUse icons as buttons
outlineBooleanfalseOutline button styling
roundBooleanfalseRound button styling for icons
iconSizeStringlgSpecify icon size. See size chart below
shareConfigObject{
linkedin: {},
twitter: {},
facebook: {},
whatsapp: {},
reddit: {},
}
Advanced configuration for target specific styling

Events

NameDescriptionValue
clickedEvent that is emitted when a share button is clickedReturns social media platform which was clicked. E.g. ["twitter"]

Slots

NameDescription
${platform}-iconCustom icon for platform
${platform}-labelCustom label for platform

Examples

Using vue-share-it component

Default

<share-it />

Global configs

<share-it text="This is sample text" url="https://www.google.com" :height="600" :width="600" />

Targets

<share-it :targets="['twitter', 'facebook']" />

Dark

<share-it dark />

Dense

<share-it dense />

Outlined

<share-it outline />

Button configs

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',
  },
}
<share-it :shareConfig="share" />

Icons

<share-it icons />

Outlined icons

<share-it icons outline />

Rounded icons

<share-it icons outline round />

Icon configs

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
  },
}
<share-it :shareConfig="iconConfig" />

Using slots

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

Size chart

CodeSize
xs.75em
sm.875em
lg1.33em
2x2em
3x3em
4x4em
5x5em
6x6em
7x7em
8x8em
9x9em
10x10em