Copying the selected text from the webpage or input HTML element is easy with the keyboard shortcut CTRL+C and context menu.
To make it little easier for the user you can add a button.
For copy text to the clipboard in Vue.js, you can use the vue-clipboard2 package.
In this tutorial, I show how you can copy text from an HTML element on a button click to the clipboard.
Contents
1. Download Clipboard.js
- Download the package from GitHub and extract it in your project directory.
- Include
vue-clipboard.min.jsscript withvue.jsin the<head>section.
<script src="vue.js"></script> <script src="vue-clipboard2-master/dist/vue-clipboard.min.js"></script>
2. HTML
Create two <textarea> and a button.
The first textarea for inputting some text and the second textarea to display the copied text when a button gets clicked.
In the button define 3 attributes –
- v-clipboard:copy – Here, passed the model name
messagefrom where to copy text. - v-clipboard:success – Pass method name
onCopy. This called when text copied successfully. - v-clipboard:error – Pass method name
onError. This called when it failed to copy text.
Completed Code
<div id="app"> <textarea v-model='message'></textarea> <button type="button" v-clipboard:copy="message" v-clipboard:success="onCopy" v-clipboard:error="onError">Copy!</button> <br/> Copied Text: <br/><textarea v-model='copiedText'></textarea> </div>
3. Script
Create two data variables – message, and copiedText.
Define two methods –
- onCopy – Called when copy text to the clipboard. Assign
e.texttothis.copiedText. - onError – Called when failed to copy text.
Completed Code
new Vue({
el: '#app',
data:{
message: '',
copiedText: ''
},
methods: {
onCopy: function (e) {
this.copiedText = e.text;
},
onError: function (e) {
console.log('Failed to copy texts')
}
}
})
4. Demo
5. Conclusion
With vue-clipboard2.js package you can easily copy text to clipboard on the button click. It works the same as copying text by pressing CTRL+C from the keyboard.
