waggyman/vue-socialmedia-share

🔊 Vue component for social sharing of links - https://codesandbox.io/s/kk0mqj11lv

vue-socialmedia-share

Vue component for social sharing

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

Demo

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