Vue component for social sharing

Vue component for social sharing

Vue component for social sharing

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

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

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

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

Author

© Mohit Bajoria

License

MIT

Leave a Reply

Your email address will not be published. Required fields are marked *

Top