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

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

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

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

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

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

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

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

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

SEmail

Usage

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

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

  export default {
    name: 'SEmailSharing',

    components: { SEmail },

    data() {
      return {
        shareOptions: {
          mail: 'google@gmail.com',
          cc: ['google1@gmail.com', 'google3@gmail.com'],
          bcc: ['google2@gmail.com', 'google4@gmail.com'],
          subject: 'Subject',
          body: 'Hello\nWorld',
        },
      }
    },
  };
</script>

Props

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Events

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

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

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

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

Events

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

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

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

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

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: '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

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

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

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

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

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

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

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

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

shareOptions | object | Your share link parameters:
url – the URL you want to share
| {} tag | string | Dynamic HTML tag or component | span

Events

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

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

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

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

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

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

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

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

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

shareOptions | object | Your share link parameters:
url – the URL you want to share
| {} tag | string | Dynamic HTML tag or component | span

Events

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

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

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

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

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

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

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

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

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

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

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

windowFeatures | object | Pass options to window.open(). Requested features of the new window. | { width: 600, height: 540, } shareOptions | object | Your share link parameters: <br /