Last active
August 3, 2025 12:26
-
-
Save chstappert/e4d0848c3a990d54bbdc84605bbc29ff to your computer and use it in GitHub Desktop.
Multiple Clipboard on inline composable with Vueuse clipboard function
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script setup lang="ts"> | |
const useMultipleClipboard = () => { | |
const clipboards = reactive({ | |
shield: useClipboard(), | |
markdown: useClipboard(), | |
html: useClipboard() | |
}) | |
const copyToClipboard = (type: keyof typeof clipboards, content: string) => { | |
clipboards[type].copy(content) | |
} | |
const getCopiedState = (type: keyof typeof clipboards) => { | |
return clipboards[type].copied | |
} | |
return { copyToClipboard, getCopiedState } | |
} | |
const { copyToClipboard, getCopiedState } = useMultipleClipboard() | |
const exampleContent = { | |
shield: 'https://img.shields.io/badge/Example-Badge-blue', | |
markdown: '[](https://example.com)', | |
html: '<a href="https://example.com"><img src="https://img.shields.io/badge/Example-Badge-blue" alt="Example Badge"></a>' | |
} | |
</script> | |
<template> | |
<div class="clipboard-demo"> | |
<h2>Multiple Clipboard with inline composable</h2> | |
<div class="copy-section"> | |
<h3>Shield URL</h3> | |
<div class="code-block"> | |
<pre><code>{{ exampleContent.shield }}</code></pre> | |
<button | |
@click="copyToClipboard('shield', exampleContent.shield)" | |
:class="{ 'copied': getCopiedState('shield') }" | |
class="copy-btn" | |
> | |
{{ getCopiedState('shield') ? 'Copied!' : 'Copy' }} | |
</button> | |
</div> | |
</div> | |
<div class="copy-section"> | |
<h3>Markdown Badge</h3> | |
<div class="code-block"> | |
<pre><code>{{ exampleContent.markdown }}</code></pre> | |
<button | |
@click="copyToClipboard('markdown', exampleContent.markdown)" | |
:class="{ 'copied': getCopiedState('markdown') }" | |
class="copy-btn" | |
> | |
{{ getCopiedState('markdown') ? 'Copied!' : 'Copy' }} | |
</button> | |
</div> | |
</div> | |
<div class="copy-section"> | |
<h3>HTML Badge</h3> | |
<div class="code-block"> | |
<pre><code>{{ exampleContent.html }}</code></pre> | |
<button | |
@click="copyToClipboard('html', exampleContent.html)" | |
:class="{ 'copied': getCopiedState('html') }" | |
class="copy-btn" | |
> | |
{{ getCopiedState('html') ? 'Copied!' : 'Copy' }} | |
</button> | |
</div> | |
</div> | |
</div> | |
</template> | |
<style scoped> | |
.clipboard-demo { | |
max-width: 800px; | |
margin: 2rem auto; | |
padding: 2rem; | |
font-family: system-ui, sans-serif; | |
} | |
.copy-section { | |
margin-bottom: 2rem; | |
} | |
.copy-section h3 { | |
margin: 0 0 0.5rem 0; | |
font-size: 1.1rem; | |
color: #374151; | |
font-weight: 600; | |
} | |
.code-block { | |
position: relative; | |
background: #f9fafb; | |
border: 1px solid #e5e7eb; | |
border-radius: 0.5rem; | |
overflow: hidden; | |
} | |
.copy-btn { | |
position: absolute; | |
top: 0.5rem; | |
right: 0.5rem; | |
padding: 0.25rem 0.75rem; | |
background: #6366f1; | |
color: white; | |
border: none; | |
border-radius: 0.25rem; | |
font-size: 0.875rem; | |
font-weight: 500; | |
cursor: pointer; | |
transition: all 0.2s ease; | |
} | |
.copy-btn:hover { | |
background: #4f46e5; | |
} | |
.copy-btn.copied { | |
background: #10b981; | |
} | |
pre { | |
margin: 0; | |
padding: 1rem; | |
padding-right: 5rem; | |
overflow-x: auto; | |
font-size: 0.875rem; | |
line-height: 1.5; | |
} | |
pre code { | |
word-break: break-all; | |
color: #1f2937; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Learn more about inline composabels form @TheAlexLichter here: https://www.youtube.com/watch?v=iKaDFAxzJyw&t=816s