vue-clipboard3

vue-clipboard3 is a tiny wrapper around clipboard.js built specifically for Vue 3’s Composition API. Rather than exposing a directive (the pattern used by its Vue 2 predecessor, vue-clipboard2), it deliberately provides a single useClipboard() composable that returns a toClipboard(text, container?) function, keeping usage confined to a component’s setup() function in line with Vue 3 idioms.

Internally it creates a throwaway button element, wires up clipboard.js against it, simulates a click to trigger the copy, and cleans up afterward — a well-understood workaround for clipboard write permissions in browsers, wrapped in a promise so calling code can await the copy and handle success/failure with normal try/catch.

What You Get

• A single useClipboard(options?) composable returning { toClipboard }
• A promise-based toClipboard(text, container?) function that resolves on successful copy and rejects on failure
• An appendToBody option (default true) that works around older browser clipboard-permission quirks by temporarily appending the copy trigger element to the DOM
• TypeScript type definitions shipped alongside the compiled output
• Both ESM and CommonJS builds for compatibility with different bundler setups

Common Use Cases

• Adding a ‘Copy to clipboard’ button next to a code snippet, API key, or share link in a Vue 3 component
• Copying dynamically bound text (e.g. from a ref) to the clipboard in response to a user action
• Providing clipboard copy functionality inside a Composition API setup() function without introducing a custom directive
• Building small utility UI (copy buttons, share widgets) in Vue 3 apps without hand-rolling the Clipboard API/execCommand fallback logic

Under The Hood

Architecture - The entire implementation lives in a single ~35-line file (src/index.ts): a factory function accepts options and returns an object exposing toClipboard, which on each call constructs a throwaway <button> element, attaches a clipboard.js instance configured with the target text and container, listens for its success/error events to resolve or reject a Promise, then triggers a synthetic click and tears the element back down. There is no internal state beyond the closure over appendToBody, making the whole module a thin, stateless adapter over clipboard.js’s browser-compatibility handling.

Tech Stack - Written in TypeScript, compiled with tsc into both ESM (dist/esm) and CommonJS (dist/cjs) outputs, with clipboard.js as its only runtime dependency (handling the actual cross-browser copy mechanics, including the older document.execCommand('copy') fallback path). No Vue-specific APIs are actually used in the implementation — it is Vue-only in name and framing, not in code, since the exported function is a plain factory rather than a ref/reactive-based composable.

Code Quality - The code is short enough to review in full at a glance, with sensible cleanup (destroying the clipboard.js instance and removing the temporary DOM element in both success and error paths). There is no automated test suite in the repository, which is a meaningful gap for a package that touches DOM manipulation and clipboard permissions across browsers, though the small surface area limits the practical risk. The project has had only a single contributor and no commits since early 2024, so bug fixes for newer browser clipboard APIs would need to come from a fork or a different, more actively maintained package.

API Design - The API is intentionally minimal: one factory call, one options flag, one method that takes a string and an optional container element, returning a Promise — there is essentially nothing to learn beyond await toClipboard(text). This simplicity is the main selling point over hand-rolling the Clipboard API directly, though it also means there’s no built-in state (like an isCopied ref) that many similar libraries (e.g. VueUse’s useClipboard) provide for driving UI feedback, leaving that bookkeeping to the consumer.