useClipboard

リアクティブなクリップボード API。クリップボードコマンド（切り取り、コピー、貼り付け）に応答する機能を提供し、システムクリップボードから非同期で読み書きすることができます。クリップボードの内容へのアクセスはPermissions APIによって制限されています。ユーザーの許可なしに、クリップボードの内容を読み取ったり変更したりすることはできません。

使用方法

<script setup lang="ts">
import { useClipboard } from '@vueuse/core'

const source = ref('Hello')
const { text, copy, copied, isSupported } = useClipboard({ source })
</script>

<template>
  <div v-if="isSupported">
    <button @click="copy(source)">
      {/* デフォルトでは、`copied`は1.5秒後にリセットされます */}
      <span v-if="!copied">コピー</span>
      <span v-else>コピー済み！</span>
    </button>
    <p>現在のコピー内容: <code>{{ text || 'なし' }}</code></p>
  </div>
  <p v-else>
    あなたのブラウザはクリップボード API をサポートしていません
  </p>
</template>

クリップボード APIが利用できない場合でもコピー機能を保持するには、legacy: true を設定します。フォールバックとして execCommand を使用してコピーを処理します。

コンポーネントの使用

<template>
  <UseClipboard v-slot="{ copy, copied }" source="copy me">
    <button @click="copy()">
      {{ copied ? 'コピー済み' : 'コピー' }}
    </button>
  </UseClipboard>
</template>