Blog Detail


Renderless Vue component for sharing links to social networks cover image

arrow_back Renderless Vue component for sharing links to social networks

vue-social-sharing is a render-less Vue js component for sharing links to social networks. It is also compatible with SSR. You can view its demo here

What is a renderless component?

Renderless components give you the highest possible control over your markup and styling. This means that vue-social-sharing ship with minimal HTML and no CSS to let you adapt the look and feel of the components to your needs.

Understanding social sharing

Before using this package it is important to understand how Social Networks handle sharing links on their platform. When you share a link on a Social Network, the Social Network will crawl the link to detect Open Graph meta tags. If you share links that do not contain Open Graph meta tags, the Social Network will not be able to display rich content for your link. You can refer to the Available properties section of the documentation to check which Social networks accept which properties without Open Graph tags.


You can install this component via Npm Or Yarn:

yarn add vue-social-sharing


npm install --save vue-social-sharing

Vue 3 support

Vue 3 support is available in Alpha build, you can try it with the following command:

yarn add vue-social-sharing@next

npm install --save vue-social-sharing@next

Remember that this is an alpha build, not all features are available yet and you will certainly encounter some bugs.


Loading the library

import VueSocialSharing from 'vue-social-sharing'



<script src="/dist/vue-social-sharing.js">

Using the Share Network component

    title="Say hi to Vite! A brand new, extremely fast development setup for Vue."
    description="This week, I’d like to introduce you to 'Vite', which means 'Fast'. It’s a brand new development setup created by Evan You."
    quote="The hot reload is so fast it\'s near instant. - Evan You"
    Share on Facebook

Extending the network list

In version 3.x you can extend and override the list of available networks. You can see a working example of the feature in the examples/index.js file:

import Vue from 'vue'
import VueSocialSharing from '@/vue-social-sharing'

Vue.use(VueSocialSharing, {
  networks: {
    fakeblock: ''

new Vue({
  el: '#app',

Customizing the popup window size

You can set custom width and height for the popup window if you needed:

<ShareNetwork :popup="{width: 400, height: 200}" />

There’s a lot of available networks, properties
and events in this package, You can visit its documentation & source code on Github for more Details.

Published at : 09-12-2021

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project