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 (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
# Vue 2
npm install vue-socials@1
# Vue 3
npm install vue-socials
yarn
# Vue 2
yarn add vue-socials@1
# Vue 3
yarn add vue-socials
Import all components (not recommended)
/**
* 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
/**
* 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
Socials
B
D
E
F
G
H
I
K
L
M
O
P
Q
R
S
T
V
W
X
Y
SBlogger
Usage
<template>
<s-blogger
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-blogger>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-dev-to
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-dev-to>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-diaspora
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-diaspora>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-douban
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-douban>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-email :share-options="shareOptions">
<!-- your icon component -->
</s-email>
</template>
<script>
import { SEmail } from 'vue-socials'
export default {
name: 'SEmailSharing',
components: { SEmail },
data() {
return {
shareOptions: {
mail: 'google@gmail.com',
cc: ['google1@gmail.com', 'google3@gmail.com'],
bcc: ['google2@gmail.com', 'google4@gmail.com'],
subject: 'Subject',
body: 'Hello\nWorld',
},
}
},
};
</script>
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
<template>
<s-evernote
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-evernote>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-facebook
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-facebook>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-facebook-count
:share-options="shareOptions"
@load="onLoad"
@error="onError"
@loading="onLoading"
></s-facebook-count>
</template>
<script>
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() {},
}
};
</script>
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 |
This component uses JSONP
so the content won't be available during SSR
.
SFacebookMessenger
Usage
<template>
<s-facebook-messenger
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-facebook-messenger>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-facebook-workplace
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-facebook-workplace>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-flip-board
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-flip-board>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-github
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-github>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-github-count
:share-options="shareOptions"
@load="onLoad"
@error="onError"
@loading="onLoading"
></s-github-count>
</template>
<script>
import { SGithubCount } from 'vue-socials'
export default {
name: 'SGithubCountSharing',
components: { SGithubCount },
data() {
return {
tag: 'span',
shareOptions: {
username: 'webistomin',
type: 'follow',
},
}
},
methods: {
onLoad() {},
onError() {},
onLoading() {},
}
};
</script>
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 |
This component uses JSONP
so the content won't be available during SSR
.
SGithubGist
Usage
<template>
<s-github-gist
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-github-gist>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-github-gist-count
:share-options="shareOptions"
@load="onLoad"
@error="onError"
@loading="onLoading"
></s-github-gist-count>
</template>
<script>
import { SGithubGistCount } from 'vue-socials'
export default {
name: 'SGithubGistCountSharing',
components: { SGithubGistCount },
data() {
return {
tag: 'span',
shareOptions: {
gistId: 'e3683b03ba936ade91d33dbc721cd6d8',
type: 'fork',
},
}
},
methods: {
onLoad() {},
onError() {},
onLoading() {},
}
};
</script>
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 |
This component uses JSONP
so the content won't be available during SSR
.
SGithubRepo
Usage
<template>
<s-github-repo
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-github-repo>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-github-repo-count
:share-options="shareOptions"
@load="onLoad"
@error="onError"
@loading="onLoading"
></s-github-repo-count>
</template>
<script>
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() {},
}
};
</script>
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 |
This component uses JSONP
so the content won't be available during SSR
.
SGmail
Usage
<template>
<s-gmail
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-gmail>
</template>
<script>
import { SGmail } from 'vue-socials'
export default {
name: 'SGmailSharing',
components: { SGmail },
data() {
return {
windowFeatures: {},
shareOptions: {
to: 'google@gmail.com',
su: 'Title',
cc: 'google1@gmail.com',
bcc: 'google2@gmail.com',
body: 'Hello\nWorld',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-google-bookmarks
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-google-bookmarks>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-hacker-news
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-hacker-news>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-hatena
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-hatena>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-hatena-count
:share-options="shareOptions"
@load="onLoad"
@error="onError"
@loading="onLoading"
></s-hatena-count>
</template>
<script>
import { SHatenaCount } from 'vue-socials'
export default {
name: 'SHatenaCountSharing',
components: { SHatenaCount },
data() {
return {
tag: 'span',
shareOptions: {
url: 'https://github.com/',
},
}
},
methods: {
onLoad() {},
onError() {},
onLoading() {},
}
};
</script>
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 |
This component uses JSONP
so the content won't be available during SSR
.
SHouzz
Usage
<template>
<s-houzz
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-houzz>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-insta-paper
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-insta-paper>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-kakao-story
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-kakao-story>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-line
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-line>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-line-count
:share-options="shareOptions"
@load="onLoad"
@error="onError"
@loading="onLoading"
></s-line-count>
</template>
<script>
import { SLineCount } from 'vue-socials'
export default {
name: 'SLineCountSharing',
components: { SLineCount },
data() {
return {
tag: 'span',
shareOptions: {
url: 'https://github.com/',
},
}
},
methods: {
onLoad() {},
onError() {},
onLoading() {},
}
};
</script>
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
<template>
<s-linked-in
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-linked-in>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-live-journal
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-live-journal>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-mail-ru
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-mail-ru>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-mastodon
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-mastodon>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-microsoft-teams
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-microsoft-teams>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-odnoklassniki
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-odnoklassniki>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-odnoklassniki-count
:tag="tag"
:share-options="shareOptions"
@load="onLoad"
@error="onError"
@loading="onLoading"
></s-odnoklassniki-count>
</template>
<script>
import { SOdnoklassnikiCount } from 'vue-socials'
export default {
name: 'SOdnoklassnikiCountSharing',
components: { SOdnoklassnikiCount },
data() {
return {
tag: 'span',
shareOptions: {
ref: 'https://github.com/',
},
}
},
methods: {
onLoad() {},
onError() {},
onLoading() {},
}
};
</script>
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 |
This component uses JSONP
so the content won't be available during SSR
.
SPinterest
Usage
<template>
<s-pinterest
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-pinterest>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-pinterest-count
:tag="tag"
:share-options="shareOptions"
@load="onLoad"
@error="onError"
@loading="onLoading"
></s-pinterest-count>
</template>
<script>
import { SPinterestCount } from 'vue-socials'
export default {
name: 'SPinterestCountSharing',
components: { SPinterestCount },
data() {
return {
tag: 'span',
shareOptions: {
url: 'https://github.com/',
},
}
},
methods: {
onLoad() {},
onError() {},
onLoading() {},
}
};
</script>
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 |
This component uses JSONP
so the content won't be available during SSR
.
SPocket
Usage
<template>
<s-pocket
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-pocket>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-q-zone
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-q-zone>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-reddit
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-reddit>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-reddit-count
:tag="tag"
:share-options="shareOptions"
@load="onLoad"
@error="onError"
@loading="onLoading"
></s-reddit-count>
</template>
<script>
import { SRedditCount } from 'vue-socials'
export default {
name: 'SRedditCountSharing',
components: { SRedditCount },
data() {
return {
tag: 'span',
shareOptions: {
url: 'https://github.com/',
},
}
},
methods: {
onLoad() {},
onError() {},
onLoading() {},
}
};
</script>
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 |
This component uses JSONP
so the content won't be available during SSR
.
SRenRen
Usage
<template>
<s-ren-ren
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-ren-ren>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-skype
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-skype>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-sms
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-sms>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
shareOptions |
object |
Your share link parameters: number – your number body – your text |
{} |
STelegram
Usage
<template>
<s-telegram
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-telegram>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-threema
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-threema>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-trello
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-trello>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-tumblr
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-tumblr>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-tumblr-count
:tag="tag"
:share-options="shareOptions"
@load="onLoad"
@error="onError"
@loading="onLoading"
></s-tumblr-count>
</template>
<script>
import { STumblrCount } from 'vue-socials'
export default {
name: 'STumblrCountSharing',
components: { STumblrCount },
data() {
return {
tag: 'span',
shareOptions: {
url: 'https://github.com/',
},
}
},
methods: {
onLoad() {},
onError() {},
onLoading() {},
}
};
</script>
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 |
This component uses JSONP
so the content won't be available during SSR
.
STwitter
Usage
<template>
<s-twitter
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-twitter>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-viber
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-viber>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-vkontakte
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-vkontakte>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-vkontakte-count
:tag="tag"
:share-options="shareOptions"
@load="onLoad"
@error="onError"
@loading="onLoading"
></s-vkontakte-count>
</template>
<script>
import { SVkontakteCount } from 'vue-socials'
export default {
name: 'SVkontakteCountSharing',
components: { SVkontakteCount },
data() {
return {
tag: 'span',
shareOptions: {
url: 'https://github.com/',
},
}
},
methods: {
onLoad() {},
onError() {},
onLoading() {},
}
};
</script>
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 |
This component uses JSONP
so the content won't be available during SSR
.
SWeibo
Usage
<template>
<s-weibo
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-weibo>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-whats-app
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-whats-app>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-word-press
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-word-press>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-xing
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-xing>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-yahoo
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-yahoo>
</template>
<script>
import { SYahoo } from 'vue-socials'
export default {
name: 'SYahooSharing',
components: { SYahoo },
data() {
return {
windowFeatures: {},
shareOptions: {
email: 'mail@gmail.com',
subject: 'Subject',
body: 'Hello\nWorld!',
},
useNativeBehavior: false,
}
},
methods: {
onClose() {},
onOpen() {},
onBlock() {},
onFocus() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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
<template>
<s-yammer
:window-features="windowFeatures"
:share-options="shareOptions"
:use-native-behavior="useNativeBehavior"
@popup-close="onClose"
@popup-open="onOpen"
@popup-block="onBlock"
@popup-focus="onFocus"
>
<!-- your icon component -->
</s-yammer>
</template>
<script>
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() {},
}
};
</script>
Props
Prop | Type | Description | Default value |
---|---|---|---|
windowFeatures |
object |
Pass options to window.open() . Requested features of the new window.
|
{ 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 🌎
IE / Edge |
Firefox |
Chrome |
Safari |
iOS Safari |
Samsung |
Opera |
Yandex |
---|---|---|---|---|---|---|---|
IE11, Edge 80 | 60+ | 60+ | 10+ | 10+ | 12+ | 50+ | 14.4+ |
License 📄
MIT
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 first.
Contributors ❤️
Thanks goes to these wonderful people (emoji key):
Alexey Istomin ️️️️♿️ |
BodrovIgor 🖋 🎨 |