In order to to make life hard for content thieves, I'd like to disable copy-paste of rendered texts on vue.js ponents.

Here is an example template :

<template>
  <div id="my-precious-content">
    <div class="container"> 
      <div> Some {{texts}} e here </div>
      <div> Still {{moreTexts}} here </div>
    </div>
  </div>
</template> 

I'm wondering how to achieve this?

In order to to make life hard for content thieves, I'd like to disable copy-paste of rendered texts on vue.js ponents.

Here is an example template :

<template>
  <div id="my-precious-content">
    <div class="container"> 
      <div> Some {{texts}} e here </div>
      <div> Still {{moreTexts}} here </div>
    </div>
  </div>
</template> 

I'm wondering how to achieve this?

• javascript
• vue.js

1 Answer 1

Moral point of view: You shouldn't. It's breaking user experience for normal users. They cant copy things to translate them to another language, cant copy links and so on.

Short answer: You can't.

Long answer: You can make it a bit harder, but they are still gonna be able to copy it (unless you convert it to an image). Easiest way to prevent copying is preventing selecting text, you do it with css like that:

.container {
    -webkit-user-select: none;  
    -moz-user-select: none;  
    -ms-user-select: none;  
    -o-user-select: none;  
    user-select: none;
}

Another approach You could use oncopy event, but it's not standard and not recended for production by mdn web docs, so i'd stick to the css solution.