Vue js 3 Copy to Clipboard
2 years ago
admin
Vuejs
Today we are going to see how to copy to clipboard using Vue js 3 and SweetAlert 2.
How to Copy to Clipboard using Vue js 3
So to copy to the clipboard using Vue js 3 we use the navigator object here we have an example that copies a link to clipboard and display the link copied using sweet alert 2.
<template>
<button
class="btn btn-primary"
@click="copy('https://www.google.com')">
Copy Link
</button>
</template>
<script scope>
import Swal from 'sweetalert2';
const copy = (link) => {
navigator.clipboard.writeText(`${link}`);
Swal.fire({
position: 'top-end',
icon: 'success',
title: 'Your link has been copied: ' + link,
showConfirmButton: false,
timer: 2500
});
}
</script>
<style>
</style>