vue-socials
A Small And Customizable Social Share Button Component For Vue.js.
Key Features ✨
50+ reusable components
Small ~7KB (minified and gzipped)
Fully tree-shakeable
No dependencies
No SDK
Don’t track the user
Built with a11y in mind
Installation 🚀
npm
# Vue 2
npm install vue-socials
# Vue 3
npm install vue-socials@next
yarn
# Vue 2
yarn add vue-socials
# Vue 3
yarn add vue-socials@next
Import all components
/**
* 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”
></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”
></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 1nText 2n{% 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”
></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”
></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”></s-email>
</template>
<script>
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: ‘HellonWorld’,
},
}
},
};
</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”
></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”
></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
⚠️ Warning
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”
></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”
></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”
></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”
></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
⚠️ Warning
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”
></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
⚠️ Warning
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”
></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
⚠️ Warning
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”
></s-gmail>
</template>
<script>
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: ‘HellonWorld’,
},
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”
></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”
></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”
></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
⚠️ Warning
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”
></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”
></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”
></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”
></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”
></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”
></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”
></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
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”
></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”
></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
⚠️ Warning
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”
></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
⚠️ Warning
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”
></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”
></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”
></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
⚠️ Warning
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”
></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”
></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”
></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”
></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”
></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”
></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”
></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
⚠️ Warning
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”
></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”
></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”
></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
⚠️ Warning
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”
></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”
></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”
></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”
></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”
></s-yahoo>
</template>
<script>
import { SYahoo } from ‘vue-socials’
export default {
name: ‘SYahooSharing’,
components: { SYahoo },
data() {
return {
windowFeatures: {},
shareOptions: {
email: ‘[email protected]’,
subject: ‘Subject’,
body: ‘HellonWorld!’,
},
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”
></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
