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? 🎨
Package Options
Some options you can set to customize the component. 📦
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 Name | Type | Details |
---|---|---|
iconPath | StringDefault: null | Set the path of the folder where the logos are stored. |
iconTheme | StringDefault: "color" | Override the theme for the logo icon."black" | "color" | "white" |
disabled | BooleanDefault: false | Add the disabled tag property to the button. |
full-width | BooleanDefault: false | When set to true, the social button button will take all the width available. |
loading | BooleanDefault: false | Set the button as loading and display a small spinner inside it. |
network | StringRequired: true | Set 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" |
reverse | BooleanDefault: false | Reverse the button color. |
rounded | BooleanDefault: false | Round the button corners. |
size | StringDefault: "default" | Set the button size."nano" | "micro" | "mini" | "small" | "default" | "medium" | "large" |
spinnerColor | StringDefault: "black" | Set the spinner color when loading."black", "blue", "green", "grey", "orange", "purple", "red", "turquoise", "white", "yellow" |
Event Name | Parameters | Details |
---|---|---|
click | network, event | Fires 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>