useShareLinks() · Nuxt SEO Utils · Nuxt SEO

-
-
-
-

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

SEO Utils

-
-
-
-
-
-
-
-
-
-

Search…```k`` /`

v8.1.7

- Playgrounds
- [Discord Support](https://discord.com/invite/275MBUBvgP)

### Nuxt API

-
-
-
-

Nuxt API

# useShareLinks()

[Copy for LLMs](https://nuxtseo.com/docs/seo-utils/api/share-links.md)

## [Usage](#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)

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](#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](#options)

### [`url`](#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`](#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`](#utm)

- Type: `MaybeRefOrGetter<boolean| ShareLinkUtmParams| undefined>`
- Default: `true`

UTM tracking parameters. Three modes:

| Value | Behaviour |
| --- | --- |
| `true` | Auto mode: `utm_source` = platform name, `utm_medium` = `'social'` or `'email'` |
| `{ source: 'auto', ... }` | Same auto behaviour as `true`, plus additional params like `campaign` |
| `{ source: 'x', ... }` | Manual: same params on all platforms |

`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`](#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`](#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`](#pinterest)

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

Platform-specific options for Pinterest.

- `media`: Direct image URL to pin.

## [Supported Platforms](#supported-platforms)

| Platform | Share behaviour |
| --- | --- |
| `twitter` | Tweet with URL and text |
| `facebook` | Facebook share dialog |
| `linkedin` | LinkedIn share dialog |
| `whatsapp` | WhatsApp message with title and URL |
| `telegram` | Telegram share with text |
| `reddit` | Reddit submit with URL and title |
| `pinterest` | Pinterest pin with URL and description |
| `email` | `mailto:` link with subject and body |

## [Return Value](#return-value)

- Type: `ComputedRef<ShareLinks>`

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

| Key | Description |
| --- | --- |
| `twitter`, `facebook`, etc. | Fully encoded share URL for each platform |
| `canonicalUrl` | The resolved page URL without UTM params, useful for "copy link" buttons |

[Edit this page](https://github.com/harlan-zw/nuxt-seo-utils/edit/main/docs/content/3.api/6.share-links.md)

[Markdown For LLMs](https://nuxtseo.com/docs/seo-utils/api/share-links.md)

Did this page help you?

On this page

- [Usage](#usage)
- [Options](#options)
- [Supported Platforms](#supported-platforms)
- [Return Value](#return-value)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

###

-
-

Modules

-
-
-
-
-
-
-
-
-

###

-
-
-

###

Nuxt

-
-
-
-
-

Vue

-
-
-
-
-
-
-
-

###

-
-
-
-
-
-
-
-
-
-

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)