{"id":13464860,"url":"https://github.com/nicolasbeauvais/vue-social-sharing","last_synced_at":"2025-04-03T21:09:13.980Z","repository":{"id":37412702,"uuid":"71474933","full_name":"nicolasbeauvais/vue-social-sharing","owner":"nicolasbeauvais","description":"A renderless Vue.js component for sharing links to social networks, compatible with SSR","archived":false,"fork":false,"pushed_at":"2024-01-09T16:25:55.000Z","size":5326,"stargazers_count":1396,"open_issues_count":17,"forks_count":198,"subscribers_count":24,"default_branch":"master","last_synced_at":"2025-04-02T18:51:04.659Z","etag":null,"topics":["hacktoberfest","nuxtjs","renderless-components","social","social-network","social-networks","social-shares","ssr","vue","vue-component","vue-components","vuejs","vuejs-components","vuejs2"],"latest_commit_sha":null,"homepage":"https://nicolasbeauvais.github.io/vue-social-sharing/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nicolasbeauvais.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"nicolasbeauvais"}},"created_at":"2016-10-20T15:06:25.000Z","updated_at":"2025-04-01T03:33:07.000Z","dependencies_parsed_at":"2024-01-13T18:17:35.344Z","dependency_job_id":"6f2fb10e-fe32-4e23-91a1-f07109c87945","html_url":"https://github.com/nicolasbeauvais/vue-social-sharing","commit_stats":{"total_commits":231,"total_committers":36,"mean_commits":6.416666666666667,"dds":"0.37662337662337664","last_synced_commit":"214a9ef75dc4c88216959f29febb7d75229088ea"},"previous_names":[],"tags_count":61,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolasbeauvais%2Fvue-social-sharing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolasbeauvais%2Fvue-social-sharing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolasbeauvais%2Fvue-social-sharing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolasbeauvais%2Fvue-social-sharing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nicolasbeauvais","download_url":"https://codeload.github.com/nicolasbeauvais/vue-social-sharing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247009968,"owners_count":20868635,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","nuxtjs","renderless-components","social","social-network","social-networks","social-shares","ssr","vue","vue-component","vue-components","vuejs","vuejs-components","vuejs2"],"created_at":"2024-07-31T14:00:51.795Z","updated_at":"2025-04-03T21:09:13.960Z","avatar_url":"https://github.com/nicolasbeauvais.png","language":"JavaScript","funding_links":["https://github.com/sponsors/nicolasbeauvais"],"categories":["JavaScript","UI组件","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","社交分享","UI Components","Social Sharing"],"readme":"\u003ch1 align=\"center\"\u003eVue Social Sharing\u003c/h1\u003e\n\u003ch4 align=\"center\"\u003eA renderless components for sharing links on major social networks\u003c/h4\u003e\n\u003cp align=\"center\"\u003eLess than 2.5kb gzipped\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"580\" src=\"https://user-images.githubusercontent.com/2951704/111610221-63fc5180-87db-11eb-8e66-22c1309a6a92.png\"\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://github.com/nicolasbeauvais/vue-social-sharing/releases\"\u003e\u003cimg src=\"https://img.shields.io/github/release/nicolasbeauvais/vue-social-sharing.svg?style=flat-square\" alt=\"Release\"\u003e\u003c/a\u003e\n\u003ca href=\"https://travis-ci.com/nicolasbeauvais/vue-social-sharing\"\u003e\u003cimg src=\"https://img.shields.io/travis/com/nicolasbeauvais/vue-social-sharing/master.svg?style=flat-square\" alt=\"Build Status\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/vue-social-sharing\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/vue-social-sharing.svg?style=flat-square\" alt=\"Downloads\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/nicolasbeauvais/vue-social-sharing/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/github/license/nicolasbeauvais/vue-social-sharing.svg?style=flat-square\" alt=\"License\"\u003e\u003c/a\u003e\n\u003ca href=\"https://vuejs.org/\"\u003e\u003cimg src=\"https://img.shields.io/badge/vue-1.x-brightgreen.svg?style=flat-square\" alt=\"Vue 1\"\u003e\u003c/a\u003e\n\u003ca href=\"https://vuejs.org/\"\u003e\u003cimg src=\"https://img.shields.io/badge/vue-2.x-brightgreen.svg?style=flat-square\" alt=\"Vue 2\"\u003e\u003c/a\u003e\n\u003ca href=\"https://bundlephobia.com/result?p=vue-social-sharing\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/vue-social-sharing?color=green\u0026label=gzip\u0026style=flat-square\" alt=\"gzip size\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n### [Demo](https://nicolasbeauvais.github.io/vue-social-sharing/)\n\n### What is a renderless component?\n\nRenderless 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](https://adamwathan.me/renderless-components-in-vuejs/) by [@adamwathan](https://github.com/adamwathan).\n\n### Understanding social sharing\n\nBefore 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](https://ogp.me/). 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](https://github.com/nicolasbeauvais/vue-social-sharing#available-networks-and-properties) section of the documentation to check which Social Network accept which properties without Open Graph tags.  \n\n## Installation\n\n```bash\n# Yarn\nyarn add vue-social-sharing\n\n# NPM\nnpm install --save vue-social-sharing\n```\n\n## Vue 3 support\n\nVue 3 support is available in Alpha build, you can try it with the following command:\n\n```bash\n# Yarn\nyarn add vue-social-sharing@next\n\n# NPM\nnpm install --save vue-social-sharing@next\n```\n\nRemember that this is an alpha build, not all feature are available yet and you will certainly encounter some bugs. \n\n\n## Usage\n\n### Loading the library\n\n##### Browserify / Webpack\n\n```javascript\nimport VueSocialSharing from 'vue-social-sharing'\n\nVue.use(VueSocialSharing);\n```\n\n##### Nuxt\n```javascript\n// In your nuxt.config.js file:\nmodules: [\n  'vue-social-sharing/nuxt'\n]\n```\n\n##### HTML\n\n```html\n\u003cscript src=\"/dist/vue-social-sharing.js\"\u003e\u003c/script\u003e\n```\n\n### Using the Share Network component\n\n```html\n\u003cShareNetwork\n    network=\"facebook\"\n    url=\"https://news.vuejs.org/issues/180\"\n    title=\"Say hi to Vite! A brand new, extremely fast development setup for Vue.\"\n    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.\"\n    quote=\"The hot reload is so fast it\\'s near instant. - Evan You\"\n    hashtags=\"vuejs,vite\"\n  \u003e\n    Share on Facebook\n\u003c/ShareNetwork\u003e\n```\n\n## Available networks and properties\n\nThe `url` is the only property required for all networks.\n\n###### General properties\n\n| Name           | Data Type | Description                                                        |\n|----------------|-----------| -------------------------------------------------------------------|\n| `tag`          | String    | HTML tag used to render the network component. Default to \"a\" tag. |\n| `popup.width`  | Number    | Custom width of the popup window. Default to 626px.                |\n| `popup.height` | Number    | Custom height of the popup window. Default to 426px.               |\n\n###### Network properties\n\n| Prop           | Type   | Description                                                |\n|----------------|--------|------------------------------------------------------------|\n| `url`          | String | URL to share.                                              |\n| `title`        | String | Sharing title (if available).                              |\n| `description`  | String | Sharing description (if available).                        |\n| `quote`        | String | Facebook quote (Facebook only).                            |\n| `hashtags`     | String | A list of comma-separated hashtags (Twitter and Facebook). |\n| `twitter-user` | String | Twitter user (Twitter only).                               |\n| `media`        | String | Url to a media (Pinterest, VK, Weibo, and Wordpress).      |\n\n###### Networks\n\n| Network       | `url`              | `title`            | `description`      | Extras/Comments                                                                                                 |\n|---------------|--------------------|--------------------|--------------------|--------------------------------------------------------------------------------------------------------|\n| Baidu         | :heavy_check_mark: | :heavy_check_mark: | :x:                |                                                                                                        |\n| Buffer        | :heavy_check_mark: | :heavy_check_mark: | :x:                |                                                                                                        |\n| Email         | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |                                                                                                        |\n| EverNote      | :heavy_check_mark: | :heavy_check_mark: | :x:                |                                                                                                        |\n| Facebook      | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | `hashtags` A list of comma-separated hashtags, only the first one will be used.\u003cbr/\u003e`quote` Facebook quote. |\n| FlipBoard     | :heavy_check_mark: | :heavy_check_mark: | :x:                |                                                                                                        |\n| HackerNews    | :heavy_check_mark: | :heavy_check_mark: | :x:                |                                                                                                        |\n| InstaPaper    | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |                                                                                                        |\n| Line          | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |                                                                                                        |\n| LinkedIn      | :heavy_check_mark: | :x:                | :x:                |                                                                                                        |\n| Messenger      | :heavy_check_mark: | :x:                | :x:                |                                                                                                        |\n| Odnoklassniki | :heavy_check_mark: | :heavy_check_mark: | :x:                |                                                                                                        |\n| Pinterest     | :heavy_check_mark: | :heavy_check_mark: | :x:                | `media` URL of an image describing the content.                                                        |\n| Pocket        | :heavy_check_mark: | :heavy_check_mark: | :x:                |                                                                                                        |\n| Reddit        | :heavy_check_mark: | :heavy_check_mark: | :x:                |                                                                                                        |\n| Skype         | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |                                                                                                        |\n| SMS           | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |                                                                                                        |\n| StumbleUpon   | :heavy_check_mark: | :heavy_check_mark: | :x:                |                                                                                                        |\n| Telegram      | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |                                                                                                        |\n| Tumblr        | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |                                                                                                        |\n| Twitter       | :heavy_check_mark: | :heavy_check_mark: | :x:                | `hashtags` A list of comma-separated hashtags.\u003cbr/\u003e`twitter-user` Twitter user to mention.               |\n| Viber         | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |                                                                                                        |\n| VK            | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | `media` URL of an image describing the content.                                                        |\n| Weibo         | :heavy_check_mark: | :heavy_check_mark: | :x:                | `media` URL of an image describing the content.                                                        |\n| WhatsApp      | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |                                                                                                        |\n| Wordpress     | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | `media` URL of an image describing the content.                                                        |\n| Xing          | :heavy_check_mark: | :heavy_check_mark: | :x:                |                                                                                                        |\n| Yammer        | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |                                                                                                        |\n\nFor the networks: `Line`, `Skype`, `SMS`, `Telegram`, `Viber`, `WhatsApp` and `Yammer`; the shared content is a string of the form: \"`$title` `$url` `$description`\"\n\n#### Available events\n\nEvents that are emitted on the vue $root instance:\n\nName                   | Data                       | Description\n---------------------- | -------------------------- | --------------------------------------------------------------------------\n`share_network_open`   | Network name, shared url   | Fired when a sharing popup is open\n`share_network_change` | Network name, shared url   | Fired when the user open a new sharing popup while another is already open\n`share_network_close`  | Network name, shared url   | Fired when a sharing popup is closed or changed by another popup\n\nYou can listen to a `vue-social-sharing` $root event by using the following code:\n```javascript\nVue.$root.$on('share_network_open', function (network, url) {\n  // your event code\n});\n```\n\nEvents that are emitted on the local `vue-social-sharing` instance:\n\nName                   | Data                       | Description\n---------------------- | -------------------------- | --------------------------------------------------------------------------\n`open`   | Network name, shared url | Fired when a sharing popup is open\n`change` | Network name, shared url | Fired when the user open a new sharing popup while another is already open\n`close`  | Network name, shared url | Fired when a sharing popup is closed or changed by another popup\n\nYou can listen to a `ShareNetwork` local event by using the following code:\n```html\n\u003cShareNetwork @open=\"open\" @change=\"change\" @close=\"close\" /\u003e\n```\n\n\u003e Note that the `share_network_close` event will not be fired for the WhatsApp, SMS and Email sharers.\n\n## Extending the network list\n\nIn 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:\n\n```javascript\nimport Vue from 'vue'\nimport VueSocialSharing from '@/vue-social-sharing'\n\nVue.use(VueSocialSharing, {\n  networks: {\n    fakeblock: 'https://fakeblock.com/share?url=@url\u0026title=@title'\n  }\n})\n\nnew Vue({\n  el: '#app',\n})\n```\n\n## Extending the network list in Nuxt\n\nYou can extend the list of available networks directly in your `nuxt.config.js` file:\n```javascript\nmodules: [\n  ['vue-social-sharing/nuxt', {\n    networks: {\n      fakeblock: 'https://fakeblock.com/share?url=@url\u0026title=@title'\n    }\n  }],\n]\n```\n\n## Customizing the popup window size\n\nIf needed, you can set a custom width and height for the popup window:\n```html\n\u003cShareNetwork :popup=\"{width: 400, height: 200}\" /\u003e\n```\n\n## Feature request\nFeel free to open an issue to ask for a new social network support.\n\n## Changelog\nDetailed changes for each release can be found in [CHANGELOG.md](https://github.com/nicolasbeauvais/vue-social-sharing/blob/master/CHANGELOG.md).\n\n## Issues\nPlease make sure to read the [Issue Reporting Checklist](https://github.com/nicolasbeauvais/vue-social-sharing/blob/master/CONTRIBUTING.md#issue-reporting-guidelines) before opening an issue. Issues not conforming to the guidelines may be closed immediately.\n\n## Contribution\nPlease make sure to read the [Contributing Guide](https://github.com/nicolasbeauvais/vue-social-sharing/blob/master/CONTRIBUTING.md) before making a pull request.\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicolasbeauvais%2Fvue-social-sharing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicolasbeauvais%2Fvue-social-sharing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicolasbeauvais%2Fvue-social-sharing/lists"}