useShareLinks()

Usage

Use the auto-imported useShareLinks composable to generate share URLs for the current page.

const share = useShareLinks()
// share.value.twitter, share.value.facebook, etc.

Access individual platform URLs and the canonical URL from the returned computed ref:

<template>
  <a :href="share.twitter" target="_blank">Share on Twitter</a>
  <a :href="share.facebook" target="_blank">Share on Facebook</a>
  <button @click="copyToClipboard(share.canonicalUrl)">Copy Link</button>
</template>

<script setup>
const share = useShareLinks()

function copyToClipboard(text) {
  navigator.clipboard.writeText(text)
}
</script>

UTM Tracking

UTM tracking is enabled by default. Each platform gets utm_source set to its name, and utm_medium is set intelligently ('social' for social platforms, 'email' for email):

const share = useShareLinks()
// twitter: ...?utm_source=twitter&utm_medium=social
// email:   ...?utm_source=email&utm_medium=email

Disable with utm: false, or pass an object for manual control:

const share = useShareLinks({
  utm: {
    source: 'newsletter',
    medium: 'email',
    campaign: 'spring-launch',
  },
})

Use source: 'auto' for hybrid mode: auto source and medium per platform, with additional custom params:

const share = useShareLinks({
  utm: { source: 'auto', campaign: 'spring-launch' },
})
// twitter: ...?utm_source=twitter&utm_medium=social&utm_campaign=spring-launch
// email:   ...?utm_source=email&utm_medium=email&utm_campaign=spring-launch

Custom URL and Title

Override the default canonical URL and title:

const share = useShareLinks({
  url: 'https://example.com/special-page',
  title: 'Check out this page',
})

Options

url

• Type: MaybeRefOrGetter<string | undefined>
• Default: canonical URL of the current page

Override the URL to share. Defaults to the canonical URL resolved from the current route and site config.

title

• Type: MaybeRefOrGetter<string | undefined>
• Default: site name from site config

The title or text included in the share link. Falls back to the name from your site config.

utm

• Type: MaybeRefOrGetter<boolean | ShareLinkUtmParams | undefined>
• Default: true

UTM tracking parameters. Three modes:

ShareLinkUtmParams fields:

• source ('auto' | string) — 'auto' uses the platform name per link
• medium (string) — overrides auto medium when using source: 'auto'
• campaign (string)
• term (string)
• content (string)

twitter

• Type: { via?: string, hashtags?: string[] }

Platform-specific options for Twitter/X.

• via: Twitter username to attribute (without @).
• hashtags: Array of hashtags to include (without #).

facebook

• Type: { quote?: string, hashtag?: string }

Platform-specific options for Facebook.

• quote: Pre-filled text to accompany the share.
• hashtag: A single hashtag (without #, e.g. "nuxt"). The # is added automatically.

pinterest

• Type: { media?: MaybeRefOrGetter<string | undefined> }

Platform-specific options for Pinterest.

• media: Direct image URL to pin.

Supported Platforms

Return Value

• Type: ComputedRef<ShareLinks>

Where ShareLinks is Record<SharePlatform, string> & { canonicalUrl: string }.