Share links on social networks with Vue Js Component

Hemant Rai launched a very handy Vue component called Vue-share-it. It is a highly customizable Vue.js component for sharing links on social networks. You can utilize this component very easily. You can view its demo here

Features

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

Installation

You can install this package via Npm or Yarn

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

This package supports the following social media platforms.

• Twitter
• LinkedIn
• Facebook
• Whatsapp
• Reddit

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

Icons

<share-it icons />

Outlined icons

<share-it icons outline />

Rounded icons

<share-it icons outline round />

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>

You can view its more options and source code on Github.