Vue Socials

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

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

Key Features ✨

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

Installation 🚀

npm

# Vue 2
npm install vue-socials@1

# Vue 3
npm install vue-socials

yarn

# Vue 2
yarn add vue-socials@1

# Vue 3
yarn add vue-socials

Import all components (not recommended)

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

Vue.use(VueSocials)

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

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

Import only specific component

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

Vue.component('SGithub', SGithub)

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

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

Documentation 🤗

Browse online documentation here

Socials

B

• Blogger

D

• DevTo

• Diaspora

• Douban

E

• Email

• Evernote

F

• Facebook

  • Facebook counter

• Facebook Messenger

• Facebook Workplace

• Flipboard

G

• Github

  • Github counter

• Github gist

  • Github gist counter

• Github repository

  • Github repository counter

• Gmail

• Google Bookmarks

H

• Hacker News

• Hatena

  • Hatena counter

• Houzz

I

• Instapaper

K

• Kakao Story

L

• Line

  • Line counter

• Linkedin

• LiveJournal

M

• MailRu

• Mastodon

• Microsoft Teams

O

• Odnoklassniki

  • Odnoklassniki counter

P

• Pinterest

  • Pinterest counter

• Pocket

Q

• Qzone

R

• Reddit

  • Reddit counter

• Renren

S

• Skype

• Sms

T

• Telegram

• Threema

• Trello

• Tumblr

  • Tumblr counter

• Twitter

V

• Viber

• Vkontakte

  • Vkontakte counter

W

• Weibo

• Whatsapp

• Wordpress

X

• Xing

Y

• Yahoo

• Yammer

SBlogger

Usage

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

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

  export default {
    name: 'SBloggerSharing',

    components: { SBlogger },

    data() {
      return {
        windowFeatures: {},
        shareOptions: { 
          url: 'https://github.com/', 
          title: 'Title', 
          text: 'Text',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

SDevTo

Usage

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

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

  export default {
    name: 'SDevToSharing',

    components: { SDevTo },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          title: 'Title',
          isPublished: false,
          tags: ['tag', 'tag2'],
          content: 'Text 1\nText 2\n{% wikipedia https://en.wikipedia.org/wiki/Wikipedia %}',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

SDiaspora

Usage

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

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

  export default {
    name: 'SDiasporaSharing',

    components: { SDiaspora },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          title: 'Title',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

SDouban

Usage

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

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

  export default {
    name: 'SDoubanSharing',

    components: { SDouban },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          title: 'Title',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

SEmail

Usage

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

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

  export default {
    name: 'SEmailSharing',

    components: { SEmail },

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

Props

SEvernote

Usage

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

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

  export default {
    name: 'SEvernoteSharing',

    components: { SEvernote },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          title: 'Title',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

SFacebook

Usage

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

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

  export default {
    name: 'SFacebookSharing',

    components: { SFacebook },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          quote: 'Quote',
          hashtag: '#Github',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

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

Events

⚠️ Warning

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

SFacebookMessenger

Usage

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

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

  export default {
    name: 'SFacebookMessengerSharing',

    components: { SFacebookMessenger },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          redirectUri: 'https://www.domain.com/',
          appId: 123456789,
          to: undefined,
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

SFacebookWorkplace

Usage

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

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

  export default {
    name: 'SFacebookWorkplaceSharing',

    components: { SFacebookWorkplace },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

SFlipBoard

Usage

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

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

  export default {
    name: 'SFlipBoardSharing',

    components: { SFlipBoard },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          title: 'Title',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

SGithub

Usage

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

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

  export default {
    name: 'SGithubSharing',

    components: { SGithub },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          username: 'webistomin',
          type: 'profile',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

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

Events

⚠️ Warning

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

SGithubGist

Usage

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

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

  export default {
    name: 'SGithubGistSharing',

    components: { SGithubGist },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          username: 'ai',
          gistId: 'e3683b03ba936ade91d33dbc721cd6d8',
          type: 'star',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

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

Events

⚠️ Warning

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

SGithubRepo

Usage

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

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

  export default {
    name: 'SGithubRepoSharing',

    components: { SGithubRepo },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          username: 'webistomin',
          repository: 'vue-socials',
          type: 'fork',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

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

Events

⚠️ Warning

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

SGmail

Usage

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

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

  export default {
    name: 'SGmailSharing',

    components: { SGmail },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          to: 'google@gmail.com',
          su: 'Title',
          cc: 'google1@gmail.com',
          bcc: 'google2@gmail.com',
          body: 'Hello\nWorld',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

SGoogleBookmarks

Usage

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

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

  export default {
    name: 'SGoogleBookmarksSharing',

    components: { SGoogleBookmarks },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          title: 'Title',
          annotation: 'Annotation',
          tags: ['tag'],
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

SHackerNews

Usage

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

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

  export default {
    name: 'SHackerNewsSharing',

    components: { SHackerNews },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          title: 'Title',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

SHatena

Usage

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

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

  export default {
    name: 'SHatenaSharing',

    components: { SHatena },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          title: 'Title',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

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

Events

⚠️ Warning

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

SHouzz

Usage

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

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

  export default {
    name: 'SHouzzSharing',

    components: { SHouzz },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          id: '123',
          image: 'url',
          title: 'Title',
          category: ['category'],
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

SInstaPaper

Usage

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

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

  export default {
    name: 'SInstaPaperSharing',

    components: { SInstaPaper },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

SKakaoStory

Usage

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

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

  export default {
    name: 'SKakaoStorySharing',

    components: { SKakaoStory },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          text: 'Text',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

SLine

Usage

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

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

  export default {
    name: 'SLineSharing',

    components: { SLine },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          text: 'Text',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

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

Events

SLinkedIn

Usage

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

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

  export default {
    name: 'SLinkedInSharing',

    components: { SLinkedIn },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

SLiveJournal

Usage

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

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

  export default {
    name: 'SLiveJournalSharing',

    components: { SLiveJournal },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          subject: 'Title',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

SMailRu

Usage

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

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

  export default {
    name: 'SMailRuSharing',

    components: { SMailRu },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          title: 'Title',
          description: 'Description',
          image: '',
          swfUrl: '',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

SMastodon

Usage

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

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

  export default {
    name: 'SSMastodonSharing',

    components: { SMastodon },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          domain: 'https://mas.to',
          url: 'https://github.com',
          text: 'Hello, world!',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

SMicrosoftTeams

Usage

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

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

  export default {
    name: 'SMicrosoftTeamsSharing',

    components: { SMicrosoftTeams },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
          preview: true,
          text: 'Text',
          title: 'Title',
          instruction: 'Instruction',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

Events

SOdnoklassniki

Usage

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

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

  export default {
    name: 'SOdnoklassnikiSharing',

    components: { SOdnoklassniki },

    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          url: 'https://github.com/',
        },
        useNativeBehavior: false,
      }
    },

    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props