Function: useClipboard()

function useClipboard(options: MaybeRef<ClipboardComposableOptions>): {
  copy: (text: string) => void;
  renderClipboardFeedback: () => VNode<
    RendererNode,
    RendererElement,
    {
      [key: string]: any;
    }
  > | null;
};

Vue composable for clipboard operations with integrated visual feedback via Vuetify snackbars.

This composable provides a complete clipboard solution that combines the robust copyToClipboard utility with automatic user feedback through customizable success/error snackbars. It uses Vue's render functions to provide maximum flexibility in how and where feedback is displayed.

Parameters

Parameter	Type	Description
options	MaybeRef<ClipboardComposableOptions>	Configuration options extending VSnackbar props (reactive or static)

Returns

{
  copy: (text: string) => void;
  renderClipboardFeedback: () =>
     | VNode<RendererNode, RendererElement, {
   [key: string]: any;
   }>
    | null;
}

Object containing copy function and render function for feedback UI

Name	Type	Default value
copy()	(text: string) => void	copyWithFeedback
renderClipboardFeedback()	() => | VNode<RendererNode, RendererElement, { [key: string]: any; }> | null	-

Examples

Basic usage with default styling:

<template>
  <v-btn @click="copy('Hello World!')">Copy Text</v-btn>
  <component :is="renderClipboardFeedback()" />
</template>

<script setup>
const { copy, renderClipboardFeedback } = useClipboard();
</script>

With custom snackbar configuration:

<template>
  <v-btn @click="copy(selectedText)">Copy Selection</v-btn>
  <component :is="renderClipboardFeedback()" />
</template>

<script setup>
const { copy, renderClipboardFeedback } = useClipboard({
  timeout: 8000,
  location: "top",
  variant: "outlined",
});
</script>

Reactive configuration with computed options:

<script setup>
const isDarkMode = ref(true);
const snackbarOptions = computed(() => ({
  timeout: isDarkMode.value ? 6000 : 4000,
  variant: isDarkMode.value ? "outlined" : "elevated",
}));

const { copy, renderClipboardFeedback } = useClipboard(snackbarOptions);
</script>

Remarks

• Automatically validates timeout values to ensure good UX (4-10 second range)
• Provides mutual exclusion between success and error snackbars
• Uses headless UI pattern allowing flexible integration into any component hierarchy
• Supports all VSnackbar props for complete customization control
• Integrates with i18n system for internationalized feedback messages
• Built on the robust copyToClipboard utility with comprehensive browser fallbacks