2.0.5 • Published 10 months ago

vue-socials v2.0.5

Weekly downloads
147
License
MIT
Repository
-
Last release
10 months ago

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

D

E

F

G

H

I

K

L

M

O

P

Q

R

S

T

V

W

X

Y


SBlogger

Usage

<template>
  <s-blogger
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  >
    <!-- 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

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 600, height: 540, }
shareOptionsobjectYour share link parameters: url – the URL you want to share title – your blogpost title text – your blogpost content {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.open() has been focused

SDevTo

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 600, height: 540, }
shareOptionsobjectYour share link parameters: title – your blogpost title isPublished – is your blogpost published tags – hashtags for blogpost content – your blogpost content {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.open() has been focused

SDiaspora

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 600, height: 540, }
shareOptionsobjectYour share link parameters: url – the URL you want to share title – your blogpost title {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.open() has been focused

SDouban

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 1100, height: 450, }
shareOptionsobjectYour share link parameters: url – the URL you want to share title – your blogpost title {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.open() has been focused

SEmail

Usage

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

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

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

Props

PropTypeDescriptionDefault value
shareOptionsobjectYour share link parameters: mail – e-mail recipient address subject – subject of e-mail cc – carbon copy e-mail address bcc – blind carbon copy e-mail address body – body of e-mail {}

SEvernote

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 800, height: 560, }
shareOptionsobjectYour share link parameters: url – the URL you want to share title – your blogpost title {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.open() has been focused

SFacebook

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 685, height: 600, }
shareOptionsobjectYour share link parameters: url – the URL you want to share quote – your blogpost quote hashtag – your blogpost hashtag {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.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

PropTypeDescriptionDefault value
shareOptionsobjectYour 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. {}
tagstringDynamic HTML tag or componentspan

Events

Event nameUsage
loadthe request has finished successfully
errorthe request has finished with error
loadingthe request has started

⚠️ Warning

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


SFacebookMessenger

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 685, height: 600, }
shareOptionsobjectYour 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. {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.open() has been focused

SFacebookWorkplace

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 685, height: 600, }
shareOptionsobjectYour share link parameters: url – the URL you want to share {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.open() has been focused

SFlipBoard

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 834, height: 572, }
shareOptionsobjectYour share link parameters: url – the URL you want to share title – your blogpost title {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.open() has been focused

SGithub

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 834, height: 572, }
shareOptionsobjectYour share link parameters: username – your GitHub username type – share link type (sponsor, follow, profile) {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.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

PropTypeDescriptionDefault value
shareOptionsobjectYour share link parameters: username – your GitHub username type – share link type (follow) {}
tagstringDynamic HTML tag or componentspan

Events

Event nameUsage
loadthe request has finished successfully
errorthe request has finished with error
loadingthe request has started

⚠️ Warning

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


SGithubGist

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 834, height: 572, }
shareOptionsobjectYour share link parameters: username – your gist username gistId – your gist id type – share link type (gist, star, fork, download) {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.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

PropTypeDescriptionDefault value
shareOptionsobjectYour share link parameters: gistId – your gist id type – share link type (fork) {}
tagstringDynamic HTML tag or componentspan

Events

Event nameUsage
loadthe request has finished successfully
errorthe request has finished with error
loadingthe request has started

⚠️ Warning

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


SGithubRepo

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 834, height: 572, }
shareOptionsobjectYour share link parameters: username – your gist username repository – your repository name type – share link type (repo, watch, star, fork, download, issue, pr, template) {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.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

PropTypeDescriptionDefault value
shareOptionsobjectYour share link parameters: username – your github username repository – your github repository type – share link type (watch, type, fork, issues) {}
tagstringDynamic HTML tag or componentspan

Events

Event nameUsage
loadthe request has finished successfully
errorthe request has finished with error
loadingthe request has started

⚠️ Warning

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


SGmail

Usage

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

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

  export default {
    name: 'SGmailSharing',
    
    components: { SGmail },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          to: 'google@gmail.com',
          su: 'Title',
          cc: 'google1@gmail.com',
          bcc: 'google2@gmail.com',
          body: 'Hello\nWorld',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 600, height: 540, }
shareOptionsobjectYour 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 {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.open() has been focused

SGoogleBookmarks

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 600, height: 540, }
shareOptionsobjectYour share link parameters: title – your bookmark title url – your url annotation – your text tags – your keywords or hashtags {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.open() has been focused

SHackerNews

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 600, height: 540, }
shareOptionsobjectYour share link parameters: title – your bookmark title url – your url {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.open() has been focused

SHatena

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 600, height: 540, }
shareOptionsobjectYour share link parameters: title – your bookmark title url – your url {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.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

PropTypeDescriptionDefault value
shareOptionsobjectYour share link parameters: url – the URL you want to share {}
tagstringDynamic HTML tag or componentspan

Events

Event nameUsage
loadthe request has finished successfully
errorthe request has finished with error
loadingthe request has started

⚠️ Warning

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


SHouzz

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 1100, height: 700, }
shareOptionsobjectYour 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') {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.open() has been focused

SInstaPaper

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 600, height: 600, }
shareOptionsobjectYour share link parameters: url – the URL you want to share {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.open() has been focused

SKakaoStory

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 600, height: 540, }
shareOptionsobjectYour share link parameters: url – the URL you want to share text – your blogpost text {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.open() has been focused

SLine

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 600, height: 540, }
shareOptionsobjectYour share link parameters: url – the URL you want to share text – your blogpost text {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.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

PropTypeDescriptionDefault value
shareOptionsobjectYour share link parameters: url – the URL you want to share {}
tagstringDynamic HTML tag or componentspan

Events

Event nameUsage
loadthe request has finished successfully
errorthe request has finished with error
loadingthe request has started

SLinkedIn

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 600, height: 540, }
shareOptionsobjectYour share link parameters: url – the URL you want to share {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.open() has been focused

SLiveJournal

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 600, height: 540, }
shareOptionsobjectYour share link parameters: url – the URL you want to share subject – your title {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.open() has been focused

SMailRu

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 600, height: 540, }
shareOptionsobjectYour 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 {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.open() has been focused

SMastodon

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 600, height: 700, }
shareOptionsobjectYour share link parameters: domain – the mastodon domain url – the URL you want to share text – your text {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.open() has been focused

SMicrosoftTeams

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 600, height: 540, }
shareOptionsobjectYour 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) {}
useNativeBehaviorbooleanUse native link behavior instead of window.open() or notfalse

Events

Event nameUsage
popup-openwindow.open() has been opened
popup-closewindow.open() has been closed
popup-blockwindow.open() has been blocked
popup-focuswindow.open() has been focused

SOdnoklassniki

Usage

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

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

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

Props

PropTypeDescriptionDefault value
windowFeaturesobjectPass options to window.open(). Requested features of the new window.{ width: 600, height: 540, }
shareOptionsobjectYour share link parameters: <br /