1---
2category: Browser
3---
4 
5# useShare
6 
7Reactive [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share). The Browser provides features that can share content in text or file.
8 
9> The `share` method has to be called following a user gesture like a button click. It can’t simply be called on page load for example. That’s in place to help prevent abuse.
10 
11## Usage
12 
13```ts
14import { useShare } from '@vueuse/core'
15 
16const { share, isSupported } = useShare()
17 
18function startShare() {
19  share({
20    title: 'Hello',
21    text: 'Hello my friend!',
22    url: location.href,
23  })
24}
25```
26 
27### Passing a source ref
28 
29You can pass a `ref` to it, changes from the source ref will be reflected to your sharing options.
30 
31```ts {6}
32import { ref } from 'vue'
33 
34const shareOptions = ref<ShareOptions>({ text: 'foo' })
35const { share, isSupported } = useShare(shareOptions)
36 
37shareOptions.value.text = 'bar'
38 
39share()
40```
41 
42## Type Declarations
43 
44```ts
45export interface UseShareOptions {
46  title?: string
47  files?: File[]
48  text?: string
49  url?: string
50}
51export interface UseShareReturn extends Supportable {
52  share: (overrideOptions?: MaybeRefOrGetter<UseShareOptions>) => Promise<void>
53}
54/**
55 * Reactive Web Share API.
56 *
57 * @see https://vueuse.org/useShare
58 * @param shareOptions
59 * @param options
60 *
61 * @__NO_SIDE_EFFECTS__
62 */
63export declare function useShare(
64  shareOptions?: MaybeRefOrGetter<UseShareOptions>,
65  options?: ConfigurableNavigator,
66): UseShareReturn
67```
68