useClipboard

Demo

Clipboard Permission: read prompt | write granted

Current copied: none

Usage

vue

<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)">
      <!-- by default, `copied` will be reset in 1.5s -->
      <span v-if="!copied">Copy</span>
      <span v-else>Copied!</span>
    </button>
    <p>Current copied: <code>{{ text || 'none' }}</code></p>
  </div>
  <p v-else>
    Your browser does not support Clipboard API
  </p>
</template>

Options

Option	Type	Default	Description
`source`	`MaybeRefOrGetter<string>`	—	Default content to copy when `copy()` is called without arguments
`read`	`boolean`	`false`	Enable reading clipboard content on copy/cut events
`copiedDuring`	`number`	`1500`	Milliseconds before `copied` resets to `false`
`legacy`	`boolean`	`false`	Fallback to `document.execCommand` if Clipboard API unavailable

Return Values

Property	Type	Description
`isSupported`	`ComputedRef<boolean>`	Whether clipboard is supported (native or legacy)
`text`	`Ref<string>`	Current clipboard content (when `read: true`)
`copied`	`Ref<boolean>`	`true` after successful copy, auto-resets
`copy`	`(text?: string) => Promise<void>`	Copy text to clipboard

Legacy Mode

Set legacy: true to keep the ability to copy if Clipboard API is not available. It will handle copy with execCommand as fallback.

const { copy, isSupported } = useClipboard({ legacy: true })

Component Usage

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

vue

<template>
  <UseClipboard v-slot="{ copy, copied }" source="copy me">
    <button @click="copy()">
      {{ copied ? 'Copied' : 'Copy' }}
    </button>
  </UseClipboard>
</template>

Type Declarations

Show Type Declarations

export interface UseClipboardOptions<Source> extends ConfigurableNavigator {
  /**
   * Enabled reading for clipboard
   *
   * @default false
   */
  read?: boolean
  /**
   * Copy source
   */
  source?: Source
  /**
   * Milliseconds to reset state of `copied` ref
   *
   * @default 1500
   */
  copiedDuring?: number
  /**
   * Whether fallback to document.execCommand('copy') if clipboard is undefined.
   *
   * @default false
   */
  legacy?: boolean
}
export interface UseClipboardReturn<Optional> extends Supportable {
  text: Readonly<ShallowRef<string>>
  copied: Readonly<ShallowRef<boolean>>
  copy: Optional extends true
    ? (text?: string) => Promise<void>
    : (text: string) => Promise<void>
}
/**
 * Reactive Clipboard API.
 *
 * @see https://vueuse.org/useClipboard
 * @param options
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function useClipboard(
  options?: UseClipboardOptions<undefined>,
): UseClipboardReturn<false>
export declare function useClipboard(
  options: UseClipboardOptions<MaybeRefOrGetter<string>>,
): UseClipboardReturn<true>