Skip to content

feat(useClipboardItems): add on-focus to update on window focus and expose read() #4954

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+34 −12
Open

feat(useClipboardItems): add on-focus to update on window focus and expose read() #4954

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
658b373
feat(useClipboardItems): add `options.immediate` and expose `read`
OrbisK Aug 11, 2025
73fa9ff
refactor: use window focus instead mounted
OrbisK Aug 12, 2025
d3f460a
docs: rewording to manual read
OrbisK Aug 12, 2025
0056357
Merge branch 'main' into feat/clipboard-items-initial
OrbisK Aug 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feat(useClipboardItems): add options.immediate and expose read
  • Loading branch information
@OrbisK
OrbisK committed Aug 11, 2025
commit 658b37342f9a01a9376ca75cb4748b5e8e9fd823
11 changes: 7 additions & 4 deletions packages/core/useClipboardItems/demo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { effect, shallowRef } from 'vue'

const input = shallowRef('')

const { content, isSupported, copy } = useClipboardItems()
const { content, isSupported, copy, read } = useClipboardItems()
const computedText = shallowRef('')
const computedMimeType = shallowRef('')
effect(() => {
Expand Down Expand Up @@ -37,12 +37,15 @@ function createClipboardItems(text: string) {
</p>
<input v-model="input" type="text">
<button
@click="
copy([createClipboardItems(input)])
"
@click="() => copy([createClipboardItems(input)])"
>
Copy
</button>
<button
@click="() => read()"
>
Read
</button>
</div>
<p v-else>
Your browser does not support Clipboard API
Expand Down
29 changes: 21 additions & 8 deletions packages/core/useClipboardItems/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { ComputedRef, MaybeRefOrGetter } from 'vue'
import type { ComputedRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue'
import type { ConfigurableNavigator } from '../_configurable'
import { useTimeoutFn } from '@vueuse/shared'
import { ref as deepRef, shallowRef, toValue } from 'vue'
import { tryOnMounted, useTimeoutFn } from '@vueuse/shared'
import { ref as deepRef, readonly, shallowReadonly, shallowRef, toValue } from 'vue'
import { defaultNavigator } from '../_configurable'
import { useEventListener } from '../useEventListener'
import { useSupported } from '../useSupported'
Expand All @@ -25,13 +25,19 @@ export interface UseClipboardItemsOptions<Source> extends ConfigurableNavigator
* @default 1500
*/
copiedDuring?: number

/**
* Whether to read clipboard content immediately on mount
*/
immediate?: boolean
}

export interface UseClipboardItemsReturn<Optional> {
isSupported: ComputedRef<boolean>
content: ComputedRef<ClipboardItems>
copied: ComputedRef<boolean>
content: Readonly<Ref<ClipboardItems>>
copied: Readonly<ShallowRef<boolean>>
copy: Optional extends true ? (content?: ClipboardItems) => Promise<void> : (text: ClipboardItems) => Promise<void>
read: () => void
}

/**
Expand Down Expand Up @@ -65,8 +71,14 @@ export function useClipboardItems(options: UseClipboardItemsOptions<MaybeRefOrGe
}
}

if (isSupported.value && read)
if (isSupported.value && read) {
useEventListener(['copy', 'cut'], updateContent, { passive: true })
if (options.immediate) {
tryOnMounted(() => {
updateContent()
})
}
}

async function copy(value = toValue(source)) {
if (isSupported.value && value != null) {
Expand All @@ -80,8 +92,9 @@ export function useClipboardItems(options: UseClipboardItemsOptions<MaybeRefOrGe

return {
isSupported,
content: content as ComputedRef<ClipboardItems>,
copied: copied as ComputedRef<boolean>,
content: shallowReadonly(content),
copied: readonly(copied),
copy,
read: updateContent,
}
}