π¬ Social media share buttons and counts for Vue.js.
Explore website Β»
~7KB
(minified and gzipped)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)
Browse online documentation here
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 |
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 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 |
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 |
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 |
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: '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 | |||
{} |
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 |
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 |
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
.
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 |
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 |
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 |
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 |
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
.
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 |
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
.
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 |
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
.
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: '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 |
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 |
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 |
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 |
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
.
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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
.
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 |
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
.
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 |
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 |
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 |
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
.
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 |
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 |
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 | |||
{} |
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 |
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 |
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 |
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 |
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
.
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 |
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 |
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 |
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
.
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 |
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 |
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 |
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 |
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: '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 |
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 |
|
IE / Edge |
Firefox |
Chrome |
Safari |
iOS Safari |
Samsung |
Opera |
Yandex |
| β | β | β | β | β | β | β | β |
| IE11, Edge 80 | 60+ | 60+ | 10+ | 10+ | 12+ | 50+ | 14.4+ |
Author: webistomin
The Demo/Documentation: View The Demo/Documentation
Download Link: Download The Source Code
Official Website: https://github.com/webistomin/vue-socials
License: MIT
#vue #vuejs #javascript #web-development #webdev