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

Using pnpm

pnpm add vue3-social-sharing

Using yarn

yarn add vue3-social-sharing

Using npm

npm install vue3-social-sharing

Usage

As composable

Share on facebook

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>

Here you can find the demo page.

As renderless component

Share on Facebook

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.

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.

GitHub - hedint/vue3-social-sharing: Vue 3 social sharing plugin (original) (raw)

Vue 3 social sharing