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

This package supports Vue ^3.3.11 and newer Vue 3 releases.

# 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 directory of this repo. The playground is an npm workspace and uses the local vue3-social-sharing workspace package.

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 ci
• Make your changes
• Run npm run lint, npm run test, and npm run build
• Run npm run pack:dry-run when package exports or build output change
• Run npm run changeset for user-facing changes and commit the generated .changeset/*.md file
• Run npm -w playground run build when playground or package integration changes
• Update the documentation if needed
• Commit your changes and make a pull request

Pull requests are checked by GitHub Actions on the latest development Vue version and against the lowest supported peer version, Vue 3.3.11.

Maintainer release flow

Releases are published from master by GitHub Actions through npm Trusted Publishing. Version and changelog updates are managed with Changesets: run npm run changeset in feature PRs, then the Version PR workflow creates or updates the release PR after merge to master. See RELEASING.md for the full deployment setup and verification steps.