README

Vue Socials

💬 Social media share buttons and counts for Vue.js.
Explore website »

Key Features • Installation • Documentation • Browsers support • License • Support the project • Contributing

Key Features ✨

50+ reusable components
Small ~7KB (minified and gzipped)
Fully tree-shakeable
No dependencies
No SDK
Don't track the user
Built with a11y in mind

Installation 🚀

npm

npm install vue-socials

yarn

yarn add vue-socials

Import all components

import Vue from 'vue'
import VueSocials from 'vue-socials';

Vue.use(VueSocials)

Import only specific component

import Vue from 'vue'
import { SGithub } from 'vue-socials';

Vue.component('SGithub', SGithub)

Documentation 🤗

Browse online documentation here

Socials

K

Kakao Story

M

MailRu
Microsoft Teams

O

Odnoklassniki
- Odnoklassniki counter

P

Pinterest
- Pinterest counter
Pocket

Q

Qzone

R

Reddit
- Reddit counter
Renren

S

Skype
Sms

T

Telegram
Threema
Trello
Tumblr
- Tumblr counter
Twitter

V

Viber
Vkontakte
- Vkontakte counter

W

Weibo
Whatsapp
Wordpress

X

Xing

Y

Yahoo
Yammer

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 1\nText 2\n{% wikipedia https://en.wikipedia.org/wiki/Wikipedia %}',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
`windowFeatures`	`object`	Pass options to `window.open()`. Requested features of the new window.	`{ width: 600, height: 540, }`
`shareOptions`	`object`	Your share link parameters: title – your blogpost title isPublished – is your blogpost published tags – hashtags for blogpost content – your blogpost content	`{}`
`useNativeBehavior`	`boolean`	Use native link behavior instead of `window.open()` or not	`false`

Events

Event name	Usage
`popup-open`	`window.open()` has been opened
`popup-close`	`window.open()` has been closed
`popup-block`	`window.open()` has been blocked
`popup-focus`	`window.open()` has been focused

SDiaspora

Usage

<template>
  <s-diaspora
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  ></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: 'google@gmail.com',
          cc: ['google1@gmail.com', 'google3@gmail.com'],
          bcc: ['google2@gmail.com', 'google4@gmail.com'],
          subject: 'Subject',
          body: 'Hello\nWorld',
        },
      }
    },
  };
</script>

Props

Prop	Type	Description	Default value
`shareOptions`	`object`	Your share link parameters: mail – e-mail recipient address subject – subject of e-mail cc – carbon copy e-mail address bcc – blind carbon copy e-mail address body – body of e-mail	`{}`

SEvernote

Usage

<template>
  <s-evernote
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  ></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: 'google@gmail.com',
          su: 'Title',
          cc: 'google1@gmail.com',
          bcc: 'google2@gmail.com',
          body: 'Hello\nWorld',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
`windowFeatures`	`object`	Pass options to `window.open()`. Requested features of the new window.	`{ width: 600, height: 540, }`
`shareOptions`	`object`	Your share link parameters: to – e-mail recipient address su – subject of e-mail cc – carbon copy e-mail address bcc – blind carbon copy e-mail address body – body of e-mail	`{}`
`useNativeBehavior`	`boolean`	Use native link behavior instead of `window.open()` or not	`false`

Events

Event name	Usage
`popup-open`	`window.open()` has been opened
`popup-close`	`window.open()` has been closed
`popup-block`	`window.open()` has been blocked
`popup-focus`	`window.open()` has been focused

SGoogleBookmarks

Usage

<template>
  <s-google-bookmarks
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  ></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://

Usage no npm install needed!

README

Vue Socials

Key Features ✨

Installation 🚀

Documentation 🤗

Socials

B

D

E

F

G

H

I

K

L

M

O

P

Q

R

S

T

V

W

X

Y

SBlogger

SDevTo

SDiaspora

SDouban

SEmail

SEvernote

SFacebook

SFacebookCount

SFacebookMessenger

SFacebookWorkplace

SFlipBoard

SGithub

SGithubCount

SGithubGist

SGithubGistCount

SGithubRepo

SGithubRepoCount

SGmail

SGoogleBookmarks

SHackerNews

SHatena

SHatenaCount

SHouzz

SInstaPaper

SKakaoStory

SLine

SLineCount

SLinkedIn

SLiveJournal

SMailRu

SMicrosoftTeams

SOdnoklassniki

SOdnoklassnikiCount

SPinterest

SPinterestCount