# v-clipboard

> Vue.js Clipboard Plugin

Latest version **3.0.0-next.1** (published 2022-12-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install v-clipboard
pnpm add v-clipboard
yarn add v-clipboard
bun add v-clipboard
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0-next.1 |
| Published | 2022-12-16 |
| First published | 2017-07-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 27.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 515 |
| Author | https://github.com/euvl |
| Maintainers | euvl |
| Keywords | vue, clipboard, vue clipboard, copy, vue copy |

## Links

- npm: https://www.npmjs.com/package/v-clipboard
- Repository: https://github.com/euvl/v-clipboard
- Homepage: https://github.com/euvl/v-clipboard#readme
- Issues: https://github.com/euvl/v-clipboard/issues
- npm.io page: https://npm.io/package/v-clipboard

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.2.45

## Recent versions

- 3.0.0-next.1 (latest) — 2022-12-16
- 3.0.0-next.0 — 2022-12-16
- 2.2.3 — 2020-05-10
- 2.2.2 — 2019-04-06
- 2.2.1 — 2018-12-11
- 2.2.0 — 2018-12-11
- 2.1.1 — 2018-12-11
- 2.0.1 — 2018-05-31
- 2.0.0 — 2018-05-31
- 1.0.4 — 2017-07-06
- 1.0.3 — 2017-07-06
- 1.0.2 — 2017-07-06
- 1.0.1 — 2017-07-06
- 1.0.0 — 2017-07-06

## README

[![npm](https://img.shields.io/npm/v/v-clipboard)](https://img.shields.io/npm/v/v-clipboard)
[![npm](https://img.shields.io/npm/dy/v-clipboard)](https://img.shields.io/npm/dy/v-clipboard)

## Vue Clipboard

### Demo 

https://codesandbox.io/s/epic-waterfall-17yet5?file=/src/App.vue

### Install

```bash
npm install --save v-clipboard
```

```bash
yarn add v-clipboard
```

```javascript
import Vue from 'vue'
import Clipboard from 'v-clipboard'

Vue.use(Clipboard)
```

### Using

When an element that contains `v-clipboard` directive is clicked, the value of `value` will be copied into clipboard.

---

Copying **static** value (directive should receive actual value):

```vue
<button v-clipboard="value">
  Copy to clipboard
</button>
```

```vue
<button v-clipboard="'some text'">
  Copy to clipboard
</button>
```

Copying **dynamic** value (directive should recieve a function that returns value):

```vue
<button v-clipboard="() => value">
  Copy to clipboard
</button>
```

Copying **anything** in your methods:

```js
this.$clipboard(value)
```

Without plugin: 
```js
import { Clipboard } from "v-clipboard"

Clipboard.copy(value)
```

### Events

```vue
<button v-clipboard="foo"
        v-clipboard:success="clipboardSuccessHandler"
        v-clipboard:error="clipboardErrorHandler">
  Copy to clipboard
</button>
```

```js
{
  methods: {
    clipboardSuccessHandler ({ value, event }) {
      console.log('success', value)
    },

    clipboardErrorHandler ({ value, event }) {
      console.log('error', value)
    }
  }
}
```

### Compatibility

<p align="center">
  <img src="https://user-images.githubusercontent.com/1577802/28269902-8ae0e01e-6afb-11e7-9981-d4965bac69d1.png">
</p>

---
_Source: https://npm.io/package/v-clipboard · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._