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

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

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

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

<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: '[email protected]',
          cc: ['[email protected]', '[email protected]'],
          bcc: ['[email protected]', '[email protected]'],
          subject: 'Subject',
          body: 'Hello\nWorld',
        },
      }
    },
  };
</script>

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

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

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

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

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

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

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

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

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

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

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

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

<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: '[email protected]',
          su: 'Title',
          cc: '[email protected]',
          bcc: '[email protected]',
          body: 'Hello\nWorld',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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"
  >
    <!-- your icon component -->
  </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>

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

<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"
  >
    <!-- your icon component -->
  </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>

<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"
  >
    <!-- your icon component -->
  </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>