Vue 3 social sharing

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.

Demo page

Available networks

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

Installation

# Using pnpm
pnpm add vue3-social-sharing

# Using yarn
yarn add vue3-social-sharing

# Using npm
npm install vue3-social-sharing

Usage

As composable

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

As Vue plugin

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.

As renderless component

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

Available properties

The url is the only property required for all networks.

| Prop | Type | Description | |----------------|--------|------------------------------------------------------------| | url* | String | URL to share. | | network* | String | Network name. | | title | String | Sharing title (if available). | | description | String | Sharing description (if available). | | quote | String | Facebook quote (Facebook only). | | hashtags | String | A list of comma-separated hashtags (Twitter and Facebook). | | twitter-user | String | Twitter user (Twitter only). | | media | String | Url to a media (Pinterest, VK, Weibo, and Wordpress). |

Custom network

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.

More examples?

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

Feature request

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