New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

vue-share-it

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-share-it

A Vue.js component for sharing links to social networks

  • 1.1.8
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
527
increased by7.99%
Maintainers
1
Weekly downloads
 
Created
Source

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/vue-share-it@x.x.x/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

Keywords

FAQs

Package last updated on 30 Aug 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc