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

Installation

1# Using pnpm
2pnpm add vue3-social-sharing
3
4# Using yarn
5yarn add vue3-social-sharing
6
7# Using npm
8npm install vue3-social-sharing

Usage

As composable

1<script setup lang="ts">
2  import {useShareLink} from "vue3-social-sharing";
3  const {shareLink} = useShareLink();
4  const share = () => {
5    shareLink({
6      network: "facebook",
7      url: "https://example.com"
8    })
9  }
10</script>
11
12<template>
13  <main>
14    <span @click="share">Share on facebook</span>
15  </main>
16</template>

As Vue plugin

You can use this package as a regular vue plugin.

1import Vue3SocialSharingPlugin from "vue3-social-sharing";
2
3
4const app = createApp(App);
5app.use(Vue3SocialSharingPlugin);
6app.mount("#app");

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

1
2<share-network
3    network="facebook"
4    url="https://example.com"
5    v-slot="{ share }"
6  >
7    <span @click="share">Share on Facebook</span>
8</share-network>
9

Here you can find the demo page.

As renderless component

1<script setup lang="ts">
2import { ShareNetwork } from "vue3-social-sharing";
3</script>
4
5<template>
6  <ShareNetwork
7      network="facebook"
8      url="https://example.com"
9      v-slot="{ share }"
10  >
11    <span @click="share">Share on Facebook</span>
12  </ShareNetwork>
13</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.

1import Vue3SocialSharingPlugin from "vue3-social-sharing";
2
3const app = createApp(App);
4app.use(Vue3SocialSharingPlugin, {
5  shareNetworks: {
6    "my-network": "https://example.com?url=@u&title=@t"
7  }
8});
9app.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.

CONTRIBUTING

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