Easy-to-use Buttons Component for Vue.js with 65+ Social Networks

VUE SOCIAL is an easy-to-use button plugin with over 65+ social media networks and branded buttons for Vue.js applications.

vue js social icons, gb social button, vue social media icons, vue social sharing, mdb vue button, vue js social media, vue panel, vue js icon list

Table of Contents

More Features:

Custom size: “nano”, “micro”, “mini”, “small”, “default”, “medium”, “large”.
Custom themes: “black”, “color”, “white”.
Rounded button or not.
Custom loading spinner inside buttons.

Icons Included:

500px
airbnb
amazon
android
apple
bankin
behance
bitly
blackberry
blogger
buffer
chrome
codepen
dailymotion
dribbble
drive
dropbox
envato
evernote
facebook
fancy
feedly
firefox
flickr
foursquare
github
google
hangout
instagram
internetexplorer
invision
linkedin
magento
medium
messenger
opera
paypal
periscope
photoshop
pinterest
pocket
principle
producthunt
rdio
reddit
rss
safari
scoopit
shopify
sketch
skype
slack
snapchat
soundcloud
spotify
stackoverflow
tinder
trello
tumblr
twitter
viadeo
viber
vimeo
vine
whatsapp
windowsphone
wordpress
yelp
youtube

How to make use of it:

Install and download:

# Yarn
$ yarn add @growthbunker/vuesocial

# NPM
$ npm install @growthbunker/vuesocial --save

1. Install, import, and register vuescocial.

import Vue from "vue"
import vuesocial from "@growthbunker/vuesocial"
Vue.use(vuesocial)

2. Insert a button component into your template.

<template>
  <gb-social-button
    network="facebook"
    size="small"
    theme="light"
  >
    Do something with Facebook
  </gb-social-button>
</template>

3. Customize the component with the following props.

iconPath: {
  type: String,
  default: null
},
iconTheme: {
  type: String,
  default: "color",
  validator(x) {
    return ["black", "color", "white"].includes(x)
  }
},
disabled: {
  type: Boolean,
  default: false
},
fullWidth: {
  type: Boolean,
  default: false
},
loading: {
  type: Boolean,
  default: false
},
network: {
  type: String,
  required: true,
  validator(x) {
    return [
      "500px",
      "airbnb",
      "amazon",
      "android",
      "apple",
      "bankin",
      "behance",
      "bitly",
      "blackberry",
      "blogger",
      "buffer",
      "chrome",
      "codepen",
      "dailymotion",
      "dribbble",
      "drive",
      "dropbox",
      "envato",
      "evernote",
      "facebook",
      "fancy",
      "feedly",
      "firefox",
      "flickr",
      "foursquare",
      "github",
      "google",
      "hangout",
      "instagram",
      "internetexplorer",
      "invision",
      "linkedin",
      "magento",
      "medium",
      "messenger",
      "opera",
      "paypal",
      "periscope",
      "photoshop",
      "pinterest",
      "pocket",
      "principle",
      "producthunt",
      "rdio",
      "reddit",
      "rss",
      "safari",
      "scoopit",
      "shopify",
      "sketch",
      "skype",
      "slack",
      "snapchat",
      "soundcloud",
      "spotify",
      "stackoverflow",
      "tinder",
      "trello",
      "tumblr",
      "twitter",
      "viadeo",
      "viber",
      "vimeo",
      "vine",
      "whatsapp",
      "windowsphone",
      "wordpress",
      "yelp",
      "youtube"
    ].includes(x)
  }
},
reverse: {
  type: Boolean,
  default: false
},
rounded: {
  type: Boolean,
  default: false
},
size: {
  type: String,
  default: "default",
  validator(x) {
    return ["nano", "micro", "mini", "small", "default", "medium", "large"].includes(x)
  }
},
spinnerColor: {
  type: String,
  default: "black",
  validator(x) {
    return ["black", "blue", "green", "grey", "orange", "purple", "red", "turquoise", "white", "yellow"].includes(x)
  }
}

65+ social & brand buttons, vuesocial Plugin/Github