vue-socials
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    Heart

    Vue Socials

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


    NPM version NPM downloads GitHub issues GitHub last commit npm type definitions npm bundle size

    Key FeaturesInstallationDocumentationBrowsers supportLicenseSupport the projectContributing

    Key Features

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

    Installation 🚀

    npm

    npm install vue-socials

    yarn

    yarn add vue-socials

    Import all components

    import Vue from 'vue'
    import VueSocials from 'vue-socials';
    
    Vue.use(VueSocials)

    Import only specific component

    import Vue from 'vue'
    import { SGithub } from 'vue-socials';
    
    Vue.component('SGithub', SGithub)

    Documentation 🤗

    Browse online documentation here

    Socials

    B

    D

    E

    F

    G

    H

    I

    K

    L

    M

    O

    P

    Q

    R

    S

    T

    V

    W

    X

    Y


    SBlogger

    Usage

    <template>
      <s-blogger
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-blogger>
    </template>
    
    <script>
      import { SBlogger } from 'vue-socials'
    
      export default {
        name: 'SBloggerSharing',
        
        components: { SBlogger },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: { 
              url: 'https://github.com/', 
              title: 'Title', 
              text: 'Text',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    {}
    useNativeBehavior boolean Use native link behavior instead of window.open() or not false

    Events

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

    SDevTo

    Usage

    <template>
      <s-dev-to
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-dev-to>
    </template>
    
    <script>
      import { SDevTo } from 'vue-socials'
    
      export default {
        name: 'SDevToSharing',
        
        components: { SDevTo },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              title: 'Title',
              isPublished: false,
              tags: ['tag', 'tag2'],
              content: 'Text 1\nText 2\n{% wikipedia https://en.wikipedia.org/wiki/Wikipedia %}',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SDiaspora

    Usage

    <template>
      <s-diaspora
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-diaspora>
    </template>
    
    <script>
      import { SDiaspora } from 'vue-socials'
    
      export default {
        name: 'SDiasporaSharing',
        
        components: { SDiaspora },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              title: 'Title',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SDouban

    Usage

    <template>
      <s-douban
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-douban>
    </template>
    
    <script>
      import { SDouban } from 'vue-socials'
    
      export default {
        name: 'SDoubanSharing',
        
        components: { SDouban },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              title: 'Title',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SEmail

    Usage

    <template>
      <s-email :share-options="shareOptions"></s-email>
    </template>
    
    <script>
      import { SEmail } from 'vue-socials'
    
      export default {
        name: 'SEmailSharing',
        
        components: { SEmail },
        
        data() {
          return {
            shareOptions: {
              mail: 'google@gmail.com',
              cc: ['google1@gmail.com', 'google3@gmail.com'],
              bcc: ['google2@gmail.com', 'google4@gmail.com'],
              subject: 'Subject',
              body: 'Hello\nWorld',
            },
          }
        },
      };
    </script>

    Props

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

    SEvernote

    Usage

    <template>
      <s-evernote
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-evernote>
    </template>
    
    <script>
      import { SEvernote } from 'vue-socials'
    
      export default {
        name: 'SEvernoteSharing',
        
        components: { SEvernote },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              title: 'Title',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SFacebook

    Usage

    <template>
      <s-facebook
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-facebook>
    </template>
    
    <script>
      import { SFacebook } from 'vue-socials'
    
      export default {
        name: 'SFacebookSharing',
        
        components: { SFacebook },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              quote: 'Quote',
              hashtag: '#Github',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SFacebookCount

    Usage

    <template>
      <s-facebook-count
        :share-options="shareOptions"
        @load="onLoad"
        @error="onError"
        @loading="onLoading"
      ></s-facebook-count>
    </template>
    
    <script>
      import { SFacebookCount } from 'vue-socials'
    
      export default {
        name: 'SFacebookCountSharing',
        
        components: { SFacebookCount },
        
        data() {
          return {
            tag: 'span',
            shareOptions: {
              id: 'https://github.com/',
              fields: ['id', 'og_object'],
              accessToken: '',
            },
          }
        },
        
        methods: {
          onLoad() {},
          onError() {},
          onLoading() {},
        }
      };
    </script>

    Props

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

    Events

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

    ⚠️ Warning

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


    SFacebookMessenger

    Usage

    <template>
      <s-facebook-messenger
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-facebook-messenger>
    </template>
    
    <script>
      import { SFacebookMessenger } from 'vue-socials'
    
      export default {
        name: 'SFacebookMessengerSharing',
        
        components: { SFacebookMessenger },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              redirectUri: 'https://www.domain.com/',
              appId: 123456789,
              to: undefined,
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SFacebookWorkplace

    Usage

    <template>
      <s-facebook-workplace
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-facebook-workplace>
    </template>
    
    <script>
      import { SFacebookWorkplace } from 'vue-socials'
    
      export default {
        name: 'SFacebookWorkplaceSharing',
        
        components: { SFacebookWorkplace },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SFlipBoard

    Usage

    <template>
      <s-flip-board
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-flip-board>
    </template>
    
    <script>
      import { SFlipBoard } from 'vue-socials'
    
      export default {
        name: 'SFlipBoardSharing',
        
        components: { SFlipBoard },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              title: 'Title',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SGithub

    Usage

    <template>
      <s-github
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-github>
    </template>
    
    <script>
      import { SGithub } from 'vue-socials'
    
      export default {
        name: 'SGithubSharing',
        
        components: { SGithub },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              username: 'webistomin',
              type: 'profile',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SGithubCount

    Usage

    <template>
      <s-github-count
        :share-options="shareOptions"
        @load="onLoad"
        @error="onError"
        @loading="onLoading"
      ></s-github-count>
    </template>
    
    <script>
      import { SGithubCount } from 'vue-socials'
    
      export default {
        name: 'SGithubCountSharing',
        
        components: { SGithubCount },
        
        data() {
          return {
            tag: 'span',
            shareOptions: {
              username: 'webistomin',
              type: 'follow',
            },
          }
        },
        
        methods: {
          onLoad() {},
          onError() {},
          onLoading() {},
        }
      };
    </script>

    Props

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

    Events

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

    ⚠️ Warning

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


    SGithubGist

    Usage

    <template>
      <s-github-gist
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-github-gist>
    </template>
    
    <script>
      import { SGithubGist } from 'vue-socials'
    
      export default {
        name: 'SGithubGistSharing',
        
        components: { SGithubGist },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              username: 'ai',
              gistId: 'e3683b03ba936ade91d33dbc721cd6d8',
              type: 'star',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SGithubGistCount

    Usage

    <template>
      <s-github-gist-count
        :share-options="shareOptions"
        @load="onLoad"
        @error="onError"
        @loading="onLoading"
      ></s-github-gist-count>
    </template>
    
    <script>
      import { SGithubGistCount } from 'vue-socials'
    
      export default {
        name: 'SGithubGistCountSharing',
        
        components: { SGithubGistCount },
        
        data() {
          return {
            tag: 'span',
            shareOptions: {
              gistId: 'e3683b03ba936ade91d33dbc721cd6d8',
              type: 'fork',
            },
          }
        },
        
        methods: {
          onLoad() {},
          onError() {},
          onLoading() {},
        }
      };
    </script>

    Props

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

    Events

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

    ⚠️ Warning

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


    SGithubRepo

    Usage

    <template>
      <s-github-repo
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-github-repo>
    </template>
    
    <script>
      import { SGithubRepo } from 'vue-socials'
    
      export default {
        name: 'SGithubRepoSharing',
        
        components: { SGithubRepo },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              username: 'webistomin',
              repository: 'vue-socials',
              type: 'fork',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SGithubRepoCount

    Usage

    <template>
      <s-github-repo-count
        :share-options="shareOptions"
        @load="onLoad"
        @error="onError"
        @loading="onLoading"
      ></s-github-repo-count>
    </template>
    
    <script>
      import { SGithubRepoCount } from 'vue-socials'
    
      export default {
        name: 'SGithubRepoCountSharing',
        
        components: { SGithubRepoCount },
        
        data() {
          return {
            tag: 'span',
            shareOptions: {
              username: 'webistomin',
              repository: 'nanogram.js',
              type: 'fork',
            },
          }
        },
        
        methods: {
          onLoad() {},
          onError() {},
          onLoading() {},
        }
      };
    </script>

    Props

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

    Events

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

    ⚠️ Warning

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


    SGmail

    Usage

    <template>
      <s-gmail
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-gmail>
    </template>
    
    <script>
      import { SGmail } from 'vue-socials'
    
      export default {
        name: 'SGmailSharing',
        
        components: { SGmail },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              to: 'google@gmail.com',
              su: 'Title',
              cc: 'google1@gmail.com',
              bcc: 'google2@gmail.com',
              body: 'Hello\nWorld',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SGoogleBookmarks

    Usage

    <template>
      <s-google-bookmarks
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-google-bookmarks>
    </template>
    
    <script>
      import { SGoogleBookmarks } from 'vue-socials'
    
      export default {
        name: 'SGoogleBookmarksSharing',
        
        components: { SGoogleBookmarks },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              title: 'Title',
              annotation: 'Annotation',
              tags: ['tag'],
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SHackerNews

    Usage

    <template>
      <s-hacker-news
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-hacker-news>
    </template>
    
    <script>
      import { SHackerNews } from 'vue-socials'
    
      export default {
        name: 'SHackerNewsSharing',
        
        components: { SHackerNews },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              title: 'Title',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SHatena

    Usage

    <template>
      <s-hatena
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-hatena>
    </template>
    
    <script>
      import { SHatena } from 'vue-socials'
    
      export default {
        name: 'SHatenaSharing',
        
        components: { SHatena },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              title: 'Title',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SHatenaCount

    Usage

    <template>
      <s-hatena-count
        :share-options="shareOptions"
        @load="onLoad"
        @error="onError"
        @loading="onLoading"
      ></s-hatena-count>
    </template>
    
    <script>
      import { SHatenaCount } from 'vue-socials'
    
      export default {
        name: 'SHatenaCountSharing',
        
        components: { SHatenaCount },
        
        data() {
          return {
            tag: 'span',
            shareOptions: {
              url: 'https://github.com/',
            },
          }
        },
        
        methods: {
          onLoad() {},
          onError() {},
          onLoading() {},
        }
      };
    </script>

    Props

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

    Events

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

    ⚠️ Warning

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


    SHouzz

    Usage

    <template>
      <s-houzz
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-houzz>
    </template>
    
    <script>
      import { SHouzz } from 'vue-socials'
    
      export default {
        name: 'SHouzzSharing',
        
        components: { SHouzz },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              id: '123',
              image: 'url',
              title: 'Title',
              category: ['category'],
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SInstaPaper

    Usage

    <template>
      <s-insta-paper
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-insta-paper>
    </template>
    
    <script>
      import { SInstaPaper } from 'vue-socials'
    
      export default {
        name: 'SInstaPaperSharing',
        
        components: { SInstaPaper },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SKakaoStory

    Usage

    <template>
      <s-kakao-story
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-kakao-story>
    </template>
    
    <script>
      import { SKakaoStory } from 'vue-socials'
    
      export default {
        name: 'SKakaoStorySharing',
        
        components: { SKakaoStory },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              text: 'Text',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SLine

    Usage

    <template>
      <s-line
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-line>
    </template>
    
    <script>
      import { SLine } from 'vue-socials'
    
      export default {
        name: 'SLineSharing',
        
        components: { SLine },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              text: 'Text',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SLineCount

    Usage

    <template>
      <s-line-count
        :share-options="shareOptions"
        @load="onLoad"
        @error="onError"
        @loading="onLoading"
      ></s-line-count>
    </template>
    
    <script>
      import { SLineCount } from 'vue-socials'
    
      export default {
        name: 'SLineCountSharing',
        
        components: { SLineCount },
        
        data() {
          return {
            tag: 'span',
            shareOptions: {
              url: 'https://github.com/',
            },
          }
        },
        
        methods: {
          onLoad() {},
          onError() {},
          onLoading() {},
        }
      };
    </script>

    Props

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

    Events

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

    SLinkedIn

    Usage

    <template>
      <s-linked-in
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-linked-in>
    </template>
    
    <script>
      import { SLinkedIn } from 'vue-socials'
    
      export default {
        name: 'SLinkedInSharing',
        
        components: { SLinkedIn },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SLiveJournal

    Usage

    <template>
      <s-live-journal
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-live-journal>
    </template>
    
    <script>
      import { SLiveJournal } from 'vue-socials'
    
      export default {
        name: 'SLiveJournalSharing',
        
        components: { SLiveJournal },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              subject: 'Title',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SMailRu

    Usage

    <template>
      <s-mail-ru
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-mail-ru>
    </template>
    
    <script>
      import { SMailRu } from 'vue-socials'
    
      export default {
        name: 'SMailRuSharing',
        
        components: { SMailRu },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              title: 'Title',
              description: 'Description',
              image: '',
              swfUrl: '',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SMicrosoftTeams

    Usage

    <template>
      <s-microsoft-teams
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-microsoft-teams>
    </template>
    
    <script>
      import { SMicrosoftTeams } from 'vue-socials'
    
      export default {
        name: 'SMicrosoftTeamsSharing',
        
        components: { SMicrosoftTeams },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              preview: true,
              text: 'Text',
              title: 'Title',
              instruction: 'Instruction',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SOdnoklassniki

    Usage

    <template>
      <s-odnoklassniki
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-odnoklassniki>
    </template>
    
    <script>
      import { SOdnoklassniki } from 'vue-socials'
    
      export default {
        name: 'SOdnoklassnikiSharing',
        
        components: { SOdnoklassniki },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SOdnoklassnikiCount

    Usage

    <template>
      <s-odnoklassniki-count
        :tag="tag"
        :share-options="shareOptions"
        @load="onLoad"
        @error="onError"
        @loading="onLoading"
      ></s-odnoklassniki-count>
    </template>
    
    <script>
      import { SOdnoklassnikiCount } from 'vue-socials'
    
      export default {
        name: 'SOdnoklassnikiCountSharing',
        
        components: { SOdnoklassnikiCount },
        
        data() {
          return {
            tag: 'span',
            shareOptions: {
              ref: 'https://github.com/',
            },
          }
        },
        
        methods: {
          onLoad() {},
          onError() {},
          onLoading() {},
        }
      };
    </script>

    Props

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

    Events

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

    ⚠️ Warning

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


    SPinterest

    Usage

    <template>
      <s-pinterest
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-pinterest>
    </template>
    
    <script>
      import { SPinterest } from 'vue-socials'
    
      export default {
        name: 'SPinterestSharing',
        
        components: { SPinterest },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              media: '',
              description: 'Description',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SPinterestCount

    Usage

    <template>
      <s-pinterest-count
        :tag="tag"
        :share-options="shareOptions"
        @load="onLoad"
        @error="onError"
        @loading="onLoading"
      ></s-pinterest-count>
    </template>
    
    <script>
      import { SPinterestCount } from 'vue-socials'
    
      export default {
        name: 'SPinterestCountSharing',
        
        components: { SPinterestCount },
        
        data() {
          return {
            tag: 'span',
            shareOptions: {
              url: 'https://github.com/',
            },
          }
        },
        
        methods: {
          onLoad() {},
          onError() {},
          onLoading() {},
        }
      };
    </script>

    Props

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

    Events

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

    ⚠️ Warning

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


    SPocket

    Usage

    <template>
      <s-pocket
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-pocket>
    </template>
    
    <script>
      import { SPocket } from 'vue-socials'
    
      export default {
        name: 'SPocketSharing',
        
        components: { SPocket },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SQZone

    Usage

    <template>
      <s-q-zone
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-q-zone>
    </template>
    
    <script>
      import { SQZone } from 'vue-socials'
    
      export default {
        name: 'SQZoneSharing',
        
        components: { SQZone },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              title: 'Title',
              summary: 'Summary',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SReddit

    Usage

    <template>
      <s-reddit
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-reddit>
    </template>
    
    <script>
      import { SReddit } from 'vue-socials'
    
      export default {
        name: 'SRedditSharing',
        
        components: { SReddit },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              title: 'Title',
              text: 'Hello World!',
              selftext: true,
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SRedditCount

    Usage

    <template>
      <s-reddit-count
        :tag="tag"
        :share-options="shareOptions"
        @load="onLoad"
        @error="onError"
        @loading="onLoading"
      ></s-reddit-count>
    </template>
    
    <script>
      import { SRedditCount } from 'vue-socials'
    
      export default {
        name: 'SRedditCountSharing',
        
        components: { SRedditCount },
        
        data() {
          return {
            tag: 'span',
            shareOptions: {
              url: 'https://github.com/',
            },
          }
        },
        
        methods: {
          onLoad() {},
          onError() {},
          onLoading() {},
        }
      };
    </script>

    Props

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

    Events

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

    ⚠️ Warning

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


    SRenRen

    Usage

    <template>
      <s-ren-ren
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-ren-ren>
    </template>
    
    <script>
      import { SRenRen } from 'vue-socials'
    
      export default {
        name: 'SRenRenSharing',
        
        components: { SRenRen },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              srcUrl: 'https://github.com/',
              resourceUrl: 'https://github.com/',
              title: 'Title',
              description: 'Description',
              pic: '',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SSkype

    Usage

    <template>
      <s-skype
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-skype>
    </template>
    
    <script>
      import { SSkype } from 'vue-socials'
    
      export default {
        name: 'SSkypeSharing',
        
        components: { SSkype },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              text: 'Text',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SSms

    Usage

    <template>
      <s-sms
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-sms>
    </template>
    
    <script>
      import { SSms } from 'vue-socials'
    
      export default {
        name: 'SSmsSharing',
        
        components: { SSms },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              number: '+1(999)999-99-99',
              body: 'Hello world!',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    STelegram

    Usage

    <template>
      <s-telegram
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-telegram>
    </template>
    
    <script>
      import { STelegram } from 'vue-socials'
    
      export default {
        name: 'STelegramSharing',
        
        components: { STelegram },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              text: 'Text',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SThreema

    Usage

    <template>
      <s-threema
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-threema>
    </template>
    
    <script>
      import { SThreema } from 'vue-socials'
    
      export default {
        name: 'SThreemaSharing',
        
        components: { SThreema },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              id: '',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    STrello

    Usage

    <template>
      <s-trello
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-trello>
    </template>
    
    <script>
      import { STrello } from 'vue-socials'
    
      export default {
        name: 'STrelloSharing',
        
        components: { STrello },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              name: 'Name',
              description: 'Description',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    STumblr

    Usage

    <template>
      <s-tumblr
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-tumblr>
    </template>
    
    <script>
      import { STumblr } from 'vue-socials'
    
      export default {
        name: 'STumblrSharing',
        
        components: { STumblr },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              canonicalUrl: 'https://github.com/',
              title: 'Title',
              caption: 'Caption',
              tags: ['hash', 'tag'],
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    STumblrCount

    Usage

    <template>
      <s-tumblr-count
        :tag="tag"
        :share-options="shareOptions"
        @load="onLoad"
        @error="onError"
        @loading="onLoading"
      ></s-tumblr-count>
    </template>
    
    <script>
      import { STumblrCount } from 'vue-socials'
    
      export default {
        name: 'STumblrCountSharing',
        
        components: { STumblrCount },
        
        data() {
          return {
            tag: 'span',
            shareOptions: {
              url: 'https://github.com/',
            },
          }
        },
        
        methods: {
          onLoad() {},
          onError() {},
          onLoading() {},
        }
      };
    </script>

    Props

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

    Events

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

    ⚠️ Warning

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


    STwitter

    Usage

    <template>
      <s-twitter
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-twitter>
    </template>
    
    <script>
      import { STwitter } from 'vue-socials'
    
      export default {
        name: 'STwitterSharing',
        
        components: { STwitter },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              text: 'Hello world',
              hashtags: ['hash', 'tag'],
              via: 'twitterdev',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SViber

    Usage

    <template>
      <s-viber
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-viber>
    </template>
    
    <script>
      import { SViber } from 'vue-socials'
    
      export default {
        name: 'SViberSharing',
        
        components: { SViber },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              text: 'Text',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SVkontakte

    Usage

    <template>
      <s-vkontakte
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-vkontakte>
    </template>
    
    <script>
      import { SVkontakte } from 'vue-socials'
    
      export default {
        name: 'SVkontakteSharing',
        
        components: { SVkontakte },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              title: 'Title',
              image: '',
              noParse: false,
              noVkLinks: false,
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SVkontakteCount

    Usage

    <template>
      <s-vkontakte-count
        :tag="tag"
        :share-options="shareOptions"
        @load="onLoad"
        @error="onError"
        @loading="onLoading"
      ></s-vkontakte-count>
    </template>
    
    <script>
      import { SVkontakteCount } from 'vue-socials'
    
      export default {
        name: 'SVkontakteCountSharing',
        
        components: { SVkontakteCount },
        
        data() {
          return {
            tag: 'span',
            shareOptions: {
              url: 'https://github.com/',
            },
          }
        },
        
        methods: {
          onLoad() {},
          onError() {},
          onLoading() {},
        }
      };
    </script>

    Props

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

    Events

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

    ⚠️ Warning

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


    SWeibo

    Usage

    <template>
      <s-weibo
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-weibo>
    </template>
    
    <script>
      import { SWeibo } from 'vue-socials'
    
      export default {
        name: 'SWeiboSharing',
        
        components: { SWeibo },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              title: 'Title',
              appkey: '',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SWhatsApp

    Usage

    <template>
      <s-whats-app
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-whats-app>
    </template>
    
    <script>
      import { SWhatsApp } from 'vue-socials'
    
      export default {
        name: 'SWhatsAppSharing',
        
        components: { SWhatsApp },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              number: '1(999)999-99-99',
              text: 'Hello world!',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SWordPress

    Usage

    <template>
      <s-word-press
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-word-press>
    </template>
    
    <script>
      import { SWordPress } from 'vue-socials'
    
      export default {
        name: 'SWordPressSharing',
        
        components: { SWordPress },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              domain: 'https://wordpress.org',
              url: 'https://github.com',
              title: 'Title',
              text: 'Text',
              image: '',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SXing

    Usage

    <template>
      <s-xing
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-xing>
    </template>
    
    <script>
      import { SXing } from 'vue-socials'
    
      export default {
        name: 'SXingSharing',
        
        components: { SXing },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              followUrl: '',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SYahoo

    Usage

    <template>
      <s-yahoo
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-yahoo>
    </template>
    
    <script>
      import { SYahoo } from 'vue-socials'
    
      export default {
        name: 'SYahooSharing',
        
        components: { SYahoo },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              email: 'mail@gmail.com',
              subject: 'Subject',
              body: 'Hello\nWorld!',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    SYammer

    Usage

    <template>
      <s-yammer
        :window-features="windowFeatures"
        :share-options="shareOptions"
        :use-native-behavior="useNativeBehavior"
        @popup-close="onClose"
        @popup-open="onOpen"
        @popup-block="onBlock"
        @popup-focus="onFocus"
      ></s-yammer>
    </template>
    
    <script>
      import { SYammer } from 'vue-socials'
    
      export default {
        name: 'SYammerSharing',
        
        components: { SYammer },
        
        data() {
          return {
            windowFeatures: {},
            shareOptions: {
              url: 'https://github.com/',
              text: 'Text',
              groupId: '',
            },
            useNativeBehavior: false,
          }
        },
        
        methods: {
          onClose() {},
          onOpen() {},
          onBlock() {},
          onFocus() {},
        }
      };
    </script>

    Props

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

    Events

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

    Browsers support 🌎

    IE / Edge
    IE / Edge
    Firefox
    Firefox
    Chrome
    Chrome
    Safari
    Safari
    iOS Safari
    iOS Safari
    Samsung
    Samsung
    Opera
    Opera
    Yandex
    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

    🖋 🎨

    Install

    npm i vue-socials

    DownloadsWeekly Downloads

    275

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    844 kB

    Total Files

    553

    Last publish

    Collaborators

    • webistomin