How to create a directive on VUE?

Question

Vue.js

Hello.
Guys, tell me how to make a directive out of this ?
To make it look something like this
<div v-clipboard="someData">Copy button</div>

Answer 1

how to make a directive out of this ?

That's right - no way. You don't need to use execCommand :

Note: This method is obsolete and should not be used. In particular, to interact with the clipboard, consider using the Clipboard API instead.

So let's follow the advice from the documentation, and use modern tools:

const clipboardDirective = (() => {
  const values = new Map();
  const onClick = e => navigator.clipboard.writeText(values.get(e.currentTarget));

  return {
    bind(el, binding) {
      el.addEventListener('click', onClick);
      values.set(el, binding.value);
    },
    update(el, binding) {
      values.set(el, binding.value);
    },
    unbind(el) {
      el.removeEventListener('click', onClick);
      values.delete(el);
    },
  };
})();

Vue.directive('clipboard', clipboardDirective);

Well, okay?