@lxf2513/vue3-clipboard
Advanced tools
A simple vuejs 3 binding for clipboard.js, based on Inndy/vue-clipboard2
npm install @lxf2513/vue3-clipboard or use <script type="module"> without npm
For vite user:
import { createApp } from 'vue'
import { VueClipboard } from '@lxf2513/vue3-clipboard'
const app = createApp({})
app.use(VueClipboard)
For standalone usage:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@3.5.12/dist/vue.global.prod.min.js"></script>
</head>
<body>
<button onclick="module.copy()">Copy</button>
<script type="module">
import { copyText } from 'https://cdn.jsdelivr.net/npm/@lxf2513/vue3-clipboard@1.1.0/+esm'
function copy() {
copyText('https://github.com/luoxiangfan/vue3-clipboard', undefined, (success, evt) => {
console.log(success) // true or false
console.log(evt) // Clipboard Event
})
}
module.copy = copy
</script>
<script>
const module = {}
</script>
</body>
</html>
container option is available like this:
In Options API:
const container = this.$refs.container
this.$copyText((text: 'https://github.com/luoxiangfan/vue3-clipboard'), container)
In Composition API:
import { copyText } from '@lxf2513/vue3-clipboard'
import { ref } from 'vue'
const container = ref(null)
copyText('https://github.com/luoxiangfan/vue3-clipboard', container.value)
Or you can let @lxf2513/vue3-clipboard set container to current element by doing this:
import { createApp } from 'vue'
import { VueClipboard } from '@lxf2513/vue3-clipboard'
const app = createApp({})
app.use(VueClipboard, {
autoSetContainer: true,
appendToBody: true,
})
<template>
<div class="container">
<button
v-clipboard:copy="message"
v-clipboard:success="handleSuccess"
v-clipboard:error="handleError"
>
Copy
</button>
</div>
</template>
<script setup>
const message = 'https://github.com/luoxiangfan/vue3-clipboard'
const handleSuccess = (e) => {
alert('Copied text: ' + e.text)
}
const handleError = (e) => {
alert('Copy failed')
}
</script>
<template>
<div class="container">
<button
@click="$copyText('https://github.com/luoxiangfan/vue3-clipboard')"
>
Copy
</button>
</div>
</template>
<template>
<div class="container">
<button type="button" @click="copy">Copy</button>
</div>
</template>
<script setup>
import { copyText } from '@lxf2513/vue3-clipboard'
const copy = () => {
copyText('https://github.com/luoxiangfan/vue3-clipboard', undefined, (success, evt) => {
console.log(success) // true or false
console.log(evt) // Clipboard Event
})
}
</script>
FAQs
clipboard for vue3
We found that @lxf2513/vue3-clipboard demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The White House’s Gold Eagle Initiative aims to coordinate AI-discovered vulnerabilities, validate findings, and accelerate patching across critical software.
Security News
A Shai-Hulud infection exposed Suno's source code, which shows the AI music startup stream-ripped tracks to train its models.
Security News
Vercel is formalizing a monthly release program for Next.js. The change follows React2Shell and a sharp rise in AI-assisted vulnerability discovery.