vue-socialmedia-share

> Vue component for social sharing

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-socialmedia-share
6631.0.15 years ago5 years agoMinified + gzip package size for vue-socialmedia-share in KB

Readme

vue-socialmedia-share
Vue component for social sharing

screen shot 2018-05-30 at 4 46 44 pm

vue-socialmedia-share is a vue component for sharing links to social networks

Demo

Edit vue-socialmedia-share

Features

  • No external script loading
  • Opens a new share tab
  • Share Button for:
Facebook Twitter Reddit LinkedIn Google + WhatsApp Telegram Email Pinterest
  • Social Media icons includes in the library
  • Change the size of icons

Installation

yarn add vue-socialmedia-share

or
npm install vue-socialmedia-share
API

Facebook

import { Facebook } from 'vue-socialmedia-share';

// usage in local component

export default {
  components: {
    Facebook
  }
};

Props

| Prop | Data Type | Required | Description | | ------- | --------- | -------- | ------------------ | | url | String | true | URL to share. | | scale | String | | Size of icon (1-9) |

Twitter

import { Twitter } from 'vue-socialmedia-share';

// usage in local component

export default {
  components: {
    Twitter
  }
};

| Prop | Data Type | Required | Description | | ------- | --------- | -------- | ------------------------ | | url | String | true | URL to share. | | scale | String | | Size of icon(1-9) | | title | String | | Title of the shared page |

LinkedIn

import { Linkedin } from 'vue-socialmedia-share';

// usage in local component

export default {
  components: {
    Linkedin
  }
};

| Prop | Data Type | Required | Description | | ------- | --------- | -------- | ----------------- | | url | String | true | URL to share. | | scale | String | | Size of icon(1-9) |

Reddit

import { Reddit } from 'vue-socialmedia-share';

// usage in local component

export default {
  components: {
    Reddit
  }
};

| Prop | Data Type | Required | Description | | ------- | --------- | -------- | ------------------------ | | url | String | true | URL to share. | | scale | String | | Size of icon(1-9) | | title | String | | Title of the shared page |

Telegram

import { Telegram } from 'vue-socialmedia-share';

// usage in local component

export default {
  components: {
    Telegram
  }
};

| Prop | Data Type | Required | Description | | ------- | --------- | -------- | ------------------------ | | url | String | true | URL to share. | | scale | String | | Size of icon(1-9) | | title | String | | Title of the shared page |

WhatsApp

import { WhatsApp } from 'vue-socialmedia-share';

// usage in local component

export default {
  components: {
    WhatsApp
  }
};

| Prop | Data Type | Required | Description | | ------- | --------- | -------- | ------------------------ | | url | String | true | URL to share. | | scale | String | | Size of icon(1-9) | | title | String | | Title of the shared page |

Pinterest

import { Pinterest } from 'vue-socialmedia-share';

// usage in local component

export default {
  components: {
    Pinterest
  }
};

| Prop | Data Type | Required | Description | | ------- | --------- | -------- | ----------------- | | url | String | true | URL to share. | | scale | String | | Size of icon(1-9) |

Google +

import { Google } from 'vue-socialmedia-share';

// usage in local component

export default {
  components: {
    Google
  }
};

| Prop | Data Type | Required | Description | | ------- | --------- | -------- | ----------------- | | url | String | true | URL to share. | | scale | String | | Size of icon(1-9) |

Email

import { Email } from 'vue-socialmedia-share';

// usage in local component

export default {
  components: {
    Email
  }
};

| Prop | Data Type | Required | Description | | --------- | --------- | -------- | ----------------- | | url | String | true | URL to share. | | scale | String | | Size of icon(1-9) | | subject | String | | Subject of email | | body | String | | Body of email |

Contributing Guide

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Author

© Mohit Bajoria

License

MIT
Like it ? it