Installations

npm install v-clipboard

Pull Requests

Open

1

Total

20

Closed

11

Merged

8

Issues

Open

2

Total

18

Closed

16

Releases

1

3.0.1

v3.0.1

Published on 20 Dec 2022

View all 1 releases

Developer

euvl

Developer Guide

BETA

Module System

ESM

Min. Node Version

Typescript Support

Yes

Node Version

16.13.0

NPM Version

8.1.0 Statistics

520 Stars

100 Commits

39 Forks

6 Watching

1 Branches

6 Contributors

Updated on 04 Nov 2024

Languages

TypeScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

7,968,523

Last day

0.8%

5,040

Compared to previous day

Last week

8.8%

28,007

Compared to previous week

Last month

5.1%

114,284

Compared to previous month

Last year

-25.2%

1,512,253

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

1

vue

Dev Dependencies

6

@types/node @vitejs/plugin-vue typescript vite vite-plugin-dts vue-tsc

Versions

Supporters

Check them out.

Install

1npm install --save v-clipboard

1yarn add v-clipboard

1import Vue from 'vue'
2import Clipboard from 'v-clipboard'
3
4Vue.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):

1<button v-clipboard="value">
2  Copy to clipboard
3</button>

1<button v-clipboard="'some text'">
2  Copy to clipboard
3</button>

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

1<button v-clipboard="() => value">
2  Copy to clipboard
3</button>

Copying anything in your methods:

1this.$clipboard(value)

Without plugin:

1import { Clipboard } from 'v-clipboard'
2
3await Clipboard.copy(value)

Events

1<button
2  v-clipboard="foo"
3  v-clipboard:success="clipboardSuccessHandler"
4  v-clipboard:error="clipboardErrorHandler"
5>
6  Copy to clipboard
7</button>

1{
2  methods: {
3    clipboardSuccessHandler (value, event) {
4      console.log('success', value)
5    },
6
7    clipboardErrorHandler (value, event) {
8      console.log('error', value)
9    }
10  }
11}

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

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Maintained

Determines if the project is "actively maintained".

0

SAST

Determines if the project uses static code analysis.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.7

/10

Last Scanned on 2024-11-25

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More