vClip directive

Click on an element to copy its value directly to the clipboard. Uses navigator's clipboard API.

Browser Support


Register the following directive/s:

import vClip from '../../directives/vClip.js';

// ...

app.directive('clip', vClip)

Basic usage

vClip causes clicks on an element to copy its respective value binding. It is especially useful for copying longer text contents from inactive input elements or text areas.


Since vClip is considered a runtime directive, it cannot be previewed in these docs.


  <q-input disabled v-model="inputValue" v-clip />

Full directive's code


const vClip = {
  mounted: (el) => {
    const cb = navigator.clipboard;
    el.addEventListener('click', () => {
      const input = el.tagName === 'input' ? el : el.querySelector('input');
      cb.writeText(input.value).then(() => alert('Text copied'));

export default vClip;