https://github.com/euvl/v-clipboard

Simple and powerful clipboard plugin for Vue.js 2 and 3
https://github.com/euvl/v-clipboard

clipboard vue vuejs

Last synced: 4 days ago
JSON representation

Simple and powerful clipboard plugin for Vue.js 2 and 3

• Host: GitHub
• URL: https://github.com/euvl/v-clipboard
• Owner: euvl
• License: mit
• Created: 2017-07-05T19:47:44.000Z (over 7 years ago)
• Default Branch: main
• Last Pushed: 2023-05-04T08:41:15.000Z (over 1 year ago)
• Last Synced: 2024-04-14T04:55:36.619Z (7 months ago)
• Topics: clipboard, vue, vuejs
• Language: TypeScript
• Homepage:
• Size: 212 KB
• Stars: 522
• Watchers: 6
• Forks: 39
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

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)

### Supporters



  

      

  

  

      

  



Check them out.

### 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)

```

### Usage

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

  Copy to clipboard

```

```vue

  Copy to clipboard

```

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

```vue

  Copy to clipboard

```

Copying **anything** in your methods:

```js

this.$clipboard(value)

```

Without plugin:

```js

import { Clipboard } from 'v-clipboard'

await Clipboard.copy(value)

```

### Events

```vue

  Copy to clipboard

```

```js

{

  methods: {

    clipboardSuccessHandler (value, event) {

      console.log('success', value)

    },

    clipboardErrorHandler (value, event) {

      console.log('error', value)

    }

  }

}

```

### How it works

`copy / $clipboard` is an `async` call. Firstly, library makes an attempt to update clibpoard using `execCommand`, if that operation is unsuccessful it makes an attemnt to use Navigator Clipboard API and automatically requests access, waits for access to be granted, then writes to clipboard.

### Demo

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

### Compatibility