Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/webistomin/vue-socials
:speech_balloon: Social media share buttons and counts for Vue.js
https://github.com/webistomin/vue-socials
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
Last synced: 3 days ago
JSON representation
:speech_balloon: Social media share buttons and counts for Vue.js
- Host: GitHub
- URL: https://github.com/webistomin/vue-socials
- Owner: webistomin
- License: mit
- Created: 2020-12-15T19:37:49.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-01-18T12:07:35.000Z (11 months ago)
- Last Synced: 2024-04-13T21:07:17.383Z (8 months ago)
- 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
- Language: TypeScript
- Homepage: https://vue-socials.vercel.app/
- Size: 2.9 MB
- Stars: 46
- Watchers: 2
- Forks: 7
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Vue Socials
💬 Social media share buttons and counts for Vue.js.
Explore website »
Key Features •
Installation •
Documentation •
Browsers support •
License •
Support the project •
Contributing
## Key Features ✨
* **50+** reusable components
* **Small** [`~1.3KB` component average size](https://bundlephobia.com/package/vue-socials) (minified and gzipped)
* Fully **tree-shakeable**
* **No dependencies**
* **No SDK**
* **Don't track** the user
* **Completely** unstyled
* Built with **a11y** in mind
* **Support** Vue 2 & Vue 3
* **Support** SSR
* Each component exposing a **single slot** that gives you complete control over what should actually be rendered
## Installation 🚀
**npm**
```shell
# Vue 2
npm install vue-socials@1
# Vue 3
npm install vue-socials
```
**yarn**
```shell
# Vue 2
yarn add vue-socials@1
# Vue 3
yarn add vue-socials
```
**Import all components (not recommended)**
```js
/**
* Vue 2
*/
import Vue from 'vue'
import VueSocials from 'vue-socials';
Vue.use(VueSocials)
/**
* Vue 3
*/
import { createApp } from 'vue'
import VueSocials from 'vue-socials';
import App from './App.vue'
const app = createApp(App)
app.use(VueSocials)
```
**Import only specific component**
```js
/**
* Vue 2
*/
import Vue from 'vue'
import { SGithub } from 'vue-socials';
Vue.component('SGithub', SGithub)
/**
* Vue 3
*/
import { createApp } from 'vue'
import { SGithub } from 'vue-socials';
import App from './App.vue'
const app = createApp(App)
app.component('SGithub', SGithub)
```
## Documentation 🤗
Browse [online documentation here](https://vue-socials.vercel.app/)
### Socials
### B
* 
[Blogger](#sblogger)
### D
* 
[DevTo](#sdevto)
* 
[Diaspora](#sdiaspora)
* 
[Douban](#sdouban)
### E
* 
[Email](#semail)
* 
[Evernote](#severnote)
### F
* 
[Facebook](#sfacebook)
* [Facebook counter](#sfacebookcount)
* 
[Facebook Messenger](#sfacebookmessenger)
* 
[Facebook Workplace](#sfacebookworkplace)
* 
[Flipboard](#sflipboard)
### G
* 
[Github](#sgithub)
* [Github counter](#sgithubcount)
* [Github gist](#sgithubgist)
* [Github gist counter](#sgithubgistcount)
* [Github repository](#sgithubrepo)
* [Github repository counter](#sgithubrepocount)
* 
[Gmail](#sgmail)
* 
[Google Bookmarks](#sgooglebookmarks)
### H
* 
[Hacker News](#shackernews)
* 
[Hatena](#shatena)
* [Hatena counter](#shatenacount)
* 
[Houzz](#shouzz)
### I
* 
[Instapaper](#sinstapaper)
## K
* 
[Kakao Story](#skakaostory)
## L
* 
[Line](#sline)
* [Line counter](#slinecount)
* 
[Linkedin](#slinkedin)
* 
[LiveJournal](#slivejournal)
## M
* 
[MailRu](#smailru)
* 
[Mastodon](#smastodon)
* 
[Microsoft Teams](#smicrosoftteams)
## O
* 
[Odnoklassniki](#sodnoklassniki)
* [Odnoklassniki counter](#sodnoklassnikicount)
## P
* 
[Pinterest](#spinterest)
* [Pinterest counter](#spinterestcount)
* 
[Pocket](#spocket)
## Q
* 
[Qzone](#sqzone)
## R
* 
[Reddit](#sreddit)
* [Reddit counter](#sredditcount)
* 
[Renren](#srenren)
## S
* 
[Skype](#sskype)
* 
[Sms](#ssms)
## T
* 
[Telegram](#stelegram)
* 
[Threema](#sthreema)
* 
[Trello](#strello)
* 
[Tumblr](#stumblr)
* [Tumblr counter](#stumblrcount)
* 
[Twitter](#stwitter)
## V
* 
[Viber](#sviber)
* 
[Vkontakte](#svkontakte)
* [Vkontakte counter](#svkontaktecount)
## W
* 
[Weibo](#sweibo)
* 
[Whatsapp](#swhatsapp)
* 
[Wordpress](#swordpress)
## X
* 
[Xing](#sxing)
## Y
* 
[Yahoo](#syahoo)
* 
[Yammer](#syammer)
---
### SBlogger
**Usage**
```vue
import { SBlogger } from 'vue-socials'
export default {
name: 'SBloggerSharing',
components: { SBlogger },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
title: 'Title',
text: 'Text',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**title** – your blogpost title
**text** – your blogpost content
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SDevTo
**Usage**
```vue
import { SDevTo } from 'vue-socials'
export default {
name: 'SDevToSharing',
components: { SDevTo },
data() {
return {
windowFeatures: {},
shareOptions: {
title: 'Title',
isPublished: false,
tags: ['tag', 'tag2'],
content: 'Text 1\nText 2\n{% wikipedia https://en.wikipedia.org/wiki/Wikipedia %}',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**title** – your blogpost title
**isPublished** – is your blogpost published
**tags** – hashtags for blogpost
**content** – your blogpost content
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SDiaspora
**Usage**
```vue
import { SDiaspora } from 'vue-socials'
export default {
name: 'SDiasporaSharing',
components: { SDiaspora },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
title: 'Title',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**title** – your blogpost title
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SDouban
**Usage**
```vue
import { SDouban } from 'vue-socials'
export default {
name: 'SDoubanSharing',
components: { SDouban },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
title: 'Title',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**title** – your blogpost title
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SEmail
**Usage**
```vue
import { SEmail } from 'vue-socials'
export default {
name: 'SEmailSharing',
components: { SEmail },
data() {
return {
shareOptions: {
mail: '[email protected]',
cc: ['[email protected]', '[email protected]'],
bcc: ['[email protected]', '[email protected]'],
subject: 'Subject',
body: 'Hello\nWorld',
},
}
},
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`shareOptions` | `object` | Your share link parameters:
**mail** – e-mail recipient address
**subject** – subject of e-mail
**cc** – carbon copy e-mail address
**bcc** – blind carbon copy e-mail address
**body** – body of e-mail
| `{}`
---
### SEvernote
**Usage**
```vue
import { SEvernote } from 'vue-socials'
export default {
name: 'SEvernoteSharing',
components: { SEvernote },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
title: 'Title',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**title** – your blogpost title
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SFacebook
**Usage**
```vue
import { SFacebook } from 'vue-socials'
export default {
name: 'SFacebookSharing',
components: { SFacebook },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
quote: 'Quote',
hashtag: '#Github',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**quote** – your blogpost quote
**hashtag** – your blogpost hashtag
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SFacebookCount
**Usage**
```vue
import { SFacebookCount } from 'vue-socials'
export default {
name: 'SFacebookCountSharing',
components: { SFacebookCount },
data() {
return {
tag: 'span',
shareOptions: {
id: 'https://github.com/',
fields: ['id', 'og_object'],
accessToken: '',
},
}
},
methods: {
onLoad() {},
onError() {},
onLoading() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`shareOptions` | `object` | Your share link parameters:
**id** – the URL you want to share
**accessToken** – your facebook access token
**fields** – a comma-separated list of fields you want to request.
| `{}`
`tag` | `string` | Dynamic HTML tag or component | `span`
**Events**
| Event name | Usage |
| ------ | ------ |
`load` | the request has finished successfully |
`error` | the request has finished with error |
`loading` | the request has started |
**⚠️ Warning**
This component uses `JSONP` so the content won't be available during `SSR`.
---
### SFacebookMessenger
**Usage**
```vue
import { SFacebookMessenger } from 'vue-socials'
export default {
name: 'SFacebookMessengerSharing',
components: { SFacebookMessenger },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
redirectUri: 'https://www.domain.com/',
appId: 123456789,
to: undefined,
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**redirectUri** – The URL to redirect to after a person clicks a button on the dialog.
**appId** – Your app's unique identifier.
**to** – A user ID of a recipient. Once the dialog comes up, the sender can specify additional people as recipients.
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SFacebookWorkplace
**Usage**
```vue
import { SFacebookWorkplace } from 'vue-socials'
export default {
name: 'SFacebookWorkplaceSharing',
components: { SFacebookWorkplace },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SFlipBoard
**Usage**
```vue
import { SFlipBoard } from 'vue-socials'
export default {
name: 'SFlipBoardSharing',
components: { SFlipBoard },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
title: 'Title',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**title** – your blogpost title
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SGithub
**Usage**
```vue
import { SGithub } from 'vue-socials'
export default {
name: 'SGithubSharing',
components: { SGithub },
data() {
return {
windowFeatures: {},
shareOptions: {
username: 'webistomin',
type: 'profile',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**username** – your GitHub username
**type** – share link type (sponsor, follow, profile)
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SGithubCount
**Usage**
```vue
import { SGithubCount } from 'vue-socials'
export default {
name: 'SGithubCountSharing',
components: { SGithubCount },
data() {
return {
tag: 'span',
shareOptions: {
username: 'webistomin',
type: 'follow',
},
}
},
methods: {
onLoad() {},
onError() {},
onLoading() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`shareOptions` | `object` | Your share link parameters:
**username** – your GitHub username
**type** – share link type (follow)
| `{}`
`tag` | `string` | Dynamic HTML tag or component | `span`
**Events**
| Event name | Usage |
| ------ | ------ |
`load` | the request has finished successfully |
`error` | the request has finished with error |
`loading` | the request has started |
**⚠️ Warning**
This component uses `JSONP` so the content won't be available during `SSR`.
---
### SGithubGist
**Usage**
```vue
import { SGithubGist } from 'vue-socials'
export default {
name: 'SGithubGistSharing',
components: { SGithubGist },
data() {
return {
windowFeatures: {},
shareOptions: {
username: 'ai',
gistId: 'e3683b03ba936ade91d33dbc721cd6d8',
type: 'star',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**username** – your gist username
**gistId** – your gist id
**type** – share link type (gist, star, fork, download)
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SGithubGistCount
**Usage**
```vue
import { SGithubGistCount } from 'vue-socials'
export default {
name: 'SGithubGistCountSharing',
components: { SGithubGistCount },
data() {
return {
tag: 'span',
shareOptions: {
gistId: 'e3683b03ba936ade91d33dbc721cd6d8',
type: 'fork',
},
}
},
methods: {
onLoad() {},
onError() {},
onLoading() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`shareOptions` | `object` | Your share link parameters:
**gistId** – your gist id
**type** – share link type (fork)
| `{}`
`tag` | `string` | Dynamic HTML tag or component | `span`
**Events**
| Event name | Usage |
| ------ | ------ |
`load` | the request has finished successfully |
`error` | the request has finished with error |
`loading` | the request has started |
**⚠️ Warning**
This component uses `JSONP` so the content won't be available during `SSR`.
---
### SGithubRepo
**Usage**
```vue
import { SGithubRepo } from 'vue-socials'
export default {
name: 'SGithubRepoSharing',
components: { SGithubRepo },
data() {
return {
windowFeatures: {},
shareOptions: {
username: 'webistomin',
repository: 'vue-socials',
type: 'fork',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**username** – your gist username
**repository** – your repository name
**type** – share link type (repo, watch, star, fork, download, issue, pr, template)
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SGithubRepoCount
**Usage**
```vue
import { SGithubRepoCount } from 'vue-socials'
export default {
name: 'SGithubRepoCountSharing',
components: { SGithubRepoCount },
data() {
return {
tag: 'span',
shareOptions: {
username: 'webistomin',
repository: 'nanogram.js',
type: 'fork',
},
}
},
methods: {
onLoad() {},
onError() {},
onLoading() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`shareOptions` | `object` | Your share link parameters:
**username** – your github username
**repository** – your github repository
**type** – share link type (watch, type, fork, issues)
| `{}`
`tag` | `string` | Dynamic HTML tag or component | `span`
**Events**
| Event name | Usage |
| ------ | ------ |
`load` | the request has finished successfully |
`error` | the request has finished with error |
`loading` | the request has started |
**⚠️ Warning**
This component uses `JSONP` so the content won't be available during `SSR`.
---
### SGmail
**Usage**
```vue
import { SGmail } from 'vue-socials'
export default {
name: 'SGmailSharing',
components: { SGmail },
data() {
return {
windowFeatures: {},
shareOptions: {
to: '[email protected]',
su: 'Title',
cc: '[email protected]',
bcc: '[email protected]',
body: 'Hello\nWorld',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**to** – e-mail recipient address
**su** – subject of e-mail
**cc** – carbon copy e-mail address
**bcc** – blind carbon copy e-mail address
**body** – body of e-mail
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SGoogleBookmarks
**Usage**
```vue
import { SGoogleBookmarks } from 'vue-socials'
export default {
name: 'SGoogleBookmarksSharing',
components: { SGoogleBookmarks },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
title: 'Title',
annotation: 'Annotation',
tags: ['tag'],
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**title** – your bookmark title
**url** – your url
**annotation** – your text
**tags** – your keywords or hashtags
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SHackerNews
**Usage**
```vue
import { SHackerNews } from 'vue-socials'
export default {
name: 'SHackerNewsSharing',
components: { SHackerNews },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
title: 'Title',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**title** – your bookmark title
**url** – your url
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SHatena
**Usage**
```vue
import { SHatena } from 'vue-socials'
export default {
name: 'SHatenaSharing',
components: { SHatena },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
title: 'Title',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**title** – your bookmark title
**url** – your url
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SHatenaCount
**Usage**
```vue
import { SHatenaCount } from 'vue-socials'
export default {
name: 'SHatenaCountSharing',
components: { SHatenaCount },
data() {
return {
tag: 'span',
shareOptions: {
url: 'https://github.com/',
},
}
},
methods: {
onLoad() {},
onError() {},
onLoading() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
| `{}`
`tag` | `string` | Dynamic HTML tag or component | `span`
**Events**
| Event name | Usage |
| ------ | ------ |
`load` | the request has finished successfully |
`error` | the request has finished with error |
`loading` | the request has started |
**⚠️ Warning**
This component uses `JSONP` so the content won't be available during `SSR`.
---
### SHouzz
**Usage**
```vue
import { SHouzz } from 'vue-socials'
export default {
name: 'SHouzzSharing',
components: { SHouzz },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
id: '123',
image: 'url',
title: 'Title',
category: ['category'],
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**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.
**id** – A unique identifier that verifies you own this web page.
**image** – URL of hi-res product image.
**title** – Title of the product.
**category** – Keywords to help categorize the product. (ie. 'Wall Sconces')
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SInstaPaper
**Usage**
```vue
import { SInstaPaper } from 'vue-socials'
export default {
name: 'SInstaPaperSharing',
components: { SInstaPaper },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SKakaoStory
**Usage**
```vue
import { SKakaoStory } from 'vue-socials'
export default {
name: 'SKakaoStorySharing',
components: { SKakaoStory },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
text: 'Text',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**text** – your blogpost text
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SLine
**Usage**
```vue
import { SLine } from 'vue-socials'
export default {
name: 'SLineSharing',
components: { SLine },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
text: 'Text',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**text** – your blogpost text
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SLineCount
**Usage**
```vue
import { SLineCount } from 'vue-socials'
export default {
name: 'SLineCountSharing',
components: { SLineCount },
data() {
return {
tag: 'span',
shareOptions: {
url: 'https://github.com/',
},
}
},
methods: {
onLoad() {},
onError() {},
onLoading() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
| `{}`
`tag` | `string` | Dynamic HTML tag or component | `span`
**Events**
| Event name | Usage |
| ------ | ------ |
`load` | the request has finished successfully |
`error` | the request has finished with error |
`loading` | the request has started |
---
### SLinkedIn
**Usage**
```vue
import { SLinkedIn } from 'vue-socials'
export default {
name: 'SLinkedInSharing',
components: { SLinkedIn },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SLiveJournal
**Usage**
```vue
import { SLiveJournal } from 'vue-socials'
export default {
name: 'SLiveJournalSharing',
components: { SLiveJournal },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
subject: 'Title',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**subject** – your title
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SMailRu
**Usage**
```vue
import { SMailRu } from 'vue-socials'
export default {
name: 'SMailRuSharing',
components: { SMailRu },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
title: 'Title',
description: 'Description',
image: '',
swfUrl: '',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**title** – your title
**description** – your description
**image** – your image
**swfUrl** – your flash-player with video
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SMastodon
**Usage**
```vue
import { SMastodon } from 'vue-socials'
export default {
name: 'SSMastodonSharing',
components: { SMastodon },
data() {
return {
windowFeatures: {},
shareOptions: {
domain: 'https://mas.to',
url: 'https://github.com',
text: 'Hello, world!',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ |--------------------------------------------------------------------------------------------------------------------------------------------------------| ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**domain** – the mastodon domain
**url** – the URL you want to share
**text** – your text
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SMicrosoftTeams
**Usage**
```vue
import { SMicrosoftTeams } from 'vue-socials'
export default {
name: 'SMicrosoftTeamsSharing',
components: { SMicrosoftTeams },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
preview: true,
text: 'Text',
title: 'Title',
instruction: 'Instruction',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**title** – Default Text to be inserted in the assignments "Title" field (50 character limit)
**text** – Default Text to be inserted before the link in the message compose box (200 character limit)
**preview** – Whether or not to show a preview of the content to share.
**instruction** – Default Text to be inserted in the assignments "Instructions" field (200 character limit)
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SOdnoklassniki
**Usage**
```vue
import { SOdnoklassniki } from 'vue-socials'
export default {
name: 'SOdnoklassnikiSharing',
components: { SOdnoklassniki },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SOdnoklassnikiCount
**Usage**
```vue
import { SOdnoklassnikiCount } from 'vue-socials'
export default {
name: 'SOdnoklassnikiCountSharing',
components: { SOdnoklassnikiCount },
data() {
return {
tag: 'span',
shareOptions: {
ref: 'https://github.com/',
},
}
},
methods: {
onLoad() {},
onError() {},
onLoading() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`shareOptions` | `object` | Your share link parameters:
**ref** – the URL you want to share
| `{}`
`tag` | `string` | Dynamic HTML tag or component | `span`
**Events**
| Event name | Usage |
| ------ | ------ |
`load` | the request has finished successfully |
`error` | the request has finished with error |
`loading` | the request has started |
**⚠️ Warning**
This component uses `JSONP` so the content won't be available during `SSR`.
---
### SPinterest
**Usage**
```vue
import { SPinterest } from 'vue-socials'
export default {
name: 'SPinterestSharing',
components: { SPinterest },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
media: '',
description: 'Description',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**media** – Overrides the image and substitutes a different image in the Pin Create form.
**description** – Overrides the default image description and substitutes an image description you provide.
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SPinterestCount
**Usage**
```vue
import { SPinterestCount } from 'vue-socials'
export default {
name: 'SPinterestCountSharing',
components: { SPinterestCount },
data() {
return {
tag: 'span',
shareOptions: {
url: 'https://github.com/',
},
}
},
methods: {
onLoad() {},
onError() {},
onLoading() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
| `{}`
`tag` | `string` | Dynamic HTML tag or component | `span`
**Events**
| Event name | Usage |
| ------ | ------ |
`load` | the request has finished successfully |
`error` | the request has finished with error |
`loading` | the request has started |
**⚠️ Warning**
This component uses `JSONP` so the content won't be available during `SSR`.
---
### SPocket
**Usage**
```vue
import { SPocket } from 'vue-socials'
export default {
name: 'SPocketSharing',
components: { SPocket },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SQZone
**Usage**
```vue
import { SQZone } from 'vue-socials'
export default {
name: 'SQZoneSharing',
components: { SQZone },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
title: 'Title',
summary: 'Summary',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**title** – your title
**summary** – your text
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SReddit
**Usage**
```vue
import { SReddit } from 'vue-socials'
export default {
name: 'SRedditSharing',
components: { SReddit },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
title: 'Title',
text: 'Hello World!',
selftext: true,
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**title** – your title
**text** – your text
**selftext** – sets the displayed tab to the self post tab
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SRedditCount
**Usage**
```vue
import { SRedditCount } from 'vue-socials'
export default {
name: 'SRedditCountSharing',
components: { SRedditCount },
data() {
return {
tag: 'span',
shareOptions: {
url: 'https://github.com/',
},
}
},
methods: {
onLoad() {},
onError() {},
onLoading() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
| `{}`
`tag` | `string` | Dynamic HTML tag or component | `span`
**Events**
| Event name | Usage |
| ------ | ------ |
`load` | the request has finished successfully |
`error` | the request has finished with error |
`loading` | the request has started |
**⚠️ Warning**
This component uses `JSONP` so the content won't be available during `SSR`.
---
### SRenRen
**Usage**
```vue
import { SRenRen } from 'vue-socials'
export default {
name: 'SRenRenSharing',
components: { SRenRen },
data() {
return {
windowFeatures: {},
shareOptions: {
srcUrl: 'https://github.com/',
resourceUrl: 'https://github.com/',
title: 'Title',
description: 'Description',
pic: '',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**srcUrl** – the URL you want to share
**resourceUrl** – the source Url of the shared resource, the default is the Referer in the header
**title** – your title
**description** – your text
**pic** – your image
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SSkype
**Usage**
```vue
import { SSkype } from 'vue-socials'
export default {
name: 'SSkypeSharing',
components: { SSkype },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
text: 'Text',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**text** – your text
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SSms
**Usage**
```vue
import { SSms } from 'vue-socials'
export default {
name: 'SSmsSharing',
components: { SSms },
data() {
return {
windowFeatures: {},
shareOptions: {
number: '+1(999)999-99-99',
body: 'Hello world!',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`shareOptions` | `object` | Your share link parameters:
**number** – your number
**body** – your text
| `{}`
---
### STelegram
**Usage**
```vue
import { STelegram } from 'vue-socials'
export default {
name: 'STelegramSharing',
components: { STelegram },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
text: 'Text',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**text** – your text
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SThreema
**Usage**
```vue
import { SThreema } from 'vue-socials'
export default {
name: 'SThreemaSharing',
components: { SThreema },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
id: '',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**id** – your id
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### STrello
**Usage**
```vue
import { STrello } from 'vue-socials'
export default {
name: 'STrelloSharing',
components: { STrello },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
name: 'Name',
description: 'Description',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**name** – your card name
**description** – your card description
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### STumblr
**Usage**
```vue
import { STumblr } from 'vue-socials'
export default {
name: 'STumblrSharing',
components: { STumblr },
data() {
return {
windowFeatures: {},
shareOptions: {
canonicalUrl: 'https://github.com/',
title: 'Title',
caption: 'Caption',
tags: ['hash', 'tag'],
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**canonicalUrl** – the URL you want to share
**title** – title of the Text post
**caption** – post caption
**tags** – list of tags
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### STumblrCount
**Usage**
```vue
import { STumblrCount } from 'vue-socials'
export default {
name: 'STumblrCountSharing',
components: { STumblrCount },
data() {
return {
tag: 'span',
shareOptions: {
url: 'https://github.com/',
},
}
},
methods: {
onLoad() {},
onError() {},
onLoading() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
| `{}`
`tag` | `string` | Dynamic HTML tag or component | `span`
**Events**
| Event name | Usage |
| ------ | ------ |
`load` | the request has finished successfully |
`error` | the request has finished with error |
`loading` | the request has started |
**⚠️ Warning**
This component uses `JSONP` so the content won't be available during `SSR`.
---
### STwitter
**Usage**
```vue
import { STwitter } from 'vue-socials'
export default {
name: 'STwitterSharing',
components: { STwitter },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
text: 'Hello world',
hashtags: ['hash', 'tag'],
via: 'twitterdev',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**text** – post text
**via** – username
**hashtags** – list of tags
| `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SViber
**Usage**
```vue
import { SViber } from 'vue-socials'
export default {
name: 'SViberSharing',
components: { SViber },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
text: 'Text',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**text** – post text | `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SVkontakte
**Usage**
```vue
import { SVkontakte } from 'vue-socials'
export default {
name: 'SVkontakteSharing',
components: { SVkontakte },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
title: 'Title',
image: '',
noParse: false,
noVkLinks: false,
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**title** – post title
**image** – image URL
**noParse** – don't do additional request for missing information
**noVkLinks** – don't add active profile links | `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SVkontakteCount
**Usage**
```vue
import { SVkontakteCount } from 'vue-socials'
export default {
name: 'SVkontakteCountSharing',
components: { SVkontakteCount },
data() {
return {
tag: 'span',
shareOptions: {
url: 'https://github.com/',
},
}
},
methods: {
onLoad() {},
onError() {},
onLoading() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
| `{}`
`tag` | `string` | Dynamic HTML tag or component | `span`
**Events**
| Event name | Usage |
| ------ | ------ |
`load` | the request has finished successfully |
`error` | the request has finished with error |
`loading` | the request has started |
**⚠️ Warning**
This component uses `JSONP` so the content won't be available during `SSR`.
---
### SWeibo
**Usage**
```vue
import { SWeibo } from 'vue-socials'
export default {
name: 'SWeiboSharing',
components: { SWeibo },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
title: 'Title',
appkey: '',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – the URL you want to share
**title** – post title
**appkey** – your app key | `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SWhatsApp
**Usage**
```vue
import { SWhatsApp } from 'vue-socials'
export default {
name: 'SWhatsAppSharing',
components: { SWhatsApp },
data() {
return {
windowFeatures: {},
shareOptions: {
number: '1(999)999-99-99',
text: 'Hello world!',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**number** – your number
**text** – post text | `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SWordPress
**Usage**
```vue
import { SWordPress } from 'vue-socials'
export default {
name: 'SWordPressSharing',
components: { SWordPress },
data() {
return {
windowFeatures: {},
shareOptions: {
domain: 'https://wordpress.org',
url: 'https://github.com',
title: 'Title',
text: 'Text',
image: '',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**title** – post title
**text** – post text
**domain** – your domain
**url** – the url of the current page
**image** – url of an image file | `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SXing
**Usage**
```vue
import { SXing } from 'vue-socials'
export default {
name: 'SXingSharing',
components: { SXing },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
followUrl: '',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – A fixed URL to be shared
**followUrl** – The URL of a XING news page for the Follow button shown on the success page. | `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SYahoo
**Usage**
```vue
import { SYahoo } from 'vue-socials'
export default {
name: 'SYahooSharing',
components: { SYahoo },
data() {
return {
windowFeatures: {},
shareOptions: {
email: '[email protected]',
subject: 'Subject',
body: 'Hello\nWorld!',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**email** – e-mail recipient address
**subject** – subject of e-mail
**body** – body of e-mail | `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
### SYammer
**Usage**
```vue
import { SYammer } from 'vue-socials'
export default {
name: 'SYammerSharing',
components: { SYammer },
data() {
return {
windowFeatures: {},
shareOptions: {
url: 'https://github.com/',
text: 'Text',
groupId: '',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
```
**Props**
| Prop | Type | Description | Default value |
| ------ | ------ | ------ | ------ |
`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, }`
`shareOptions` | `object` | Your share link parameters:
**url** – A fixed URL to be shared
**text** – post text
**groupId** – your group id | `{}`
`useNativeBehavior` | `boolean` | Use native link behavior instead of `window.open()` or not | `false`
**Events**
| Event name | Usage |
| ------ | ------ |
`popup-open` | `window.open()` has been opened |
`popup-close` | `window.open()` has been closed |
`popup-block` | `window.open()` has been blocked |
`popup-focus` | `window.open()` has been focused |
---
## Browsers support 🌎
| [
](http://godban.github.io/browsers-support-badges/)
IE / Edge | [
](http://godban.github.io/browsers-support-badges/)
Firefox | [
](http://godban.github.io/browsers-support-badges/)
Chrome | [
](http://godban.github.io/browsers-support-badges/)
Safari | [
](http://godban.github.io/browsers-support-badges/)
iOS Safari | [
](http://godban.github.io/browsers-support-badges/)
Samsung | [
](http://godban.github.io/browsers-support-badges/)
Opera | [
](http://godban.github.io/browsers-support-badges/)
Yandex |
| --------- | --------- | --------- | --------- | --------- | --------- | --------- | --------- |
| IE11, Edge 80 | 60+ | 60+ | 10+ | 10+ | 12+ | 50+ | 14.4+
## License 📄
### [MIT](https://github.com/webistomin/vue-socials/blob/master/LICENSE)
## Support the project ⭐
If you feel awesome and want to support me in a small way, please consider starring and sharing the repo!
## Contributing 🎉
Found a bug? Missing a specific feature?
Your contributions are always welcome! Please have a look at the [contribution guidelines](https://github.com/webistomin/vue-socials/blob/master/CONTRIBUTING.md) first.
## Contributors ❤️
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
