@datametria/vue-components/src/composables/useClipboard.ts

DATAMETRIA Vue.js 3 Component Library with Multi-Brand Theming - 51 components + 10 composables with theming support, WCAG 2.2 AA, dark mode, responsive system

import { ref } from 'vue'

export function useClipboard() {
  const copied = ref(false)
  const error = ref<string | null>(null)

  const copy = async (text: string): Promise<boolean> => {
    try {
      await navigator.clipboard.writeText(text)
      copied.value = true
      error.value = null

      setTimeout(() => {
        copied.value = false
      }, 2000)

      return true
    } catch (err) {
      error.value = (err as Error).message || 'Copy failed'
      copied.value = false
      return false
    }
  }

  const read = async (): Promise<string> => {
    try {
      const text = await navigator.clipboard.readText()
      error.value = null
      return text
    } catch (err) {
      error.value = (err as Error).message || 'Read failed'
      return ''
    }
  }

  return {
    copied,
    error,
    copy,
    read
  }
}