Appearance

Copy ​

Provides copy to clipboard capabilities to a specific content and value

Modes ​

Icon (default) ​

The Copy component can be used in conjunction with the default slot to append the copy to clipboard icon right next to it, and the content passed to the value property will be copied to clipboard

Hover me
vue
<Copy value="f5f74164" mode="icon">Hover me</Copy>

Text ​

If you want to display a text instead of the icon, you can do so by setting the text property on the component and the mode property to text.

Hover me
vue
<Copy value="text copy" text="copy to clipboard" mode="text">
  Hover me
</Copy>

Icon Button ​

If you want use an icon button, you can do so by setting the text property on the component and the mode property to icon-button.

Visibility ​

By default, Copy only displays the indicator while hovering the slot content, but this behavior can be modified by setting the visible property to true in the component

Content
vue
<Copy value="visible copy" visible>Content</Copy>

Events ​

The copy event is emitted when the copy action is completed. This is useful for tracking analytics, showing additional feedback, or performing side effects after copying.

Click to copy (copied 0 times)
vue
<script setup>
  import { ref } from 'vue';
  const copyCount = ref(0);
  const handleCopy = () => {
    copyCount.value++;
    console.log('Text copied!');
  };
</script>

<template>
  <Copy value="tracked-copy-value" @copy="handleCopy">
    Click to copy (copied {{ copyCount }} times)
  </Copy>
</template>

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.