1---
2category: Browser
3related:
4  - useClipboard
5---
6 
7# useClipboardItems
8 
9Reactive [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API). Provides the ability to respond to clipboard commands (cut, copy, and paste) as well as to asynchronously read from and write to the system clipboard. Access to the contents of the clipboard is gated behind the [Permissions API](https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API). Without user permission, reading or altering the clipboard contents is not permitted.
10 
11## Difference from `useClipboard`
12 
13`useClipboard` is a "text-only" function, while `useClipboardItems` is a [ClipboardItem](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardItem) based function. You can use `useClipboardItems` to copy any content supported by [ClipboardItem](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardItem).
14 
15## Usage
16 
17```vue
18<script setup lang="ts">
19import { useClipboardItems } from '@vueuse/core'
20 
21const mime = 'text/plain'
22const source = ref([
23  new ClipboardItem({
24    [mime]: new Blob(['plain text'], { type: mime }),
25  })
26])
27 
28const { content, copy, copied, isSupported } = useClipboardItems({ source })
29</script>
30 
31<template>
32  <div v-if="isSupported">
33    <button @click="copy(source)">
34      <!-- by default, `copied` will be reset in 1.5s -->
35      <span v-if="!copied">Copy</span>
36      <span v-else>Copied!</span>
37    </button>
38    <p>
39      Current copied: <code>{{ content || 'none' }}</code>
40    </p>
41  </div>
42  <p v-else>
43    Your browser does not support Clipboard API
44  </p>
45</template>
46```
47 
48## Type Declarations
49 
50```ts
51export interface UseClipboardItemsOptions<
52  Source,
53> extends ConfigurableNavigator {
54  /**
55   * Enabled reading for clipboard
56   *
57   * @default false
58   */
59  read?: boolean
60  /**
61   * Copy source
62   */
63  source?: Source
64  /**
65   * Milliseconds to reset state of `copied` ref
66   *
67   * @default 1500
68   */
69  copiedDuring?: number
70}
71export interface UseClipboardItemsReturn<Optional> extends Supportable {
72  content: Readonly<Ref<ClipboardItems>>
73  copied: Readonly<ShallowRef<boolean>>
74  copy: Optional extends true
75    ? (content?: ClipboardItems) => Promise<void>
76    : (text: ClipboardItems) => Promise<void>
77  read: () => void
78}
79/**
80 * Reactive Clipboard API.
81 *
82 * @see https://vueuse.org/useClipboardItems
83 * @param options
84 *
85 * @__NO_SIDE_EFFECTS__
86 */
87export declare function useClipboardItems(
88  options?: UseClipboardItemsOptions<undefined>,
89): UseClipboardItemsReturn<false>
90export declare function useClipboardItems(
91  options: UseClipboardItemsOptions<MaybeRefOrGetter<ClipboardItems>>,
92): UseClipboardItemsReturn<true>
93```
94