Never Print Magazines

    @soerenmartius/vue3-clipboard
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published

    vue3-clipboard

    Build

    Clipboard.js bindings for Vue 3.

    This repository is a port of Inndy's vue-clipboard2 plugin for Vue3.

    Install

    npm install --save @soerenmartius/vue3-clipboard

    Usage

    Import the v-clipboard directive globally

    src/main.ts

    import { createApp } from 'vue'
    import App from './App.vue'
    import { VueClipboard } from '@soerenmartius/vue3-clipboard'
    
    createApp(App).use(VueClipboard).mount('#app')

    Import the v-clipboard directive for a specific component

    Examples

    Apply the v-clipboard directive to an element

    <template>
      <input v-model="value" />
      <button v-clipboard="value">Copy</button>
    </template>
    
    <script lang="ts">
    import { defineComponent, ref } from 'vue'
    
    export default defineComponent({
      setup() {
        const value = ref('lorem')
    
        return { value }
      },
    })
    </script>

    Copy value of an input, and handle events separately.

    <template>
      <input v-model="value" />
      <button
        v-clipboard:copy="value"
        v-clipboard:success="onSuccess"
        v-clipboard:error="onError"
      >
        Copy
      </button>
    </template>
    
    <script lang="ts">
    import { defineComponent, ref } from 'vue'
    
    export default defineComponent({
      setup() {
        const value = ref('lorem')
    
        const onSuccess = () => {
          console.log('success')
        }
    
        const onError = () => {
          console.log('error')
        }
    
        return { value, onSuccess, onError }
      },
    })
    </script>

    Standalone usage of the toClipboard function

    <template>
      <input v-model="value" />
      <button @click="toClipboard(value)">Copy</button>
    </template>
    
    <script lang="ts">
    import { defineComponent, ref } from 'vue'
    
    import { toClipboard } from '@soerenmartius/vue3-clipboard'
    
    export default defineComponent({
      setup() {
        const value = ref('lorem')
    
        return { value, toClipboard }
      },
    })
    </script>

    Contributing

    Contributions are always encouraged and welcome! For the process of accepting changes, we use Pull Requests. For feature requests please fill an issue.

    License

    License: MIT

    Install

    npm i @soerenmartius/vue3-clipboard

    DownloadsWeekly Downloads

    2,914

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    143 kB

    Total Files

    8

    Last publish

    Collaborators

    • soerenmartius