Vue Social

One easy-to-use button component with 65+ social networks.


Preview

Here is the kind of social buttons you can get in a few seconds. 🎉


When no label is defined

Mini reversed buttons with white icon theme

With loading state


Installation

Install it on Vue, Nuxt or use the CDN link! 👻


npm install @growthbunker/vuesocial

# Or if you prefer to use yarn
yarn add @growthbunker/vuesocial

Vue.js

In your main.js file:

// src/main.js

import Vue from "vue";
import VueSocial from "@growthbunker/vuesocial";

Vue.use(VueSocial);

Nuxt.js

Create a plugin for Vue Social and load the library like in a regular Vue application:

// plugins/VueSocial.js

import Vue from "vue";
import VueSocial from "@growthbunker/vuesocial";

Vue.use(VueSocial);

Load this plugin in your nuxt configuration file.

// nuxt.config.js

module.exports = {
  plugins: [
    { src: "@/plugins/VueSocial.js" }
  ]
}

CDN

Get the latest version from jsdelivr, and import the JavaScript file in your page.

<script src="https://cdn.jsdelivr.net/npm/vue@2.5/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@growthbunker/vuesocial@latest/dist/vuesocial.min.js"></script>

We recommend our users to lock Vue Social's version when using a CDN. Requesting the latest version (as opposed to "latest major" or "latest minor") is dangerous because major versions usually come with breaking changes. Only do this if you really know what you are doing.


The icons for the social networks

Where to get them? 🎨


All the icons are available here in three themes (color, black and white). Copy them somewhere in your somewhere in your "public" or "static" folder. You will also have to set the icon path for the component to be able to find them (see package options and component props).

A huge thank you to Alexis Doreau for designing them.


Package Options

Some options you can set to customize the component. 📦


import VueSocial from "@growthbunker/vuesocial";

Vue.use(VueSocial, {
  // Specify the path of the folder where the logos are stored.
  iconPath: '/images/vuesocial/networks/',

  // Specify the theme to use: dark or light (dark by default).
  theme: "dark",
});

Documentation

All you need to know about the props and events. 🧠


<!-- Insert this component in your code -->
<!-- Customize it with props (see table below) -->
<gb-social-button>My Button</gb-social-button />
Prop NameTypeDetails
iconPathStringDefault: nullSet the path of the folder where the logos are stored.
iconThemeStringDefault: "color"Override the theme for the logo icon."black" | "color" | "white"
disabledBooleanDefault: falseAdd the disabled tag property to the button.
full-widthBooleanDefault: falseWhen set to true, the social button button will take all the width available.
loadingBooleanDefault: falseSet the button as loading and display a small spinner inside it.
networkStringRequired: trueSet the social network."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"
reverseBooleanDefault: falseReverse the button color.
roundedBooleanDefault: falseRound the button corners.
sizeStringDefault: "default"Set the button size."nano" | "micro" | "mini" | "small" | "default" | "medium" | "large"
spinnerColorStringDefault: "black"Set the spinner color when loading."black", "blue", "green", "grey", "orange", "purple", "red", "turquoise", "white", "yellow"

Event NameParametersDetails
clicknetwork, eventFires on a mouse click on the element.

Example

Once the plugin is installed, you can use the component like this. 🤓


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