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! 👻

Vue.js

In your main.js file:

Nuxt.js

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

Load this plugin in your nuxt configuration file.

CDN

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

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. 📦

Documentation

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

Example

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