Vue 3 Social Sharing

1.4.1 verified Fri May 01 auth: no javascript

Vue 3 plugin for sharing links on social networks (Facebook, Twitter/X, LinkedIn, WhatsApp, etc.) with TypeScript support. Version 1.4.1 supports 30+ networks including Bluesky and Threads. Works as a composable, a Vue plugin with a <share-network> component, or a renderless component. Design-agnostic, no CSS included. A modern fork of vue-social-sharing (Vue 2). Peer dependency: vue ^3.3.11.

Common errors

error Cannot find module 'vue3-social-sharing' or its corresponding type declarations. ↓

cause TypeScript is not configured to resolve module paths correctly.

fix

Ensure tsconfig.json includes 'moduleResolution': 'node' or 'bundler' and 'module': 'esnext'.

error TypeError: shareLink is not a function ↓

cause shareLink is not imported directly; it is returned from useShareLink composable.

fix

Use const { shareLink } = useShareLink() inside setup.

error Failed to resolve component: share-network ↓

cause Missing plugin registration or component import.

fix

If using plugin: app.use(Vue3SocialSharingPlugin). If using component: import { ShareNetwork } from 'vue3-social-sharing'.

error Property 'network' does not exist on type 'ShareNetworkProps' ↓

cause TypeScript type not recognized due to incorrect import.

fix

Import ShareNetwork as named import: import { ShareNetwork } from 'vue3-social-sharing'.

Warnings

gotcha network property is required and must be a valid network name from the list. Case-sensitive. ↓

fix Check the list of supported networks: facebook, twitter, linkedin, etc.

gotcha Only the url property is required across all networks; other properties (title, description, etc.) are network-dependent and may be silently ignored. ↓

fix Provide url and network; test share result with each network.

breaking Version 1.4.0 added Bluesky network; if you upgrade from <1.4.0, note new network names. ↓

fix Update network names accordingly.

deprecated Twitter network exists separately from X; both are valid but X is recommended. ↓

fix Use network: 'x' instead of 'twitter'.

gotcha The package does not include any default styles; UI must be implemented manually. ↓

fix Style your own buttons/spans. Use v-slot to customize.

Install

npm install vue3-social-sharing

yarn add vue3-social-sharing

pnpm add vue3-social-sharing

Imports

useShareLink

wrong

import { useShareLink } from 'vue3-social-sharing/src'

correct

import { useShareLink } from 'vue3-social-sharing'

Named export from main entry. Available as composable function.

ShareNetwork

wrong

import ShareNetwork from 'vue3-social-sharing'

correct

import { ShareNetwork } from 'vue3-social-sharing'

Named export, not default. Use as renderless component with v-slot.

Vue3SocialSharingPlugin

wrong

import { Vue3SocialSharingPlugin } from 'vue3-social-sharing'

correct

import Vue3SocialSharingPlugin from 'vue3-social-sharing'

Default export for app.use(). Options object with optional networks config.

shareLink

wrong

import { shareLink } from 'vue3-social-sharing'

correct

const { shareLink } = useShareLink()

shareLink is returned from the composable, not a direct export.

Quickstart

This shows a minimal Vue 3 component using the useShareLink composable to share a URL on Facebook.

<script setup lang="ts">
import { useShareLink } from 'vue3-social-sharing';
import { ref } from 'vue';

const { shareLink } = useShareLink();
const url = ref('https://example.com');

const shareOnFacebook = () => {
  shareLink({
    network: 'facebook',
    url: url.value,
    quote: 'Check this out!'
  });
};
</script>

<template>
  <button @click="shareOnFacebook">Share on Facebook</button>
</template>