Vue Socials

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

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

Key Features ✨

• 50+ reusable components
• Small ~1.3KB component average size (minified and gzipped)
• Fully tree-shakeable
• No dependencies
• No SDK
• Don't track the user
• Completely unstyled
• Built with a11y in mind
• Support Vue 2 & Vue 3
• Support SSR
• Each component exposing a single slot that gives you complete control over what should actually be rendered

Installation 🚀

npm

# Vue 2
npm install vue-socials@1

# Vue 3
npm install vue-socials

yarn

# Vue 2
yarn add vue-socials@1

# Vue 3
yarn add vue-socials

Import all components (not recommended)

/**
 * Vue 2
 */
import Vue from 'vue'
import VueSocials from 'vue-socials';

Vue.use(VueSocials)

/**
 * Vue 3
 */
import { createApp } from 'vue'
import VueSocials from 'vue-socials';
import App from './App.vue'

const app = createApp(App)
app.use(VueSocials)

Import only specific component

/**
 * Vue 2
 */
import Vue from 'vue'
import { SGithub } from 'vue-socials';

Vue.component('SGithub', SGithub)

/**
 * Vue 3
 */
import { createApp } from 'vue'
import { SGithub } from 'vue-socials';
import App from './App.vue'

const app = createApp(App)
app.component('SGithub', SGithub)

Documentation 🤗

Browse online documentation here

Socials

B

• Blogger

D

• DevTo

• Diaspora

• Douban

E

• Email

• Evernote

F

• Facebook

  • Facebook counter

• Facebook Messenger

• Facebook Workplace

• Flipboard

G

• Github

  • Github counter

• Github gist

  • Github gist counter

• Github repository

  • Github repository counter

• Gmail

• Google Bookmarks

H

• Hacker News

• Hatena

  • Hatena counter

• Houzz

I

• Instapaper

K

• Kakao Story

L

• Line

  • Line counter

• Linkedin

• LiveJournal

M

• MailRu

• Mastodon

• 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"
  >
    <!-- your icon component -->
  </s-blogger>
</template>

