useShare

リアクティブな Web Share API。ブラウザはテキストやファイルのコンテンツを共有できる機能を提供します。

share メソッドは、ボタンクリックのようなユーザーのジェスチャーに続いて呼び出される必要があります。例えば、ページのロード時に単純に呼び出すことはできません。これは乱用を防ぐための措置です。

使用法

import { useShare } from '@vueuse/core'

const { share, isSupported } = useShare()

function startShare() {
  share({
    title: 'Hello',
    text: 'Hello my friend!',
    url: location.href,
  })
}

ソースの ref を渡す

ref を渡すことができ、ソースの ref からの変更は共有オプションに反映されます。

import { ref } from 'vue'

const shareOptions = ref<ShareOptions>({ text: 'foo' })
const { share, isSupported } = useShare(shareOptions)

shareOptions.value.text = 'bar'

share()