Vue Socials

💬 Social media share buttons and counts for Vue.js.
Explore website »

Key Features • Installation • Documentation • Browsers support • License • Support the project • Contributing

Key Features ✨

• 50+ reusable components
• Small ~1.3KB component average size (minified and gzipped)
• Fully tree-shakeable
• No dependencies
• No SDK
• Don't track the user
• Completely unstyled
• Built with a11y in mind
• Support Vue 2 & Vue 3
• Support SSR
• Each component exposing a single slot that gives you complete control over what should actually be rendered

Installation 🚀

npm

# Vue 2
npm install vue-socials@1

# Vue 3
npm install vue-socials

yarn

# Vue 2
yarn add vue-socials@1

# Vue 3
yarn add vue-socials

Import all components (not recommended)

/**
 * Vue 2
 */
import Vue from 'vue'
import VueSocials from 'vue-socials';

Vue.use(VueSocials)

/**
 * Vue 3
 */
import { createApp } from 'vue'
import VueSocials from 'vue-socials';
import App from './App.vue'

const app = createApp(App)
app.use(VueSocials)

Import only specific component

/**
 * Vue 2
 */
import Vue from 'vue'
import { SGithub } from 'vue-socials';

Vue.component('SGithub', SGithub)

/**
 * Vue 3
 */
import { createApp } from 'vue'
import { SGithub } from 'vue-socials';
import App from './App.vue'

const app = createApp(App)
app.component('SGithub', SGithub)

Documentation 🤗

Browse online documentation here

Socials

B

• Blogger

D

• DevTo

• Diaspora

• Douban

E

• Email

• Evernote

F

• Facebook

  • Facebook counter

• Facebook Messenger

• Facebook Workplace

• Flipboard

G

• Github

  • Github counter

• Github gist

  • Github gist counter

• Github repository

  • Github repository counter

• Gmail

• Google Bookmarks

H

• Hacker News

• Hatena

  • Hatena counter

• Houzz

I

• Instapaper

K

• Kakao Story

L

• Line

  • Line counter

• Linkedin

• LiveJournal

M

• MailRu

• Mastodon

• Microsoft Teams

O

• Odnoklassniki

  • Odnoklassniki counter

P

• Pinterest

  • Pinterest counter

• Pocket

Q

• Qzone

R

• Reddit

  • Reddit counter

• Renren

S

• Skype

• Sms

T

• Telegram

• Threema

• Trello

• Tumblr

  • Tumblr counter

• Twitter

V

• Viber

• Vkontakte

  • Vkontakte counter

W

• Weibo

• Whatsapp

• Wordpress

X

• Xing

Y

• Yahoo

• Yammer

---

SBlogger

Usage

<template>
  <s-blogger
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-blogger>
</template>

<script>
  import { SBlogger } from 'vue-socials'

  export default {
    name: 'SBloggerSharing',
    
    components: { SBlogger },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: { 
          url: 'https://github.com/', 
          title: 'Title', 
          text: 'Text',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – the URL you want to share title – your blogpost title text – your blogpost content	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events