---
title: "useShareLinks()"
description: "A composable that generates social share URLs for the current page across multiple platforms."
canonical_url: "https://nuxtseo.com/docs/seo-utils/api/share-links"
last_updated: "2026-05-06T18:44:34.805Z"
---

## Usage

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

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

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

```vue
<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):

```ts
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:

```ts
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:

```ts
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:

```ts
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:

<table>
<thead>
  <tr>
    <th>
      Value
    </th>
    
    <th>
      Behaviour
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Auto mode: <code>
        utm_source
      </code>
      
       = platform name, <code>
        utm_medium
      </code>
      
       = <code>
        'social'
      </code>
      
       or <code>
        'email'
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        { source: 'auto', ... }
      </code>
    </td>
    
    <td>
      Same auto behaviour as <code>
        true
      </code>
      
      , plus additional params like <code>
        campaign
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        { source: 'x', ... }
      </code>
    </td>
    
    <td>
      Manual: same params on all platforms
    </td>
  </tr>
</tbody>
</table>

`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

<table>
<thead>
  <tr>
    <th>
      Platform
    </th>
    
    <th>
      Share behaviour
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        twitter
      </code>
    </td>
    
    <td>
      Tweet with URL and text
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        facebook
      </code>
    </td>
    
    <td>
      Facebook share dialog
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        linkedin
      </code>
    </td>
    
    <td>
      LinkedIn share dialog
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        whatsapp
      </code>
    </td>
    
    <td>
      WhatsApp message with title and URL
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        telegram
      </code>
    </td>
    
    <td>
      Telegram share with text
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        reddit
      </code>
    </td>
    
    <td>
      Reddit submit with URL and title
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pinterest
      </code>
    </td>
    
    <td>
      Pinterest pin with URL and description
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        email
      </code>
    </td>
    
    <td>
      <code>
        mailto:
      </code>
      
       link with subject and body
    </td>
  </tr>
</tbody>
</table>

## Return Value

- Type: `ComputedRef<ShareLinks>`

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

<table>
<thead>
  <tr>
    <th>
      Key
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        twitter
      </code>
      
      , <code>
        facebook
      </code>
      
      , etc.
    </td>
    
    <td>
      Fully encoded share URL for each platform
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        canonicalUrl
      </code>
    </td>
    
    <td>
      The resolved page URL without UTM params, useful for "copy link" buttons
    </td>
  </tr>
</tbody>
</table>