{"id":15017621,"url":"https://github.com/webistomin/vue-socials","last_synced_at":"2025-08-20T20:32:06.164Z","repository":{"id":37889083,"uuid":"321770753","full_name":"webistomin/vue-socials","owner":"webistomin","description":":speech_balloon: Social media share buttons and counts for Vue.js","archived":false,"fork":false,"pushed_at":"2024-01-18T12:07:35.000Z","size":3037,"stargazers_count":58,"open_issues_count":17,"forks_count":8,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-15T05:02:14.216Z","etag":null,"topics":["facebook","linkedin","mailru","mastodon","messenger","odnoklassniki","reddit","share","share-buttons","social","social-buttons","social-share","telegram","tumblr","twitter","vkontakte","vue-social","vue-social-sharing","whatsapp"],"latest_commit_sha":null,"homepage":"https://vue-socials.vercel.app/","language":"TypeScript","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/webistomin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-12-15T19:37:49.000Z","updated_at":"2025-08-05T11:59:44.000Z","dependencies_parsed_at":"2024-02-27T08:18:30.944Z","dependency_job_id":null,"html_url":"https://github.com/webistomin/vue-socials","commit_stats":{"total_commits":247,"total_committers":6,"mean_commits":"41.166666666666664","dds":"0.27125506072874495","last_synced_commit":"f1ff43632299b02537780137e023bd63bffb1baa"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/webistomin/vue-socials","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webistomin%2Fvue-socials","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webistomin%2Fvue-socials/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webistomin%2Fvue-socials/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webistomin%2Fvue-socials/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webistomin","download_url":"https://codeload.github.com/webistomin/vue-socials/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webistomin%2Fvue-socials/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271378680,"owners_count":24749192,"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","status":"online","status_checked_at":"2025-08-20T02:00:09.606Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["facebook","linkedin","mailru","mastodon","messenger","odnoklassniki","reddit","share","share-buttons","social","social-buttons","social-share","telegram","tumblr","twitter","vkontakte","vue-social","vue-social-sharing","whatsapp"],"created_at":"2024-09-24T19:50:45.963Z","updated_at":"2025-08-20T20:32:05.705Z","avatar_url":"https://github.com/webistomin.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","UI Components [๐Ÿ”](#readme)","Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"\u003cp align=\"center\"\u003e\n \u003cimg width=\"124\" height=\"124\" src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/logo.svg\" alt=\"Heart\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\n Vue Socials\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n ๐Ÿ’ฌ Social media share buttons and counts for \u003ca href=\"https://vuejs.org/\"\u003eVue.js\u003c/a\u003e.\n \u003cbr\u003e\n \u003ca href=\"https://vue-socials.vercel.app/\"\u003e\u003cstrong\u003eExplore website ยป\u003c/strong\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://npmjs.org/package/vue-socials\"\u003e\n \u003cimg alt=\"NPM version\" src=\"https://img.shields.io/npm/v/vue-socials.svg?color=%232D4CC8\" /\u003e\n\u003c/a\u003e\n \u003ca href=\"https://npmjs.org/package/vue-socials\"\u003e\n\u003cimg alt=\"NPM downloads\" src=\"https://img.shields.io/npm/dm/vue-socials.svg?color=%232D4CC8\"\u003e\n\u003c/a\u003e\n \u003ca href=\"https://github.com/webistomin/vue-socials\"\u003e\n\u003cimg alt=\"GitHub issues\" src=\"https://img.shields.io/github/issues/webistomin/vue-socials?color=%232D4CC8\"\u003e\n\u003c/a\u003e\n \u003ca href=\"https://github.com/webistomin/vue-socials\"\u003e\n \u003cimg alt=\"GitHub last commit\" src=\"https://img.shields.io/github/last-commit/webistomin/vue-socials?color=%232D4CC8\"\u003e\n\u003c/a\u003e\n \u003ca href=\"https://github.com/webistomin/vue-socials\"\u003e\n \u003cimg alt=\"npm type definitions\" src=\"https://img.shields.io/npm/types/vue-socials?color=%232D4CC8\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://bundlephobia.com/result?p=vue-socials\"\u003e\n \u003cimg alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/minzip/vue-socials?color=%232D4CC8\"\u003e\n \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"#key-features-\"\u003eKey Features\u003c/a\u003e โ€ข\n \u003ca href=\"#installation-\"\u003eInstallation\u003c/a\u003e โ€ข\n \u003ca href=\"#documentation-\"\u003eDocumentation\u003c/a\u003e โ€ข\n \u003ca href=\"#browsers-support-\"\u003eBrowsers support\u003c/a\u003e โ€ข\n \u003ca href=\"#license-\"\u003eLicense\u003c/a\u003e โ€ข\n \u003ca href=\"#support-the-project-\"\u003eSupport the project\u003c/a\u003e โ€ข\n \u003ca href=\"#contributing-\"\u003eContributing\u003c/a\u003e\n\u003c/p\u003e\n\n## Key Features โœจ\n\n* **50+** reusable components\n* **Small** [`~1.3KB` component average size](https://bundlephobia.com/package/vue-socials) (minified and gzipped)\n* Fully **tree-shakeable**\n* **No dependencies**\n* **No SDK**\n* **Don't track** the user\n* **Completely** unstyled\n* Built with **a11y** in mind\n* **Support** Vue 2 \u0026 Vue 3\n* **Support** SSR\n* Each component exposing a **single slot** that gives you complete control over what should actually be rendered\n\n## Installation ๐Ÿš€\n\n**npm**\n```shell\n# Vue 2\nnpm install vue-socials@1\n\n# Vue 3\nnpm install vue-socials\n```\n\n**yarn**\n```shell\n# Vue 2\nyarn add vue-socials@1\n\n# Vue 3\nyarn add vue-socials\n```\n\n**Import all components (not recommended)**\n\n```js\n/**\n * Vue 2\n */\nimport Vue from 'vue'\nimport VueSocials from 'vue-socials';\n\nVue.use(VueSocials)\n\n/**\n * Vue 3\n */\nimport { createApp } from 'vue'\nimport VueSocials from 'vue-socials';\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(VueSocials)\n```\n\n**Import only specific component**\n```js\n/**\n * Vue 2\n */\nimport Vue from 'vue'\nimport { SGithub } from 'vue-socials';\n\nVue.component('SGithub', SGithub)\n\n/**\n * Vue 3\n */\nimport { createApp } from 'vue'\nimport { SGithub } from 'vue-socials';\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.component('SGithub', SGithub)\n```\n\n\n## Documentation ๐Ÿค—\n\nBrowse [online documentation here](https://vue-socials.vercel.app/)\n\n### Socials\n\n### B\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/blogger.svg\" width=\"16\" height=\"16\"/\u003e [Blogger](#sblogger)\n\n### D\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/devto.svg\" width=\"16\" height=\"16\"/\u003e [DevTo](#sdevto)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/diaspora.svg\" width=\"16\" height=\"16\"/\u003e [Diaspora](#sdiaspora)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/douban.svg\" width=\"16\" height=\"16\"/\u003e [Douban](#sdouban)\n\n### E\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/email.svg\" width=\"16\" height=\"16\"/\u003e [Email](#semail)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/evernote.svg\" width=\"16\" height=\"16\"/\u003e [Evernote](#severnote)\n\n### F\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/facebook.svg\" width=\"16\" height=\"16\"/\u003e [Facebook](#sfacebook)\n \n * \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/facebook.svg\" width=\"16\" height=\"16\"/\u003e [Facebook counter](#sfacebookcount)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/facebook-messenger.svg\" width=\"16\" height=\"16\"/\u003e [Facebook Messenger](#sfacebookmessenger)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/facebook-workplace.svg\" width=\"16\" height=\"16\"/\u003e [Facebook Workplace](#sfacebookworkplace)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/flipboard.svg\" width=\"16\" height=\"16\"/\u003e [Flipboard](#sflipboard)\n\n### G\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/github.svg\" width=\"16\" height=\"16\"/\u003e [Github](#sgithub)\n\n * \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/github.svg\" width=\"16\" height=\"16\"/\u003e [Github counter](#sgithubcount)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/github.svg\" width=\"16\" height=\"16\"/\u003e [Github gist](#sgithubgist)\n\n * \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/github.svg\" width=\"16\" height=\"16\"/\u003e [Github gist counter](#sgithubgistcount) \n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/github.svg\" width=\"16\" height=\"16\"/\u003e [Github repository](#sgithubrepo)\n\n * \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/github.svg\" width=\"16\" height=\"16\"/\u003e [Github repository counter](#sgithubrepocount) \n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/gmail.svg\" width=\"16\" height=\"16\"/\u003e [Gmail](#sgmail)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/google-bookmarks.svg\" width=\"16\" height=\"16\"/\u003e [Google Bookmarks](#sgooglebookmarks)\n\n### H\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/hacker-news.svg\" width=\"16\" height=\"16\"/\u003e [Hacker News](#shackernews)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/hatena.svg\" width=\"16\" height=\"16\"/\u003e [Hatena](#shatena)\n\n * \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/hatena.svg\" width=\"16\" height=\"16\"/\u003e [Hatena counter](#shatenacount)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/houzz.svg\" width=\"16\" height=\"16\"/\u003e [Houzz](#shouzz)\n\n### I\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/instapaper.svg\" width=\"16\" height=\"16\"/\u003e [Instapaper](#sinstapaper)\n\n## K\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/kakao.svg\" width=\"16\" height=\"16\"/\u003e [Kakao Story](#skakaostory)\n\n## L\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/line.svg\" width=\"16\" height=\"16\"/\u003e [Line](#sline)\n\n * \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/line.svg\" width=\"16\" height=\"16\"/\u003e [Line counter](#slinecount)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/linkedin.svg\" width=\"16\" height=\"16\"/\u003e [Linkedin](#slinkedin)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/livejournal.svg\" width=\"16\" height=\"16\"/\u003e [LiveJournal](#slivejournal)\n\n## M\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/mailru.svg\" width=\"16\" height=\"16\"/\u003e [MailRu](#smailru)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/mastodon.svg\" width=\"16\" height=\"16\"/\u003e [Mastodon](#smastodon)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/microsoftteams.svg\" width=\"16\" height=\"16\"/\u003e [Microsoft Teams](#smicrosoftteams)\n\n## O\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/odnoklassniki.svg\" width=\"16\" height=\"16\"/\u003e [Odnoklassniki](#sodnoklassniki)\n\n * \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/odnoklassniki.svg\" width=\"16\" height=\"16\"/\u003e [Odnoklassniki counter](#sodnoklassnikicount)\n\n## P\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/pinterest.svg\" width=\"16\" height=\"16\"/\u003e [Pinterest](#spinterest)\n\n * \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/pinterest.svg\" width=\"16\" height=\"16\"/\u003e [Pinterest counter](#spinterestcount)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/pocket.svg\" width=\"16\" height=\"16\"/\u003e [Pocket](#spocket)\n\n## Q\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/qzone.svg\" width=\"16\" height=\"16\"/\u003e [Qzone](#sqzone)\n\n## R\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/reddit.svg\" width=\"16\" height=\"16\"/\u003e [Reddit](#sreddit)\n\n * \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/reddit.svg\" width=\"16\" height=\"16\"/\u003e [Reddit counter](#sredditcount)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/renren.svg\" width=\"16\" height=\"16\"/\u003e [Renren](#srenren)\n\n## S\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/skype.svg\" width=\"16\" height=\"16\"/\u003e [Skype](#sskype)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/sms.svg\" width=\"16\" height=\"16\"/\u003e [Sms](#ssms)\n\n## T\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/telegram.svg\" width=\"16\" height=\"16\"/\u003e [Telegram](#stelegram)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/threema.svg\" width=\"16\" height=\"16\"/\u003e [Threema](#sthreema)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/trello.svg\" width=\"16\" height=\"16\"/\u003e [Trello](#strello)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/tumblr.svg\" width=\"16\" height=\"16\"/\u003e [Tumblr](#stumblr)\n\n * \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/tumblr.svg\" width=\"16\" height=\"16\"/\u003e [Tumblr counter](#stumblrcount)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/twitter.svg\" width=\"16\" height=\"16\"/\u003e [Twitter](#stwitter)\n\n## V\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/viber.svg\" width=\"16\" height=\"16\"/\u003e [Viber](#sviber)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/vkontakte.svg\" width=\"16\" height=\"16\"/\u003e [Vkontakte](#svkontakte)\n\n * \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/vkontakte.svg\" width=\"16\" height=\"16\"/\u003e [Vkontakte counter](#svkontaktecount)\n\n## W\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/weibo.svg\" width=\"16\" height=\"16\"/\u003e [Weibo](#sweibo)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/whatsapp.svg\" width=\"16\" height=\"16\"/\u003e [Whatsapp](#swhatsapp)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/wordpress.svg\" width=\"16\" height=\"16\"/\u003e [Wordpress](#swordpress)\n\n## X\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/xing.svg\" width=\"16\" height=\"16\"/\u003e [Xing](#sxing)\n\n## Y\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/yahoo.svg\" width=\"16\" height=\"16\"/\u003e [Yahoo](#syahoo)\n\n* \u003cimg src=\"https://raw.githubusercontent.com/webistomin/vue-socials/main/assets/icons/yammer.svg\" width=\"16\" height=\"16\"/\u003e [Yammer](#syammer)\n\n---\n\n### SBlogger\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-blogger\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-blogger\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SBlogger } from 'vue-socials'\n\n export default {\n name: 'SBloggerSharing',\n \n components: { SBlogger },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: { \n url: 'https://github.com/', \n title: 'Title', \n text: 'Text',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e **title** โ€“ your blogpost title \u003cbr /\u003e **text** โ€“ your blogpost content \u003cbr /\u003e \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SDevTo\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-dev-to\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-dev-to\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SDevTo } from 'vue-socials'\n\n export default {\n name: 'SDevToSharing',\n \n components: { SDevTo },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n title: 'Title',\n isPublished: false,\n tags: ['tag', 'tag2'],\n content: 'Text 1\\nText 2\\n{% wikipedia https://en.wikipedia.org/wiki/Wikipedia %}',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **title** โ€“ your blogpost title \u003cbr /\u003e **isPublished** โ€“ is your blogpost published \u003cbr /\u003e **tags** โ€“ hashtags for blogpost \u003cbr /\u003e **content** โ€“ your blogpost content \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SDiaspora\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-diaspora\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-diaspora\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SDiaspora } from 'vue-socials'\n\n export default {\n name: 'SDiasporaSharing',\n \n components: { SDiaspora },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n title: 'Title',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e**title** โ€“ your blogpost title \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SDouban\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-douban\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-douban\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SDouban } from 'vue-socials'\n\n export default {\n name: 'SDoubanSharing',\n \n components: { SDouban },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n title: 'Title',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 1100, height: 450, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e**title** โ€“ your blogpost title \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SEmail\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-email :share-options=\"shareOptions\"\u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-email\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SEmail } from 'vue-socials'\n\n export default {\n name: 'SEmailSharing',\n \n components: { SEmail },\n \n data() {\n return {\n shareOptions: {\n mail: 'google@gmail.com',\n cc: ['google1@gmail.com', 'google3@gmail.com'],\n bcc: ['google2@gmail.com', 'google4@gmail.com'],\n subject: 'Subject',\n body: 'Hello\\nWorld',\n },\n }\n },\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **mail** โ€“ e-mail recipient address \u003cbr /\u003e **subject** โ€“ subject of e-mail \u003cbr /\u003e **cc** โ€“ carbon copy e-mail address \u003cbr /\u003e **bcc** โ€“ blind carbon copy e-mail address \u003cbr /\u003e **body** โ€“ body of e-mail \u003cbr /\u003e | `{}`\n\n---\n\n### SEvernote\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-evernote\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-evernote\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SEvernote } from 'vue-socials'\n\n export default {\n name: 'SEvernoteSharing',\n \n components: { SEvernote },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n title: 'Title',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 800, height: 560, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e**title** โ€“ your blogpost title \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SFacebook\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-facebook\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-facebook\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SFacebook } from 'vue-socials'\n\n export default {\n name: 'SFacebookSharing',\n \n components: { SFacebook },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n quote: 'Quote',\n hashtag: '#Github',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 685, height: 600, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e **quote** โ€“ your blogpost quote \u003cbr /\u003e **hashtag** โ€“ your blogpost hashtag \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SFacebookCount\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-facebook-count\n :share-options=\"shareOptions\"\n @load=\"onLoad\"\n @error=\"onError\"\n @loading=\"onLoading\"\n \u003e\u003c/s-facebook-count\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SFacebookCount } from 'vue-socials'\n\n export default {\n name: 'SFacebookCountSharing',\n \n components: { SFacebookCount },\n \n data() {\n return {\n tag: 'span',\n shareOptions: {\n id: 'https://github.com/',\n fields: ['id', 'og_object'],\n accessToken: '',\n },\n }\n },\n \n methods: {\n onLoad() {},\n onError() {},\n onLoading() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **id** โ€“ the URL you want to share \u003cbr /\u003e **accessToken** โ€“ your facebook access token \u003cbr /\u003e **fields** โ€“ a comma-separated list of fields you want to request. \u003cbr /\u003e | `{}`\n`tag` | `string` | Dynamic HTML tag or component | `span`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`load` | the request has finished successfully | \n`error` | the request has finished with error |\n`loading` | the request has started |\n\n**โš ๏ธ Warning**\n\nThis component uses `JSONP` so the content won't be available during `SSR`.\n\n---\n\n### SFacebookMessenger\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-facebook-messenger\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-facebook-messenger\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SFacebookMessenger } from 'vue-socials'\n\n export default {\n name: 'SFacebookMessengerSharing',\n \n components: { SFacebookMessenger },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n redirectUri: 'https://www.domain.com/',\n appId: 123456789,\n to: undefined,\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 685, height: 600, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e **redirectUri** โ€“ The URL to redirect to after a person clicks a button on the dialog. \u003cbr /\u003e **appId** โ€“ Your app's unique identifier. \u003cbr /\u003e **to** โ€“ A user ID of a recipient. Once the dialog comes up, the sender can specify additional people as recipients. \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SFacebookWorkplace\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-facebook-workplace\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-facebook-workplace\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SFacebookWorkplace } from 'vue-socials'\n\n export default {\n name: 'SFacebookWorkplaceSharing',\n \n components: { SFacebookWorkplace },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 685, height: 600, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SFlipBoard\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-flip-board\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-flip-board\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SFlipBoard } from 'vue-socials'\n\n export default {\n name: 'SFlipBoardSharing',\n \n components: { SFlipBoard },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n title: 'Title',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 834, height: 572, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e**title** โ€“ your blogpost title \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SGithub\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-github\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-github\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SGithub } from 'vue-socials'\n\n export default {\n name: 'SGithubSharing',\n \n components: { SGithub },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n username: 'webistomin',\n type: 'profile',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 834, height: 572, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **username** โ€“ your GitHub username \u003cbr /\u003e **type** โ€“ share link type (sponsor, follow, profile) \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SGithubCount\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-github-count\n :share-options=\"shareOptions\"\n @load=\"onLoad\"\n @error=\"onError\"\n @loading=\"onLoading\"\n \u003e\u003c/s-github-count\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SGithubCount } from 'vue-socials'\n\n export default {\n name: 'SGithubCountSharing',\n \n components: { SGithubCount },\n \n data() {\n return {\n tag: 'span',\n shareOptions: {\n username: 'webistomin',\n type: 'follow',\n },\n }\n },\n \n methods: {\n onLoad() {},\n onError() {},\n onLoading() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **username** โ€“ your GitHub username \u003cbr /\u003e **type** โ€“ share link type (follow) \u003cbr /\u003e | `{}`\n`tag` | `string` | Dynamic HTML tag or component | `span`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`load` | the request has finished successfully | \n`error` | the request has finished with error |\n`loading` | the request has started |\n\n**โš ๏ธ Warning**\n\nThis component uses `JSONP` so the content won't be available during `SSR`.\n\n---\n\n### SGithubGist\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-github-gist\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-github-gist\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SGithubGist } from 'vue-socials'\n\n export default {\n name: 'SGithubGistSharing',\n \n components: { SGithubGist },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n username: 'ai',\n gistId: 'e3683b03ba936ade91d33dbc721cd6d8',\n type: 'star',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 834, height: 572, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **username** โ€“ your gist username \u003cbr /\u003e **gistId** โ€“ your gist id \u003cbr /\u003e **type** โ€“ share link type (gist, star, fork, download) \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SGithubGistCount\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-github-gist-count\n :share-options=\"shareOptions\"\n @load=\"onLoad\"\n @error=\"onError\"\n @loading=\"onLoading\"\n \u003e\u003c/s-github-gist-count\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SGithubGistCount } from 'vue-socials'\n\n export default {\n name: 'SGithubGistCountSharing',\n \n components: { SGithubGistCount },\n \n data() {\n return {\n tag: 'span',\n shareOptions: {\n gistId: 'e3683b03ba936ade91d33dbc721cd6d8',\n type: 'fork',\n },\n }\n },\n \n methods: {\n onLoad() {},\n onError() {},\n onLoading() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **gistId** โ€“ your gist id \u003cbr /\u003e **type** โ€“ share link type (fork) \u003cbr /\u003e | `{}`\n`tag` | `string` | Dynamic HTML tag or component | `span`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`load` | the request has finished successfully | \n`error` | the request has finished with error |\n`loading` | the request has started |\n\n**โš ๏ธ Warning**\n\nThis component uses `JSONP` so the content won't be available during `SSR`.\n\n---\n\n### SGithubRepo\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-github-repo\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-github-repo\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SGithubRepo } from 'vue-socials'\n\n export default {\n name: 'SGithubRepoSharing',\n \n components: { SGithubRepo },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n username: 'webistomin',\n repository: 'vue-socials',\n type: 'fork',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 834, height: 572, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **username** โ€“ your gist username \u003cbr /\u003e **repository** โ€“ your repository name \u003cbr /\u003e **type** โ€“ share link type (repo, watch, star, fork, download, issue, pr, template) \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SGithubRepoCount\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-github-repo-count\n :share-options=\"shareOptions\"\n @load=\"onLoad\"\n @error=\"onError\"\n @loading=\"onLoading\"\n \u003e\u003c/s-github-repo-count\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SGithubRepoCount } from 'vue-socials'\n\n export default {\n name: 'SGithubRepoCountSharing',\n \n components: { SGithubRepoCount },\n \n data() {\n return {\n tag: 'span',\n shareOptions: {\n username: 'webistomin',\n repository: 'nanogram.js',\n type: 'fork',\n },\n }\n },\n \n methods: {\n onLoad() {},\n onError() {},\n onLoading() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **username** โ€“ your github username \u003cbr /\u003e **repository** โ€“ your github repository \u003cbr /\u003e **type** โ€“ share link type (watch, type, fork, issues) \u003cbr /\u003e | `{}`\n`tag` | `string` | Dynamic HTML tag or component | `span`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`load` | the request has finished successfully | \n`error` | the request has finished with error |\n`loading` | the request has started |\n\n**โš ๏ธ Warning**\n\nThis component uses `JSONP` so the content won't be available during `SSR`.\n\n---\n\n### SGmail\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-gmail\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-gmail\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SGmail } from 'vue-socials'\n\n export default {\n name: 'SGmailSharing',\n \n components: { SGmail },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n to: 'google@gmail.com',\n su: 'Title',\n cc: 'google1@gmail.com',\n bcc: 'google2@gmail.com',\n body: 'Hello\\nWorld',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **to** โ€“ e-mail recipient address \u003cbr /\u003e **su** โ€“ subject of e-mail \u003cbr /\u003e **cc** โ€“ carbon copy e-mail address \u003cbr /\u003e **bcc** โ€“ blind carbon copy e-mail address \u003cbr /\u003e **body** โ€“ body of e-mail \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SGoogleBookmarks\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-google-bookmarks\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-google-bookmarks\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SGoogleBookmarks } from 'vue-socials'\n\n export default {\n name: 'SGoogleBookmarksSharing',\n \n components: { SGoogleBookmarks },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n title: 'Title',\n annotation: 'Annotation',\n tags: ['tag'],\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **title** โ€“ your bookmark title \u003cbr /\u003e **url** โ€“ your url \u003cbr /\u003e **annotation** โ€“ your text \u003cbr /\u003e **tags** โ€“ your keywords or hashtags \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SHackerNews\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-hacker-news\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-hacker-news\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SHackerNews } from 'vue-socials'\n\n export default {\n name: 'SHackerNewsSharing',\n \n components: { SHackerNews },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n title: 'Title',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **title** โ€“ your bookmark title \u003cbr /\u003e **url** โ€“ your url \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SHatena\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-hatena\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-hatena\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SHatena } from 'vue-socials'\n\n export default {\n name: 'SHatenaSharing',\n \n components: { SHatena },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n title: 'Title',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **title** โ€“ your bookmark title \u003cbr /\u003e **url** โ€“ your url \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SHatenaCount\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-hatena-count\n :share-options=\"shareOptions\"\n @load=\"onLoad\"\n @error=\"onError\"\n @loading=\"onLoading\"\n \u003e\u003c/s-hatena-count\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SHatenaCount } from 'vue-socials'\n\n export default {\n name: 'SHatenaCountSharing',\n \n components: { SHatenaCount },\n \n data() {\n return {\n tag: 'span',\n shareOptions: {\n url: 'https://github.com/',\n },\n }\n },\n \n methods: {\n onLoad() {},\n onError() {},\n onLoading() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e | `{}`\n`tag` | `string` | Dynamic HTML tag or component | `span`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`load` | the request has finished successfully | \n`error` | the request has finished with error |\n`loading` | the request has started |\n\n**โš ๏ธ Warning**\n\nThis component uses `JSONP` so the content won't be available during `SSR`.\n\n---\n\n### SHouzz\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-houzz\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-houzz\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SHouzz } from 'vue-socials'\n\n export default {\n name: 'SHouzzSharing',\n \n components: { SHouzz },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n id: '123',\n image: 'url',\n title: 'Title',\n category: ['category'],\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 1100, height: 700, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ Canonical URL of your product. If you already have products listed in Houzz, make sure the URLs match exactly to prevent duplicate listings and maintain accuracy of the Ideabook count. \u003cbr /\u003e **id** โ€“ A unique identifier that verifies you own this web page. \u003cbr /\u003e **image** โ€“ URL of hi-res product image. \u003cbr /\u003e **title** โ€“ Title of the product. \u003cbr /\u003e **category** โ€“ Keywords to help categorize the product. (ie. 'Wall Sconces') \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SInstaPaper\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-insta-paper\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-insta-paper\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SInstaPaper } from 'vue-socials'\n\n export default {\n name: 'SInstaPaperSharing',\n \n components: { SInstaPaper },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 600, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SKakaoStory\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-kakao-story\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-kakao-story\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SKakaoStory } from 'vue-socials'\n\n export default {\n name: 'SKakaoStorySharing',\n \n components: { SKakaoStory },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n text: 'Text',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e **text** โ€“ your blogpost text \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SLine\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-line\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-line\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SLine } from 'vue-socials'\n\n export default {\n name: 'SLineSharing',\n \n components: { SLine },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n text: 'Text',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e **text** โ€“ your blogpost text \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SLineCount\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-line-count\n :share-options=\"shareOptions\"\n @load=\"onLoad\"\n @error=\"onError\"\n @loading=\"onLoading\"\n \u003e\u003c/s-line-count\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SLineCount } from 'vue-socials'\n\n export default {\n name: 'SLineCountSharing',\n \n components: { SLineCount },\n \n data() {\n return {\n tag: 'span',\n shareOptions: {\n url: 'https://github.com/',\n },\n }\n },\n \n methods: {\n onLoad() {},\n onError() {},\n onLoading() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e | `{}`\n`tag` | `string` | Dynamic HTML tag or component | `span`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`load` | the request has finished successfully | \n`error` | the request has finished with error |\n`loading` | the request has started |\n\n---\n\n### SLinkedIn\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-linked-in\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-linked-in\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SLinkedIn } from 'vue-socials'\n\n export default {\n name: 'SLinkedInSharing',\n \n components: { SLinkedIn },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SLiveJournal\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-live-journal\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-live-journal\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SLiveJournal } from 'vue-socials'\n\n export default {\n name: 'SLiveJournalSharing',\n \n components: { SLiveJournal },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n subject: 'Title',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e **subject** โ€“ your title \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SMailRu\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-mail-ru\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-mail-ru\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SMailRu } from 'vue-socials'\n\n export default {\n name: 'SMailRuSharing',\n \n components: { SMailRu },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n title: 'Title',\n description: 'Description',\n image: '',\n swfUrl: '',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e **title** โ€“ your title \u003cbr /\u003e **description** โ€“ your description \u003cbr /\u003e **image** โ€“ your image \u003cbr /\u003e **swfUrl** โ€“ your flash-player with video \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SMastodon\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-mastodon\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-mastodon\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SMastodon } from 'vue-socials'\n\n export default {\n name: 'SSMastodonSharing',\n \n components: { SMastodon },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n domain: 'https://mas.to',\n url: 'https://github.com',\n text: 'Hello, world!',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ |--------------------------------------------------------------------------------------------------------------------------------------------------------| ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 700, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **domain** โ€“ the mastodon domain \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e **text** โ€“ your text \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SMicrosoftTeams\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-microsoft-teams\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-microsoft-teams\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SMicrosoftTeams } from 'vue-socials'\n\n export default {\n name: 'SMicrosoftTeamsSharing',\n \n components: { SMicrosoftTeams },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n preview: true,\n text: 'Text',\n title: 'Title',\n instruction: 'Instruction',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e **title** โ€“ Default Text to be inserted in the assignments \"Title\" field (50 character limit) \u003cbr /\u003e **text** โ€“ Default Text to be inserted before the link in the message compose box (200 character limit) \u003cbr /\u003e **preview** โ€“ Whether or not to show a preview of the content to share.\u003cbr /\u003e **instruction** โ€“ Default Text to be inserted in the assignments \"Instructions\" field (200 character limit) \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SOdnoklassniki\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-odnoklassniki\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-odnoklassniki\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SOdnoklassniki } from 'vue-socials'\n\n export default {\n name: 'SOdnoklassnikiSharing',\n \n components: { SOdnoklassniki },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SOdnoklassnikiCount\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-odnoklassniki-count\n :tag=\"tag\"\n :share-options=\"shareOptions\"\n @load=\"onLoad\"\n @error=\"onError\"\n @loading=\"onLoading\"\n \u003e\u003c/s-odnoklassniki-count\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SOdnoklassnikiCount } from 'vue-socials'\n\n export default {\n name: 'SOdnoklassnikiCountSharing',\n \n components: { SOdnoklassnikiCount },\n \n data() {\n return {\n tag: 'span',\n shareOptions: {\n ref: 'https://github.com/',\n },\n }\n },\n \n methods: {\n onLoad() {},\n onError() {},\n onLoading() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **ref** โ€“ the URL you want to share \u003cbr /\u003e | `{}`\n`tag` | `string` | Dynamic HTML tag or component | `span`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`load` | the request has finished successfully | \n`error` | the request has finished with error |\n`loading` | the request has started |\n\n**โš ๏ธ Warning**\n\nThis component uses `JSONP` so the content won't be available during `SSR`.\n\n---\n\n### SPinterest\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-pinterest\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-pinterest\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SPinterest } from 'vue-socials'\n\n export default {\n name: 'SPinterestSharing',\n \n components: { SPinterest },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n media: '',\n description: 'Description',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e **media** โ€“ Overrides the image and substitutes a different image in the Pin Create form. \u003cbr /\u003e **description** โ€“ Overrides the default image description and substitutes an image description you provide. \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SPinterestCount\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-pinterest-count\n :tag=\"tag\"\n :share-options=\"shareOptions\"\n @load=\"onLoad\"\n @error=\"onError\"\n @loading=\"onLoading\"\n \u003e\u003c/s-pinterest-count\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SPinterestCount } from 'vue-socials'\n\n export default {\n name: 'SPinterestCountSharing',\n \n components: { SPinterestCount },\n \n data() {\n return {\n tag: 'span',\n shareOptions: {\n url: 'https://github.com/',\n },\n }\n },\n \n methods: {\n onLoad() {},\n onError() {},\n onLoading() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e | `{}`\n`tag` | `string` | Dynamic HTML tag or component | `span`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`load` | the request has finished successfully | \n`error` | the request has finished with error |\n`loading` | the request has started |\n\n**โš ๏ธ Warning**\n\nThis component uses `JSONP` so the content won't be available during `SSR`.\n\n---\n\n### SPocket\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-pocket\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-pocket\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SPocket } from 'vue-socials'\n\n export default {\n name: 'SPocketSharing',\n \n components: { SPocket },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SQZone\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-q-zone\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-q-zone\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SQZone } from 'vue-socials'\n\n export default {\n name: 'SQZoneSharing',\n \n components: { SQZone },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n title: 'Title',\n summary: 'Summary',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e **title** โ€“ your title \u003cbr /\u003e **summary** โ€“ your text \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SReddit\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-reddit\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-reddit\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SReddit } from 'vue-socials'\n\n export default {\n name: 'SRedditSharing',\n \n components: { SReddit },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n title: 'Title',\n text: 'Hello World!',\n selftext: true,\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e **title** โ€“ your title \u003cbr /\u003e **text** โ€“ your text \u003cbr /\u003e **selftext** โ€“ sets the displayed tab to the self post tab \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SRedditCount\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-reddit-count\n :tag=\"tag\"\n :share-options=\"shareOptions\"\n @load=\"onLoad\"\n @error=\"onError\"\n @loading=\"onLoading\"\n \u003e\u003c/s-reddit-count\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SRedditCount } from 'vue-socials'\n\n export default {\n name: 'SRedditCountSharing',\n \n components: { SRedditCount },\n \n data() {\n return {\n tag: 'span',\n shareOptions: {\n url: 'https://github.com/',\n },\n }\n },\n \n methods: {\n onLoad() {},\n onError() {},\n onLoading() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e | `{}`\n`tag` | `string` | Dynamic HTML tag or component | `span`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`load` | the request has finished successfully | \n`error` | the request has finished with error |\n`loading` | the request has started |\n\n**โš ๏ธ Warning**\n\nThis component uses `JSONP` so the content won't be available during `SSR`.\n\n---\n\n### SRenRen\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-ren-ren\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-ren-ren\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SRenRen } from 'vue-socials'\n\n export default {\n name: 'SRenRenSharing',\n \n components: { SRenRen },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n srcUrl: 'https://github.com/',\n resourceUrl: 'https://github.com/',\n title: 'Title',\n description: 'Description',\n pic: '',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **srcUrl** โ€“ the URL you want to share \u003cbr /\u003e **resourceUrl** โ€“ the source Url of the shared resource, the default is the Referer in the header \u003cbr /\u003e **title** โ€“ your title \u003cbr /\u003e **description** โ€“ your text \u003cbr /\u003e **pic** โ€“ your image \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SSkype\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-skype\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-skype\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SSkype } from 'vue-socials'\n\n export default {\n name: 'SSkypeSharing',\n \n components: { SSkype },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n text: 'Text',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e **text** โ€“ your text \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SSms\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-sms\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-sms\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SSms } from 'vue-socials'\n\n export default {\n name: 'SSmsSharing',\n \n components: { SSms },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n number: '+1(999)999-99-99',\n body: 'Hello world!',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **number** โ€“ your number \u003cbr /\u003e **body** โ€“ your text \u003cbr /\u003e | `{}`\n\n---\n\n### STelegram\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-telegram\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-telegram\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { STelegram } from 'vue-socials'\n\n export default {\n name: 'STelegramSharing',\n \n components: { STelegram },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n text: 'Text',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e **text** โ€“ your text \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SThreema\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-threema\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-threema\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SThreema } from 'vue-socials'\n\n export default {\n name: 'SThreemaSharing',\n \n components: { SThreema },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n id: '',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e **id** โ€“ your id \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### STrello\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-trello\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-trello\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { STrello } from 'vue-socials'\n\n export default {\n name: 'STrelloSharing',\n \n components: { STrello },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n name: 'Name',\n description: 'Description',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e **name** โ€“ your card name \u003cbr /\u003e **description** โ€“ your card description \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### STumblr\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-tumblr\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-tumblr\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { STumblr } from 'vue-socials'\n\n export default {\n name: 'STumblrSharing',\n \n components: { STumblr },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n canonicalUrl: 'https://github.com/',\n title: 'Title',\n caption: 'Caption',\n tags: ['hash', 'tag'],\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **canonicalUrl** โ€“ the URL you want to share \u003cbr /\u003e **title** โ€“ title of the Text post \u003cbr /\u003e **caption** โ€“ post caption \u003cbr /\u003e **tags** โ€“ list of tags \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### STumblrCount\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-tumblr-count\n :tag=\"tag\"\n :share-options=\"shareOptions\"\n @load=\"onLoad\"\n @error=\"onError\"\n @loading=\"onLoading\"\n \u003e\u003c/s-tumblr-count\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { STumblrCount } from 'vue-socials'\n\n export default {\n name: 'STumblrCountSharing',\n \n components: { STumblrCount },\n \n data() {\n return {\n tag: 'span',\n shareOptions: {\n url: 'https://github.com/',\n },\n }\n },\n \n methods: {\n onLoad() {},\n onError() {},\n onLoading() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e | `{}`\n`tag` | `string` | Dynamic HTML tag or component | `span`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`load` | the request has finished successfully | \n`error` | the request has finished with error |\n`loading` | the request has started |\n\n**โš ๏ธ Warning**\n\nThis component uses `JSONP` so the content won't be available during `SSR`.\n\n---\n\n### STwitter\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-twitter\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-twitter\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { STwitter } from 'vue-socials'\n\n export default {\n name: 'STwitterSharing',\n \n components: { STwitter },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n text: 'Hello world',\n hashtags: ['hash', 'tag'],\n via: 'twitterdev',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e **text** โ€“ post text \u003cbr /\u003e **via** โ€“ username \u003cbr /\u003e **hashtags** โ€“ list of tags \u003cbr /\u003e | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SViber\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-viber\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-viber\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SViber } from 'vue-socials'\n\n export default {\n name: 'SViberSharing',\n \n components: { SViber },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n text: 'Text',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e **text** โ€“ post text | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SVkontakte\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-vkontakte\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-vkontakte\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SVkontakte } from 'vue-socials'\n\n export default {\n name: 'SVkontakteSharing',\n \n components: { SVkontakte },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n title: 'Title',\n image: '',\n noParse: false,\n noVkLinks: false,\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e **title** โ€“ post title \u003cbr /\u003e **image** โ€“ image URL \u003cbr /\u003e **noParse** โ€“ don't do additional request for missing information \u003cbr /\u003e **noVkLinks** โ€“ don't add active profile links | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SVkontakteCount\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-vkontakte-count\n :tag=\"tag\"\n :share-options=\"shareOptions\"\n @load=\"onLoad\"\n @error=\"onError\"\n @loading=\"onLoading\"\n \u003e\u003c/s-vkontakte-count\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SVkontakteCount } from 'vue-socials'\n\n export default {\n name: 'SVkontakteCountSharing',\n \n components: { SVkontakteCount },\n \n data() {\n return {\n tag: 'span',\n shareOptions: {\n url: 'https://github.com/',\n },\n }\n },\n \n methods: {\n onLoad() {},\n onError() {},\n onLoading() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e | `{}`\n`tag` | `string` | Dynamic HTML tag or component | `span`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`load` | the request has finished successfully | \n`error` | the request has finished with error |\n`loading` | the request has started |\n\n**โš ๏ธ Warning**\n\nThis component uses `JSONP` so the content won't be available during `SSR`.\n\n---\n\n### SWeibo\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-weibo\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-weibo\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SWeibo } from 'vue-socials'\n\n export default {\n name: 'SWeiboSharing',\n \n components: { SWeibo },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n url: 'https://github.com/',\n title: 'Title',\n appkey: '',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **url** โ€“ the URL you want to share \u003cbr /\u003e **title** โ€“ post title \u003cbr /\u003e **appkey** โ€“ your app key | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SWhatsApp\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-whats-app\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-whats-app\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SWhatsApp } from 'vue-socials'\n\n export default {\n name: 'SWhatsAppSharing',\n \n components: { SWhatsApp },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n number: '1(999)999-99-99',\n text: 'Hello world!',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features of the new window.](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features) | `{ width: 600, height: 540, }`\n`shareOptions` | `object` | Your share link parameters: \u003cbr /\u003e **number** โ€“ your number \u003cbr /\u003e **text** โ€“ post text | `{}`\n`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`\n\n**Events**\n\n| Event name | Usage |\n| ------ | ------ |\n`popup-open` | `window.open()` has been opened |\n`popup-close` | `window.open()` has been closed |\n`popup-block` | `window.open()` has been blocked |\n`popup-focus` | `window.open()` has been focused |\n\n---\n\n### SWordPress\n\n**Usage**\n\n```vue\n\u003ctemplate\u003e\n \u003cs-word-press\n :window-features=\"windowFeatures\"\n :share-options=\"shareOptions\"\n :use-native-behavior=\"useNativeBehavior\"\n @popup-close=\"onClose\"\n @popup-open=\"onOpen\"\n @popup-block=\"onBlock\"\n @popup-focus=\"onFocus\"\n \u003e\n \u003c!-- your icon component --\u003e\n \u003c/s-word-press\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n import { SWordPress } from 'vue-socials'\n\n export default {\n name: 'SWordPressSharing',\n \n components: { SWordPress },\n \n data() {\n return {\n windowFeatures: {},\n shareOptions: {\n domain: 'https://wordpress.org',\n url: 'https://github.com',\n title: 'Title',\n text: 'Text',\n image: '',\n },\n useNativeBehavior: false,\n }\n },\n \n methods: {\n onClose() {},\n onOpen() {},\n onBlock() {},\n onFocus() {},\n }\n };\n\u003c/script\u003e\n```\n\n**Props**\n\n| Prop | Type | Description | Default value |\n| ------ | ------ | ------ | ------ |\n`windowFeatures` | `object` | Pass options to `window.open()`. [Requested features ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebistomin%2Fvue-socials","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebistomin%2Fvue-socials","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebistomin%2Fvue-socials/lists"}