useClipboard

Creates a clipboard-copy action for Vue components. The copied text is resolved with toValue() when the returned function is called, so refs and getters are read lazily instead of being captured at setup time.

The optional success callback runs only when the underlying clipboard write succeeds.

Importing

import { useClipboard } from '@almighty-shogun/common';

Usage

<template>
    <button @click="copyInviteLink">Copy invite link</button>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useClipboard } from '@almighty-shogun/common';

const inviteLink = computed(() => window.location.href);
const copyInviteLink = useClipboard(inviteLink);
</script>

Parameters

value: MaybeRefOrGetter<string>
Text value, ref, or getter to write to the clipboard.

onSuccess?: Undefinable<Function>
Callback invoked after the clipboard write succeeds.

Returns

A function that writes the current value to the clipboard.

Uses

• Undefinable
• copyToClipboard

Type signature

declare function useClipboard(
    value: MaybeRefOrGetter<string>,
    onSuccess?: Undefinable<Function>
): UseClipboard;

type UseClipboard = () => void;