vue-clipboard3 is a Vue 3 Composition API utility for easily copying text to the clipboard. Currently at version 2.0.0, it provides a simple `useClipboard` hook that leverages `clipboard.js` internally to handle the complexities of cross-browser clipboard access. The package follows a lightweight approach, foregoing directives in favor of a direct method call within the `setup()` function, aligning with Vue 3's modern Composition API patterns. Its release cadence has been responsive, with recent updates focused on compatibility with modern build tools like Vite and ESM module standards. This library differentiates itself by offering a clean, hook-based API for Vue 3 projects that require clipboard functionality without the overhead of older directive-based solutions, ensuring a straightforward and explicit developer experience.
npm install vue-clipboard3Verified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates how to use the `useClipboard` hook within a Vue 3 Composition API component to copy both static strings and reactive ref values to the clipboard, including error handling.
Ensure your project uses ESM imports (e.g., `import useClipboard from 'vue-clipboard3'`) and is configured for ESM, especially if using modern bundlers like Vite or Rollup. For older Webpack setups, explicit configuration for ESM module resolution might be required, or stick to v1.x if CJS is a hard requirement.
Always import `useClipboard` and call it within your `setup` function to get the `toClipboard` method, then invoke `toClipboard` programmatically, typically on a user interaction.
Always wrap calls to `await toClipboard(...)` within a `try...catch` block to gracefully handle scenarios where clipboard access might be denied or fail, and to ensure the promise chain is correctly managed.
Update your imports to `import { defineComponent, ref } from 'vue'` instead of `@vue/composition-api` for standard Vue 3 applications to avoid potential compatibility issues or unnecessary dependencies.Ensure your project's `package.json` has `"type": "module"`, or configure your bundler (e.g., Webpack, Rollup, Vite) to correctly handle ESM imports. Migrate `require()` calls to `import` statements.
Change the import statement to `import useClipboard from 'vue-clipboard3';` to correctly import the default export.
Ensure `toClipboard` is called in response to a direct user action (like a button click). Provide robust `try...catch` blocks to inform the user if copying fails and consider adding an option for the user to manually copy the text if automatic copying is prevented.