Style agnostic Vue 3 plugin for social sharing your links on major social networks. Typescript friendly!
Basically it's a modern fork of vue-social-sharing library. If you are using vue 2 you should use that library.

Baidu Bluesky Buffer Email EverNote Facebook FlipBoard HackerNews InstaPaper Line LinkedIn Messenger Odnoklassniki Pinterest Pocket Reddit Skype SMS StumbleUpon Telegram Threads Tumblr Twitter X Viber VK Weibo WhatsApp Wordpress Xing Yammer

# Using pnpm pnpm add vue3-social-sharing # Using yarn yarn add vue3-social-sharing # Using npm npm install vue3-social-sharing

<script setup lang="ts">  import {useShareLink} from "vue3-social-sharing";  const {shareLink} = useShareLink();  const share = () => {  shareLink({  network: "facebook",  url: "https://example.com"  })  } </script> <template> <main> <span @click="share">Share on facebook</span> </main> </template>

You can use this package as a regular vue plugin.

import Vue3SocialSharingPlugin from "vue3-social-sharing"; const app = createApp(App); app.use(Vue3SocialSharingPlugin); app.mount("#app");

After you'll be able to use ShareNetwork component in your app like this:

<share-network network="facebook" url="https://example.com" v-slot="{ share }" > <span @click="share">Share on Facebook</span> </share-network> 

Here you can find the demo page.

<script setup lang="ts"> import { ShareNetwork } from "vue3-social-sharing"; </script> <template> <ShareNetwork network="facebook" url="https://example.com" v-slot="{ share }" > <span @click="share">Share on Facebook</span> </ShareNetwork> </template>

The url is the only property required for all networks.

You are able to add your custom network by providing shareNetworks option to the vue plugin.

import Vue3SocialSharingPlugin from "vue3-social-sharing"; const app = createApp(App); app.use(Vue3SocialSharingPlugin, { shareNetworks: { "my-network": "https://example.com?url=@u&title=@t" } }); app.mount("#app");

Available template properties in your link:

• @u = url
• @t = title
• @d = description
• @q = quote
• @h = hashtags
• @m = media
• @tu = twitterUser

You can find a full example in the demo.

You can find more examples in the playground dir of this repo.

Feel free to open an issue to ask for a new social network support.

• Fork the repo
• Create a feature branch with an issue number if it's related to any existing issue
• Run npm install
• Make you changes
• Run the tests npm run test (Ofc you can write your own tests if you feel the need)
• Update the documentation if needed
• Run npm run build, commit your changes and make a pull request.