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

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:

vuesocial No Labels

No Labels

vuesocial Reversed Buttons

Reversed Buttons

vuesocial Light Theme

Light Theme

Download Details:

Author: growthbunker

Live Demo: https://www.growthbunker.dev/vuesocial/

Download Link: https://github.com/growthbunker/vuesocial/archive/master.zip

Official Website: https://github.com/growthbunker/vuesocial

Install & Download:

# Yarn
$ yarn add @growthbunker/vuesocial

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

Add Comment