Gathering detailed insights and metrics for vue-social-sharing
Gathering detailed insights and metrics for vue-social-sharing
A renderless Vue.js component for sharing links to social networks, compatible with SSR
Installations
npm install vue-social-sharingDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.13.0
NPM Version
8.1.0
Releases
60
Languages
4
JavaScript
CSS
Smarty
HTML
JavaScript (94.69%)
CSS (3.69%)
Smarty (0.84%)
HTML (0.78%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
1,390 Stars
257 Commits
197 Forks
24 Watchers
6 Branches
35 Contributors
Updated on Jul 08, 2025
Maintainers
1
Package Meta Information
Latest Version
3.0.9
Package Id
vue-social-sharing@3.0.9
Unpacked Size
34.58 kB
Size
9.92 kB
File Count
11
NPM Version
8.1.0
Node Version
16.13.0
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Dev Dependencies
29
@babel/core@babel/plugin-proposal-class-properties@babel/plugin-transform-runtime@babel/preset-env@storybook/addon-notes@storybook/vue@vue/test-utilsbabel-eslintbabel-jestbabel-loaderbabel-preset-vueconventional-github-releasercross-enveslinteslint-config-vueeslint-plugin-jesteslint-plugin-vuehuskyjestlint-stagedpoiuglifyjs-webpack-pluginvuevue-html-loadervue-loadervue-style-loadervue-template-compilerwebpackwebpack-cli
Vue Social Sharing
A renderless components for sharing links on major social networks
Less than 2.5kb gzipped
Demo
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. You can learn more about renderless components in this blog article by @adamwathan.
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 a rich content for your link. You can refer to the Available properties section of the documentation to check which Social Network accept which properties without Open Graph tags.
Installation
1# Yarn 2yarn add vue-social-sharing 3 4# NPM 5npm install --save vue-social-sharing
Vue 3 support
Vue 3 support is available in Alpha build, you can try it with the following command:
1# Yarn 2yarn add vue-social-sharing@next 3 4# NPM 5npm install --save vue-social-sharing@next
Remember that this is an alpha build, not all feature are available yet and you will certainly encounter some bugs.
Usage
Loading the library
Browserify / Webpack
1import VueSocialSharing from 'vue-social-sharing' 2 3Vue.use(VueSocialSharing);
Nuxt
1// In your nuxt.config.js file: 2modules: [ 3 'vue-social-sharing/nuxt' 4]
HTML
1<script src="/dist/vue-social-sharing.js"></script>
Using the Share Network component
1<ShareNetwork 2 network="facebook" 3 url="https://news.vuejs.org/issues/180" 4 title="Say hi to Vite! A brand new, extremely fast development setup for Vue." 5 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." 6 quote="The hot reload is so fast it\'s near instant. - Evan You" 7 hashtags="vuejs,vite" 8 > 9 Share on Facebook 10</ShareNetwork>
Available networks and properties
The url is the only property required for all networks.
General properties
| Name | Data Type | Description |
|---|---|---|
tag | String | HTML tag used to render the network component. Default to "a" tag. |
popup.width | Number | Custom width of the popup window. Default to 626px. |
popup.height | Number | Custom height of the popup window. Default to 426px. |
Network properties
| Prop | Type | Description |
|---|---|---|
url | String | URL to share. |
title | String | Sharing title (if available). |
description | String | Sharing description (if available). |
quote | String | Facebook quote (Facebook only). |
hashtags | String | A list of comma-separated hashtags (Twitter and Facebook). |
twitter-user | String | Twitter user (Twitter only). |
media | String | Url to a media (Pinterest, VK, Weibo, and Wordpress). |
Networks
| Network | url | title | description | Extras/Comments |
|---|---|---|---|---|
| Baidu | :heavy_check_mark: | :heavy_check_mark: | :x: | |
| Buffer | :heavy_check_mark: | :heavy_check_mark: | :x: | |
| :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | ||
| EverNote | :heavy_check_mark: | :heavy_check_mark: | :x: | |
| :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | hashtags A list of comma-separated hashtags, only the first one will be used.quote Facebook quote. | |
| :heavy_check_mark: | :heavy_check_mark: | :x: | ||
| HackerNews | :heavy_check_mark: | :heavy_check_mark: | :x: | |
| InstaPaper | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | |
| Line | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | |
| :heavy_check_mark: | :x: | :x: | ||
| Messenger | :heavy_check_mark: | :x: | :x: | |
| Odnoklassniki | :heavy_check_mark: | :heavy_check_mark: | :x: | |
| :heavy_check_mark: | :heavy_check_mark: | :x: | media URL of an image describing the content. | |
| :heavy_check_mark: | :heavy_check_mark: | :x: | ||
| :heavy_check_mark: | :heavy_check_mark: | :x: | ||
| Skype | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | |
| SMS | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | |
| StumbleUpon | :heavy_check_mark: | :heavy_check_mark: | :x: | |
| Telegram | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | |
| Tumblr | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | |
| :heavy_check_mark: | :heavy_check_mark: | :x: | hashtags A list of comma-separated hashtags.twitter-user Twitter user to mention. | |
| Viber | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | |
| VK | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | media URL of an image describing the content. |
| :heavy_check_mark: | :heavy_check_mark: | :x: | media URL of an image describing the content. | |
| :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | ||
| Wordpress | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | media URL of an image describing the content. |
| :heavy_check_mark: | :heavy_check_mark: | :x: | ||
| Yammer | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
For the networks: Line, Skype, SMS, Telegram, Viber, WhatsApp and Yammer; the shared content is a string of the form: "$title $url $description"
Available events
Events that are emitted on the vue $root instance:
| Name | Data | Description |
|---|---|---|
share_network_open | Network name, shared url | Fired when a sharing popup is open |
share_network_change | Network name, shared url | Fired when the user open a new sharing popup while another is already open |
share_network_close | Network name, shared url | Fired when a sharing popup is closed or changed by another popup |
You can listen to a vue-social-sharing $root event by using the following code:
1Vue.$root.$on('share_network_open', function (network, url) { 2 // your event code 3});
Events that are emitted on the local vue-social-sharing instance:
| Name | Data | Description |
|---|---|---|
open | Network name, shared url | Fired when a sharing popup is open |
change | Network name, shared url | Fired when the user open a new sharing popup while another is already open |
close | Network name, shared url | Fired when a sharing popup is closed or changed by another popup |
You can listen to a ShareNetwork local event by using the following code:
1<ShareNetwork @open="open" @change="change" @close="close" />
Note that the
share_network_closeevent will not be fired for the WhatsApp, SMS and Email sharers.
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:
1import Vue from 'vue' 2import VueSocialSharing from '@/vue-social-sharing' 3 4Vue.use(VueSocialSharing, { 5 networks: { 6 fakeblock: 'https://fakeblock.com/share?url=@url&title=@title' 7 } 8}) 9 10new Vue({ 11 el: '#app', 12})
Extending the network list in Nuxt
You can extend the list of available networks directly in your nuxt.config.js file:
1modules: [ 2 ['vue-social-sharing/nuxt', { 3 networks: { 4 fakeblock: 'https://fakeblock.com/share?url=@url&title=@title' 5 } 6 }], 7]
Customizing the popup window size
If needed, you can set a custom width and height for the popup window:
1<ShareNetwork :popup="{width: 400, height: 200}" />
Feature request
Feel free to open an issue to ask for a new social network support.
Changelog
Detailed changes for each release can be found in CHANGELOG.md.
Issues
Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.
Contribution
Please make sure to read the Contributing Guide before making a pull request.
License
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 1/30 approved changesets -- score normalized to 0
Reason
project is archived
Details
- Warn: Repository is archived.
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 1 are checked with a SAST tool
Reason
90 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-wxhq-pm8v-cw75
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-653v-rqx9-j85p
- Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx
- Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9
- Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w
- Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg
- Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
- Warn: Project is vulnerable to: GHSA-3949-f494-cm99
- Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
- Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
- Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
1.7
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More