Vue Copy To Clipboard Component

1.0.3 · maintenance · verified Wed Apr 22

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.

Common errors

```
[Vue warn]: Unknown custom element: <copy-to-clipboard>
```
cause 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
```
cause 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.
```
cause 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.

Warnings

breaking This 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.
gotcha The 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.
gotcha The 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'`.

Install

npm install vue-copy-to-clipboard npm
yarn add vue-copy-to-clipboard yarn
pnpm add vue-copy-to-clipboard pnpm

Imports

CopyToClipboard
wrong:
```
import { CopyToClipboard } from 'vue-copy-to-clipboard'
```
correct:
```
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)
wrong:
```
export default { /* ... */ } // Missing component registration
```
correct:
```
export default { components: { CopyToClipboard } }
```
When using the component in a Vue template, it must be registered either globally or locally within the consuming component.

Quickstart

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>

view raw JSON →