Modern Social Sharing Plugin For Vue 3

Install & Download:

# Yarn
$ yarn add vue3-social-sharing
# NPM
$ npm install vue3-social-sharing
# PNPM
$ pnpm add vue3-social-sharing

Description:

This is the upgraded version of the Basic Vue.js Social Share Component, which allows developers to integrate modern social sharing buttons into Vue 3 applications.

Supported Social Buttons:

• Baidu
• Buffer
• Email
• EverNote
• Facebook
• Flipboard
• HackerNews
• Instapaper
• Line
• LinkedIn
• Messenger
• Odnoklassniki
• Pinterest
• Pocket
• Reddit
• Skype
• SMS
• StumbleUpon (Mix)
• Telegram
• Tumblr
• Twitter (X)
• Viber
• VK
• Weibo
• WhatsApp
• WordPress
• Xing
• Yammer

How to use it:

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

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

// OR
<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 Props:

network: {
  type: String,
  required: true,
},
url: {
  type: String,
  default: "",
},
title: {
  type: String,
  default: "",
},
description: {
  type: String,
  default: "",
},
quote: {
  type: String,
  default: "",
},
hashtags: {
  type: String,
  default: "",
},
twitterUser: {
  type: String,
  default: "",
},
media: {
  type: String,
  default: "",
},

Preview: