65+ Social & Brand Buttons For Vue.js – vuesocial

Install & Download:

# Yarn
$ yarn add @growthbunker/vuesocial
# NPM
$ npm install @growthbunker/vuesocial --save

Description:

vuesocial is a component that provides a collection of 65+ popular social media and brand buttons for Vue.js applications.

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 use it:

1. Install, import, and register the 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)
  }
}

Previews:

No Labels

Reversed Buttons

Light Theme