<script>
  import { SBlogger } from 'vue-socials'

  export default {
    name: 'SBloggerSharing',
    
    components: { SBlogger },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: { 
          url: 'https://github.com/', 
          title: 'Title', 
          text: 'Text',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – the URL you want to share title – your blogpost title text – your blogpost content	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SDevTo

Usage

<template>
  <s-dev-to
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-dev-to>
</template>

<script>
  import { SDevTo } from 'vue-socials'

  export default {
    name: 'SDevToSharing',
    
    components: { SDevTo },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          title: 'Title',
          isPublished: false,
          tags: ['tag', 'tag2'],
          content: 'Text 1\nText 2\n{% wikipedia https://en.wikipedia.org/wiki/Wikipedia %}',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

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

Events

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

---

SDiaspora

Usage

<template>
  <s-diaspora
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-diaspora>
</template>

<script>
  import { SDiaspora } from 'vue-socials'

  export default {
    name: 'SDiasporaSharing',
    
    components: { SDiaspora },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          title: 'Title',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – the URL you want to share title – your blogpost title	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SDouban

Usage

<template>
  <s-douban
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-douban>
</template>

<script>
  import { SDouban } from 'vue-socials'

  export default {
    name: 'SDoubanSharing',
    
    components: { SDouban },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          title: 'Title',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 1100, height: 450, }
shareOptions	object	Your share link parameters: url – the URL you want to share title – your blogpost title	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SEmail

Usage

<template>
  <s-email :share-options="shareOptions">
    <!-- your icon component -->
  </s-email>
</template>

<script>
  import { SEmail } from 'vue-socials'

  export default {
    name: 'SEmailSharing',
    
    components: { SEmail },
    
    data() {
      return {
        shareOptions: {
          mail: '[email protected]',
          cc: ['[email protected]', '[email protected]'],
          bcc: ['[email protected]', '[email protected]'],
          subject: 'Subject',
          body: 'Hello\nWorld',
        },
      }
    },
  };
</script>

Props

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

---

SEvernote

Usage

<template>
  <s-evernote
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-evernote>
</template>

<script>
  import { SEvernote } from 'vue-socials'

  export default {
    name: 'SEvernoteSharing',
    
    components: { SEvernote },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          title: 'Title',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 800, height: 560, }
shareOptions	object	Your share link parameters: url – the URL you want to share title – your blogpost title	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SFacebook

Usage

<template>
  <s-facebook
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-facebook>
</template>

<script>
  import { SFacebook } from 'vue-socials'

  export default {
    name: 'SFacebookSharing',
    
    components: { SFacebook },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          quote: 'Quote',
          hashtag: '#Github',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 685, height: 600, }
shareOptions	object	Your share link parameters: url – the URL you want to share quote – your blogpost quote hashtag – your blogpost hashtag	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SFacebookCount

Usage

<template>
  <s-facebook-count
    :share-options="shareOptions"
    @load="onLoad"
    @error="onError"
    @loading="onLoading"
  ></s-facebook-count>
</template>

<script>
  import { SFacebookCount } from 'vue-socials'

  export default {
    name: 'SFacebookCountSharing',
    
    components: { SFacebookCount },
    
    data() {
      return {
        tag: 'span',
        shareOptions: {
          id: 'https://github.com/',
          fields: ['id', 'og_object'],
          accessToken: '',
        },
      }
    },
    
    methods: {
      onLoad() {},
      onError() {},
      onLoading() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
shareOptions	object	Your share link parameters: id – the URL you want to share accessToken – your facebook access token fields – a comma-separated list of fields you want to request.	{}
tag	string	Dynamic HTML tag or component	span

Events

Event name	Usage
load	the request has finished successfully
error	the request has finished with error
loading	the request has started

⚠️ 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"
  >
    <!-- your icon component -->
  </s-facebook-messenger>
</template>

<script>
  import { SFacebookMessenger } from 'vue-socials'

  export default {
    name: 'SFacebookMessengerSharing',
    
    components: { SFacebookMessenger },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          redirectUri: 'https://www.domain.com/',
          appId: 123456789,
          to: undefined,
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 685, height: 600, }
shareOptions	object	Your share link parameters: url – the URL you want to share redirectUri – The URL to redirect to after a person clicks a button on the dialog. appId – Your app's unique identifier. to – A user ID of a recipient. Once the dialog comes up, the sender can specify additional people as recipients.	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SFacebookWorkplace

Usage

<template>
  <s-facebook-workplace
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-facebook-workplace>
</template>

<script>
  import { SFacebookWorkplace } from 'vue-socials'

  export default {
    name: 'SFacebookWorkplaceSharing',
    
    components: { SFacebookWorkplace },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 685, height: 600, }
shareOptions	object	Your share link parameters: url – the URL you want to share	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SFlipBoard

Usage

<template>
  <s-flip-board
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-flip-board>
</template>

<script>
  import { SFlipBoard } from 'vue-socials'

  export default {
    name: 'SFlipBoardSharing',
    
    components: { SFlipBoard },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          title: 'Title',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 834, height: 572, }
shareOptions	object	Your share link parameters: url – the URL you want to share title – your blogpost title	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SGithub

Usage

<template>
  <s-github
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-github>
</template>

<script>
  import { SGithub } from 'vue-socials'

  export default {
    name: 'SGithubSharing',
    
    components: { SGithub },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          username: 'webistomin',
          type: 'profile',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 834, height: 572, }
shareOptions	object	Your share link parameters: username – your GitHub username type – share link type (sponsor, follow, profile)	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SGithubCount

Usage

<template>
  <s-github-count
    :share-options="shareOptions"
    @load="onLoad"
    @error="onError"
    @loading="onLoading"
  ></s-github-count>
</template>

<script>
  import { SGithubCount } from 'vue-socials'

  export default {
    name: 'SGithubCountSharing',
    
    components: { SGithubCount },
    
    data() {
      return {
        tag: 'span',
        shareOptions: {
          username: 'webistomin',
          type: 'follow',
        },
      }
    },
    
    methods: {
      onLoad() {},
      onError() {},
      onLoading() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
shareOptions	object	Your share link parameters: username – your GitHub username type – share link type (follow)	{}
tag	string	Dynamic HTML tag or component	span

Events

Event name	Usage
load	the request has finished successfully
error	the request has finished with error
loading	the request has started

⚠️ 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"
  >
    <!-- your icon component -->
  </s-github-gist>
</template>

<script>
  import { SGithubGist } from 'vue-socials'

  export default {
    name: 'SGithubGistSharing',
    
    components: { SGithubGist },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          username: 'ai',
          gistId: 'e3683b03ba936ade91d33dbc721cd6d8',
          type: 'star',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 834, height: 572, }
shareOptions	object	Your share link parameters: username – your gist username gistId – your gist id type – share link type (gist, star, fork, download)	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SGithubGistCount

Usage

<template>
  <s-github-gist-count
    :share-options="shareOptions"
    @load="onLoad"
    @error="onError"
    @loading="onLoading"
  ></s-github-gist-count>
</template>

<script>
  import { SGithubGistCount } from 'vue-socials'

  export default {
    name: 'SGithubGistCountSharing',
    
    components: { SGithubGistCount },
    
    data() {
      return {
        tag: 'span',
        shareOptions: {
          gistId: 'e3683b03ba936ade91d33dbc721cd6d8',
          type: 'fork',
        },
      }
    },
    
    methods: {
      onLoad() {},
      onError() {},
      onLoading() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
shareOptions	object	Your share link parameters: gistId – your gist id type – share link type (fork)	{}
tag	string	Dynamic HTML tag or component	span

Events

Event name	Usage
load	the request has finished successfully
error	the request has finished with error
loading	the request has started

⚠️ 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"
  >
    <!-- your icon component -->
  </s-github-repo>
</template>

<script>
  import { SGithubRepo } from 'vue-socials'

  export default {
    name: 'SGithubRepoSharing',
    
    components: { SGithubRepo },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          username: 'webistomin',
          repository: 'vue-socials',
          type: 'fork',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 834, height: 572, }
shareOptions	object	Your share link parameters: username – your gist username repository – your repository name type – share link type (repo, watch, star, fork, download, issue, pr, template)	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SGithubRepoCount

Usage

<template>
  <s-github-repo-count
    :share-options="shareOptions"
    @load="onLoad"
    @error="onError"
    @loading="onLoading"
  ></s-github-repo-count>
</template>

<script>
  import { SGithubRepoCount } from 'vue-socials'

  export default {
    name: 'SGithubRepoCountSharing',
    
    components: { SGithubRepoCount },
    
    data() {
      return {
        tag: 'span',
        shareOptions: {
          username: 'webistomin',
          repository: 'nanogram.js',
          type: 'fork',
        },
      }
    },
    
    methods: {
      onLoad() {},
      onError() {},
      onLoading() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
shareOptions	object	Your share link parameters: username – your github username repository – your github repository type – share link type (watch, type, fork, issues)	{}
tag	string	Dynamic HTML tag or component	span

Events

Event name	Usage
load	the request has finished successfully
error	the request has finished with error
loading	the request has started

⚠️ 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"
  >
    <!-- your icon component -->
  </s-gmail>
</template>

<script>
  import { SGmail } from 'vue-socials'

  export default {
    name: 'SGmailSharing',
    
    components: { SGmail },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          to: '[email protected]',
          su: 'Title',
          cc: '[email protected]',
          bcc: '[email protected]',
          body: 'Hello\nWorld',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

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

Events

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

---

SGoogleBookmarks

Usage

<template>
  <s-google-bookmarks
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-google-bookmarks>
</template>

<script>
  import { SGoogleBookmarks } from 'vue-socials'

  export default {
    name: 'SGoogleBookmarksSharing',
    
    components: { SGoogleBookmarks },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          title: 'Title',
          annotation: 'Annotation',
          tags: ['tag'],
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: title – your bookmark title url – your url annotation – your text tags – your keywords or hashtags	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SHackerNews

Usage

<template>
  <s-hacker-news
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-hacker-news>
</template>

<script>
  import { SHackerNews } from 'vue-socials'

  export default {
    name: 'SHackerNewsSharing',
    
    components: { SHackerNews },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          title: 'Title',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

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

Events

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

---

SHatena

Usage

<template>
  <s-hatena
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-hatena>
</template>

<script>
  import { SHatena } from 'vue-socials'

  export default {
    name: 'SHatenaSharing',
    
    components: { SHatena },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          title: 'Title',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

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

Events

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

---

SHatenaCount

Usage

<template>
  <s-hatena-count
    :share-options="shareOptions"
    @load="onLoad"
    @error="onError"
    @loading="onLoading"
  ></s-hatena-count>
</template>

<script>
  import { SHatenaCount } from 'vue-socials'

  export default {
    name: 'SHatenaCountSharing',
    
    components: { SHatenaCount },
    
    data() {
      return {
        tag: 'span',
        shareOptions: {
          url: 'https://github.com/',
        },
      }
    },
    
    methods: {
      onLoad() {},
      onError() {},
      onLoading() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
shareOptions	object	Your share link parameters: url – the URL you want to share	{}
tag	string	Dynamic HTML tag or component	span

Events

Event name	Usage
load	the request has finished successfully
error	the request has finished with error
loading	the request has started

⚠️ 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"
  >
    <!-- your icon component -->
  </s-houzz>
</template>

<script>
  import { SHouzz } from 'vue-socials'

  export default {
    name: 'SHouzzSharing',
    
    components: { SHouzz },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          id: '123',
          image: 'url',
          title: 'Title',
          category: ['category'],
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 1100, height: 700, }
shareOptions	object	Your share link parameters: url – Canonical URL of your product. If you already have products listed in Houzz, make sure the URLs match exactly to prevent duplicate listings and maintain accuracy of the Ideabook count. id – A unique identifier that verifies you own this web page. image – URL of hi-res product image. title – Title of the product. category – Keywords to help categorize the product. (ie. 'Wall Sconces')	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SInstaPaper

Usage

<template>
  <s-insta-paper
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-insta-paper>
</template>

<script>
  import { SInstaPaper } from 'vue-socials'

  export default {
    name: 'SInstaPaperSharing',
    
    components: { SInstaPaper },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 600, }
shareOptions	object	Your share link parameters: url – the URL you want to share	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SKakaoStory

Usage

<template>
  <s-kakao-story
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-kakao-story>
</template>

<script>
  import { SKakaoStory } from 'vue-socials'

  export default {
    name: 'SKakaoStorySharing',
    
    components: { SKakaoStory },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          text: 'Text',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – the URL you want to share text – your blogpost text	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SLine

Usage

<template>
  <s-line
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-line>
</template>

<script>
  import { SLine } from 'vue-socials'

  export default {
    name: 'SLineSharing',
    
    components: { SLine },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          text: 'Text',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – the URL you want to share text – your blogpost text	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SLineCount

Usage

<template>
  <s-line-count
    :share-options="shareOptions"
    @load="onLoad"
    @error="onError"
    @loading="onLoading"
  ></s-line-count>
</template>

<script>
  import { SLineCount } from 'vue-socials'

  export default {
    name: 'SLineCountSharing',
    
    components: { SLineCount },
    
    data() {
      return {
        tag: 'span',
        shareOptions: {
          url: 'https://github.com/',
        },
      }
    },
    
    methods: {
      onLoad() {},
      onError() {},
      onLoading() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
shareOptions	object	Your share link parameters: url – the URL you want to share	{}
tag	string	Dynamic HTML tag or component	span

Events

Event name	Usage
load	the request has finished successfully
error	the request has finished with error
loading	the request has started

---

SLinkedIn

Usage

<template>
  <s-linked-in
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-linked-in>
</template>

<script>
  import { SLinkedIn } from 'vue-socials'

  export default {
    name: 'SLinkedInSharing',
    
    components: { SLinkedIn },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – the URL you want to share	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SLiveJournal

Usage

<template>
  <s-live-journal
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-live-journal>
</template>

<script>
  import { SLiveJournal } from 'vue-socials'

  export default {
    name: 'SLiveJournalSharing',
    
    components: { SLiveJournal },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          subject: 'Title',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – the URL you want to share subject – your title	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SMailRu

Usage

<template>
  <s-mail-ru
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-mail-ru>
</template>

<script>
  import { SMailRu } from 'vue-socials'

  export default {
    name: 'SMailRuSharing',
    
    components: { SMailRu },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          title: 'Title',
          description: 'Description',
          image: '',
          swfUrl: '',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – the URL you want to share title – your title description – your description image – your image swfUrl – your flash-player with video	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SMastodon

Usage

<template>
  <s-mastodon
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-mastodon>
</template>

<script>
  import { SMastodon } from 'vue-socials'

  export default {
    name: 'SSMastodonSharing',
    
    components: { SMastodon },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          domain: 'https://mas.to',
          url: 'https://github.com',
          text: 'Hello, world!',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 700, }
shareOptions	object	Your share link parameters: domain – the mastodon domain url – the URL you want to share text – your text	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SMicrosoftTeams

Usage

<template>
  <s-microsoft-teams
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-microsoft-teams>
</template>

<script>
  import { SMicrosoftTeams } from 'vue-socials'

  export default {
    name: 'SMicrosoftTeamsSharing',
    
    components: { SMicrosoftTeams },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          preview: true,
          text: 'Text',
          title: 'Title',
          instruction: 'Instruction',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – the URL you want to share title – Default Text to be inserted in the assignments "Title" field (50 character limit) text – Default Text to be inserted before the link in the message compose box (200 character limit) preview – Whether or not to show a preview of the content to share. instruction – Default Text to be inserted in the assignments "Instructions" field (200 character limit)	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SOdnoklassniki

Usage

<template>
  <s-odnoklassniki
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-odnoklassniki>
</template>

<script>
  import { SOdnoklassniki } from 'vue-socials'

  export default {
    name: 'SOdnoklassnikiSharing',
    
    components: { SOdnoklassniki },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – the URL you want to share	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SOdnoklassnikiCount

Usage

<template>
  <s-odnoklassniki-count
    :tag="tag"
    :share-options="shareOptions"
    @load="onLoad"
    @error="onError"
    @loading="onLoading"
  ></s-odnoklassniki-count>
</template>

<script>
  import { SOdnoklassnikiCount } from 'vue-socials'

  export default {
    name: 'SOdnoklassnikiCountSharing',
    
    components: { SOdnoklassnikiCount },
    
    data() {
      return {
        tag: 'span',
        shareOptions: {
          ref: 'https://github.com/',
        },
      }
    },
    
    methods: {
      onLoad() {},
      onError() {},
      onLoading() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
shareOptions	object	Your share link parameters: ref – the URL you want to share	{}
tag	string	Dynamic HTML tag or component	span

Events

Event name	Usage
load	the request has finished successfully
error	the request has finished with error
loading	the request has started

⚠️ 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"
  >
    <!-- your icon component -->
  </s-pinterest>
</template>

<script>
  import { SPinterest } from 'vue-socials'

  export default {
    name: 'SPinterestSharing',
    
    components: { SPinterest },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          media: '',
          description: 'Description',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – the URL you want to share media – Overrides the image and substitutes a different image in the Pin Create form. description – Overrides the default image description and substitutes an image description you provide.	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SPinterestCount

Usage

<template>
  <s-pinterest-count
    :tag="tag"
    :share-options="shareOptions"
    @load="onLoad"
    @error="onError"
    @loading="onLoading"
  ></s-pinterest-count>
</template>

<script>
  import { SPinterestCount } from 'vue-socials'

  export default {
    name: 'SPinterestCountSharing',
    
    components: { SPinterestCount },
    
    data() {
      return {
        tag: 'span',
        shareOptions: {
          url: 'https://github.com/',
        },
      }
    },
    
    methods: {
      onLoad() {},
      onError() {},
      onLoading() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
shareOptions	object	Your share link parameters: url – the URL you want to share	{}
tag	string	Dynamic HTML tag or component	span

Events

Event name	Usage
load	the request has finished successfully
error	the request has finished with error
loading	the request has started

⚠️ Warning

This component uses JSONP so the content won't be available during SSR.

---

SPocket

Usage

<template>
  <s-pocket
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-pocket>
</template>

<script>
  import { SPocket } from 'vue-socials'

  export default {
    name: 'SPocketSharing',
    
    components: { SPocket },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – the URL you want to share	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SQZone

Usage

<template>
  <s-q-zone
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-q-zone>
</template>

<script>
  import { SQZone } from 'vue-socials'

  export default {
    name: 'SQZoneSharing',
    
    components: { SQZone },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          title: 'Title',
          summary: 'Summary',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – the URL you want to share title – your title summary – your text	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SReddit

Usage

<template>
  <s-reddit
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-reddit>
</template>

<script>
  import { SReddit } from 'vue-socials'

  export default {
    name: 'SRedditSharing',
    
    components: { SReddit },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          title: 'Title',
          text: 'Hello World!',
          selftext: true,
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – the URL you want to share title – your title text – your text selftext – sets the displayed tab to the self post tab	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SRedditCount

Usage

<template>
  <s-reddit-count
    :tag="tag"
    :share-options="shareOptions"
    @load="onLoad"
    @error="onError"
    @loading="onLoading"
  ></s-reddit-count>
</template>

<script>
  import { SRedditCount } from 'vue-socials'

  export default {
    name: 'SRedditCountSharing',
    
    components: { SRedditCount },
    
    data() {
      return {
        tag: 'span',
        shareOptions: {
          url: 'https://github.com/',
        },
      }
    },
    
    methods: {
      onLoad() {},
      onError() {},
      onLoading() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
shareOptions	object	Your share link parameters: url – the URL you want to share	{}
tag	string	Dynamic HTML tag or component	span

Events

Event name	Usage
load	the request has finished successfully
error	the request has finished with error
loading	the request has started

⚠️ Warning

This component uses JSONP so the content won't be available during SSR.

---

SRenRen

Usage

<template>
  <s-ren-ren
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-ren-ren>
</template>

<script>
  import { SRenRen } from 'vue-socials'

  export default {
    name: 'SRenRenSharing',
    
    components: { SRenRen },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          srcUrl: 'https://github.com/',
          resourceUrl: 'https://github.com/',
          title: 'Title',
          description: 'Description',
          pic: '',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: srcUrl – the URL you want to share resourceUrl – the source Url of the shared resource, the default is the Referer in the header title – your title description – your text pic – your image	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SSkype

Usage

<template>
  <s-skype
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-skype>
</template>

<script>
  import { SSkype } from 'vue-socials'

  export default {
    name: 'SSkypeSharing',
    
    components: { SSkype },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          text: 'Text',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – the URL you want to share text – your text	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SSms

Usage

<template>
  <s-sms
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-sms>
</template>

<script>
  import { SSms } from 'vue-socials'

  export default {
    name: 'SSmsSharing',
    
    components: { SSms },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          number: '+1(999)999-99-99',
          body: 'Hello world!',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
shareOptions	object	Your share link parameters: number – your number body – your text	{}

---

STelegram

Usage

<template>
  <s-telegram
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-telegram>
</template>

<script>
  import { STelegram } from 'vue-socials'

  export default {
    name: 'STelegramSharing',
    
    components: { STelegram },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          text: 'Text',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – the URL you want to share text – your text	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SThreema

Usage

<template>
  <s-threema
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-threema>
</template>

<script>
  import { SThreema } from 'vue-socials'

  export default {
    name: 'SThreemaSharing',
    
    components: { SThreema },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          id: '',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – the URL you want to share id – your id	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

STrello

Usage

<template>
  <s-trello
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-trello>
</template>

<script>
  import { STrello } from 'vue-socials'

  export default {
    name: 'STrelloSharing',
    
    components: { STrello },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          name: 'Name',
          description: 'Description',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – the URL you want to share name – your card name description – your card description	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

STumblr

Usage

<template>
  <s-tumblr
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-tumblr>
</template>

<script>
  import { STumblr } from 'vue-socials'

  export default {
    name: 'STumblrSharing',
    
    components: { STumblr },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          canonicalUrl: 'https://github.com/',
          title: 'Title',
          caption: 'Caption',
          tags: ['hash', 'tag'],
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: canonicalUrl – the URL you want to share title – title of the Text post caption – post caption tags – list of tags	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

STumblrCount

Usage

<template>
  <s-tumblr-count
    :tag="tag"
    :share-options="shareOptions"
    @load="onLoad"
    @error="onError"
    @loading="onLoading"
  ></s-tumblr-count>
</template>

<script>
  import { STumblrCount } from 'vue-socials'

  export default {
    name: 'STumblrCountSharing',
    
    components: { STumblrCount },
    
    data() {
      return {
        tag: 'span',
        shareOptions: {
          url: 'https://github.com/',
        },
      }
    },
    
    methods: {
      onLoad() {},
      onError() {},
      onLoading() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
shareOptions	object	Your share link parameters: url – the URL you want to share	{}
tag	string	Dynamic HTML tag or component	span

Events

Event name	Usage
load	the request has finished successfully
error	the request has finished with error
loading	the request has started

⚠️ Warning

This component uses JSONP so the content won't be available during SSR.

---

STwitter

Usage

<template>
  <s-twitter
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-twitter>
</template>

<script>
  import { STwitter } from 'vue-socials'

  export default {
    name: 'STwitterSharing',
    
    components: { STwitter },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          text: 'Hello world',
          hashtags: ['hash', 'tag'],
          via: 'twitterdev',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – the URL you want to share text – post text via – username hashtags – list of tags	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SViber

Usage

<template>
  <s-viber
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-viber>
</template>

<script>
  import { SViber } from 'vue-socials'

  export default {
    name: 'SViberSharing',
    
    components: { SViber },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          text: 'Text',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – the URL you want to share text – post text	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SVkontakte

Usage

<template>
  <s-vkontakte
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-vkontakte>
</template>

<script>
  import { SVkontakte } from 'vue-socials'

  export default {
    name: 'SVkontakteSharing',
    
    components: { SVkontakte },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          title: 'Title',
          image: '',
          noParse: false,
          noVkLinks: false,
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – the URL you want to share title – post title image – image URL noParse – don't do additional request for missing information noVkLinks – don't add active profile links	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SVkontakteCount

Usage

<template>
  <s-vkontakte-count
    :tag="tag"
    :share-options="shareOptions"
    @load="onLoad"
    @error="onError"
    @loading="onLoading"
  ></s-vkontakte-count>
</template>

<script>
  import { SVkontakteCount } from 'vue-socials'

  export default {
    name: 'SVkontakteCountSharing',
    
    components: { SVkontakteCount },
    
    data() {
      return {
        tag: 'span',
        shareOptions: {
          url: 'https://github.com/',
        },
      }
    },
    
    methods: {
      onLoad() {},
      onError() {},
      onLoading() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
shareOptions	object	Your share link parameters: url – the URL you want to share	{}
tag	string	Dynamic HTML tag or component	span

Events

Event name	Usage
load	the request has finished successfully
error	the request has finished with error
loading	the request has started

⚠️ Warning

This component uses JSONP so the content won't be available during SSR.

---

SWeibo

Usage

<template>
  <s-weibo
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-weibo>
</template>

<script>
  import { SWeibo } from 'vue-socials'

  export default {
    name: 'SWeiboSharing',
    
    components: { SWeibo },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          title: 'Title',
          appkey: '',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – the URL you want to share title – post title appkey – your app key	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SWhatsApp

Usage

<template>
  <s-whats-app
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-whats-app>
</template>

<script>
  import { SWhatsApp } from 'vue-socials'

  export default {
    name: 'SWhatsAppSharing',
    
    components: { SWhatsApp },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          number: '1(999)999-99-99',
          text: 'Hello world!',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: number – your number text – post text	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SWordPress

Usage

<template>
  <s-word-press
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-word-press>
</template>

<script>
  import { SWordPress } from 'vue-socials'

  export default {
    name: 'SWordPressSharing',
    
    components: { SWordPress },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          domain: 'https://wordpress.org',
          url: 'https://github.com',
          title: 'Title',
          text: 'Text',
          image: '',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: title – post title text – post text domain – your domain url – the url of the current page image – url of an image file	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SXing

Usage

<template>
  <s-xing
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-xing>
</template>

<script>
  import { SXing } from 'vue-socials'

  export default {
    name: 'SXingSharing',
    
    components: { SXing },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          followUrl: '',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – A fixed URL to be shared followUrl – The URL of a XING news page for the Follow button shown on the success page.	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

SYahoo

Usage

<template>
  <s-yahoo
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-yahoo>
</template>

<script>
  import { SYahoo } from 'vue-socials'

  export default {
    name: 'SYahooSharing',
    
    components: { SYahoo },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          email: '[email protected]',
          subject: 'Subject',
          body: 'Hello\nWorld!',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

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

Events

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

---

SYammer

Usage

<template>
  <s-yammer
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- your icon component -->
  </s-yammer>
</template>

<script>
  import { SYammer } from 'vue-socials'

  export default {
    name: 'SYammerSharing',
    
    components: { SYammer },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          text: 'Text',
          groupId: '',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Prop	Type	Description	Default value
windowFeatures	object	Pass options to window.open(). Requested features of the new window.	{ width: 600, height: 540, }
shareOptions	object	Your share link parameters: url – A fixed URL to be shared text – post text groupId – your group id	{}
useNativeBehavior	boolean	Use native link behavior instead of window.open() or not	false

Events

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

---

Browsers support 🌎

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Samsung	Opera	Yandex
IE11, Edge 80	60+	60+	10+	10+	12+	50+	14.4+

License 📄

MIT

Support the project ⭐

If you feel awesome and want to support me in a small way, please consider starring and sharing the repo!

Contributing 🎉

Found a bug? Missing a specific feature? Your contributions are always welcome! Please have a look at the contribution guidelines first.

Contributors ❤️

Thanks goes to these wonderful people (emoji key):

Alexey Istomin ️️️️♿️ ⚠️ 💻 🤔

BodrovIgor 🖋 🎨