{"id":12432,"library":"vue-clipboard3","title":"Vue 3 Clipboard Composition API","description":"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.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/JamieCurnow/vue-clipboard3","tags":["javascript","vue","vue3","vue 3","composition-api","clipboard","clipboard.js","typescript"],"install":[{"cmd":"npm install vue-clipboard3","lang":"bash","label":"npm"},{"cmd":"yarn add vue-clipboard3","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-clipboard3","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core library for clipboard functionality, used internally.","package":"clipboard.js","optional":false}],"imports":[{"note":"The primary hook is exported as a default export. Ensure you are using the default import syntax.","wrong":"import { useClipboard } from 'vue-clipboard3'","symbol":"useClipboard","correct":"import useClipboard from 'vue-clipboard3'"},{"note":"The configuration interface is a named type export. Use `import type` for type-only imports to prevent bundling issues.","wrong":"import { Options } from 'vue-clipboard3'","symbol":"Options","correct":"import type { Options } from 'vue-clipboard3'"},{"note":"Since version 2.0.0, vue-clipboard3 is an ESM-only package. CommonJS `require()` statements will fail, particularly in environments like Vite or modern Node.js setups that strictly enforce ESM.","wrong":"const useClipboard = require('vue-clipboard3')","symbol":"CommonJS require","correct":"N/A"}],"quickstart":{"code":"import { defineComponent, ref } from 'vue';\nimport useClipboard from 'vue-clipboard3';\n\nexport default defineComponent({\n setup() {\n const { toClipboard } = useClipboard();\n const inputText = ref('Hello, clipboard!');\n\n const copyText = async (textToCopy: string) => {\n try {\n await toClipboard(textToCopy);\n console.log(`'${textToCopy}' copied to clipboard successfully!`);\n } catch (e) {\n console.error('Failed to copy text:', e);\n // Optionally, show a user-friendly error message\n }\n };\n\n const copyInputContent = async () => {\n await copyText(inputText.value);\n }\n\n return {\n inputText,\n copyText,\n copyInputContent\n };\n },\n template: `\n
\n

Vue-Clipboard3 Example

\n

Click buttons to copy text to clipboard.

\n \n \n \n
\n \n \n
\n\n
\n

This demonstrates using the useClipboard hook with both static strings and reactive refs. Check your browser's developer console for success or error messages after clicking the buttons.

\n
\n
\n `\n});","lang":"typescript","description":"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."},"warnings":[{"fix":"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.","message":"Version 2.0.0 transitioned the package to be ESM-only. Projects relying on CommonJS `require()` or older build configurations (e.g., Webpack 4 without proper ESM handling) will encounter errors like 'Cannot use import statement outside a module'.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Always import `useClipboard` and call it within your `setup` function to get the `toClipboard` method, then invoke `toClipboard` programmatically, typically on a user interaction.","message":"Unlike some older Vue clipboard libraries (e.g., `vue-clipboard2`), `vue-clipboard3` does not provide a directive. It is intended for use directly within the `setup()` function as a Composition API hook. Attempting to use it as a `v-clipboard` directive will not work.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"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.","message":"The `toClipboard` function returns a Promise. It is crucial to `await` its execution and include proper `try...catch` error handling to manage potential failures (e.g., due to browser security restrictions or lack of user gesture). Failing to await can lead to unhandled promise rejections.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"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.","message":"The default import in the README uses `@vue/composition-api` for `defineComponent` and `ref`. For modern Vue 3 projects (Vue 3.0+), these should be imported directly from 'vue'.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"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.","cause":"Attempting to use `vue-clipboard3` (v2.0.0+) in a CommonJS environment or a project not configured for ESM module resolution.","error":"Cannot use import statement outside a module"},{"fix":"Change the import statement to `import useClipboard from 'vue-clipboard3';` to correctly import the default export.","cause":"Incorrect import of the `useClipboard` hook, likely attempting a named import when it's a default export, or using `require()` after v2.0.0.","error":"TypeError: useClipboard is not a function"},{"fix":"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.","cause":"The browser or platform denied the clipboard write operation, often due to security restrictions, lack of user gesture (e.g., not triggered by a click event), or clipboard permissions.","error":"Uncaught (in promise) DOMException: The request is not allowed by the user agent or the platform in the current context."}],"ecosystem":"npm"}