How to prevent copy paste in vue.js

Total
1
Shares

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

Here is an example template :

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

I’m wondering how to achieve this?


Solution

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 reccomended for production by mdn web docs, so i’d stick to the css solution.

Leave a Reply

Your email address will not be published. Required fields are marked *