Morioh
Login
Vue.js Tutorial

Vue.js Tutorial

3 years ago

A Small And Customizable Social Share Button Component For Vue.js

Heart

Vue Socials

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

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

# Vue 2
npm install vue-socials

# Vue 3
npm install vue-socials@next

yarn

# Vue 2
yarn add vue-socials

# Vue 3
yarn add vue-socials@next

Import all components

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

Vue.use(VueSocials)

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

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

Import only specific component

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

Vue.component('SGithub', SGithub)

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

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

Documentation 🤗

Browse online documentation here

Socials

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+ |

Download Details:

Author: webistomin
The Demo/Documentation: View The Demo/Documentation
Download Link: Download The Source Code
Official Website: https://github.com/webistomin/vue-socials
License: MIT

#vue #vuejs #javascript #web-development #webdev

A Small And Customizable Social Share Button Component For Vue.js
9.25 GEEK