Registry / web-framework / vue-copy-to-clipboard

vue-copy-to-clipboard

library1.0.3jsnpmunverified

This package provides a simple Vue component for copying text to the user's clipboard. It is currently at version 1.0.3 and appears to be in a maintenance state, with no significant updates since 2020, specifically targeting Vue 2 environments. Its release cadence is very infrequent, reflecting its stable but dormant status. The component offers a declarative, straightforward way to integrate copy-to-clipboard functionality into Vue 2 applications, typically via a `text` prop and a `copy` event. Unlike newer solutions for Vue 3 (such as `vue-clipboard3` or `@vueuse/core`'s `useClipboard` composable), this library adheres to Vue 2's component model and is a direct wrapper, abstracting the underlying Clipboard API or `document.execCommand('copy')` for ease of use within its intended ecosystem.

web-framework

npm install vue-copy-to-clipboard

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-COPY-TO-CLIPBO

vue-copy-to-clipboard

web-frameworkjavascriptv1.0.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

CopyToClipboard

✓ import CopyToClipboard from 'vue-copy-to-clipboard'

✗ import { CopyToClipboard } from 'vue-copy-to-clipboard'

The component is exported as a default export. Attempting to use a named import will fail.

CopyToClipboard (registration)

✓ export default { components: { CopyToClipboard } }

✗ export default { /* ... */ } // Missing component registration

When using the component in a Vue template, it must be registered either globally or locally within the consuming component.

Demonstrates how to import and use the `CopyToClipboard` component in a Vue 2 template, binding text and handling the copy event to provide user feedback.

<template> <div> <p>Content to copy: <strong>{{ text }}</strong></p> <copy-to-clipboard :text="text" @copy="handleCopy"> <button style="padding: 8px 16px; background-color: #42b983; color: white; border: none; border-radius: 4px; cursor: pointer;"> Copy to Clipboard </button> </copy-to-clipboard> <p v-if="copiedMessage">{{ copiedMessage }}</p> </div> </template> <script lang="ts"> import CopyToClipboard from 'vue-copy-to-clipboard' import Vue from 'vue'; export default Vue.extend({ components: { CopyToClipboard }, data() { return { text: 'This is the dynamic content to be copied!', copiedMessage: '' } }, methods: { handleCopy(result: { text: string, isSuccess: boolean }) { if (result.isSuccess) { this.copiedMessage = `Successfully copied: '${result.text}'` } else { this.copiedMessage = 'Failed to copy text.' } setTimeout(() => { this.copiedMessage = ''; }, 3000); console.log('onCopy result:', result); } } }); </script>

Debug

Known issues

breakingThis package is specifically designed for Vue 2. It is not compatible with Vue 3. Using it in a Vue 3 project will likely lead to component resolution errors or unexpected behavior. Consider `vue-clipboard3` or `@vueuse/core` for Vue 3.

fix

For Vue 3 projects, use a Vue 3 compatible library like `npm install vue-clipboard3` or `npm install @vueuse/core` and utilize their respective clipboard composables/components.

affects: >=1.0.0

gotchaThe underlying Clipboard API (used by this component) often requires a secure context (HTTPS) and user interaction to function correctly in modern browsers. Copy operations might fail if triggered without a direct user event (e.g., from `mounted` hooks or network responses).

fix

Ensure copy actions are initiated by a direct user gesture (e.g., a click event). Test thoroughly in various browser environments, especially HTTP origins.

affects: >=1.0.0

gotchaThe component uses a default export. Attempting to destructure it with named imports (e.g., `import { CopyToClipboard } from '...'`) will result in an undefined `CopyToClipboard`.

fix

Always use the default import syntax: `import CopyToClipboard from 'vue-copy-to-clipboard'`.

affects: >=1.0.0

Errors

Common errors & fixes

[Vue warn]: Unknown custom element: <copy-to-clipboard>

The `CopyToClipboard` component was imported but not properly registered within the consuming Vue component's `components` option.

fix

Ensure `CopyToClipboard` is added to the `components` property of your Vue component: `export default { components: { CopyToClipboard }, /* ... */ }`.

TypeError: Cannot read properties of undefined (reading 'isSuccess') in handleCopy

This error often occurs when the `onCopy` event handler (or `@copy` in templates) is called without the expected `result` object, or the object structure is different than anticipated.

fix

Verify that the `onCopy` handler correctly accepts the `result` argument as defined in the component's documentation (which includes `text` and `isSuccess`).

Error: NotAllowedError: Document is not focused.

The browser's Clipboard API requires that the document (or an element within it) be in focus and typically that the copy operation is a direct result of user interaction. This error can occur in automated tests or when trying to copy programmatically without user input.

fix

Ensure copy operations are triggered by direct user interactions (e.g., button clicks). For automated testing, consider using browser automation tools that simulate user input.

Upgrade

Version history

1.0.3latest on npm

Audit

Dependencies

vuerequiredThis is a Vue component and requires Vue to function.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/vueComponent/vue-copy-to-clipboard ↗

packagehttps://www.npmjs.com/package/vue-copy-to-clipboard ↗