Skip to content

Instantly share code, notes, and snippets.

@chstappert
Last active August 3, 2025 12:26
Show Gist options
  • Save chstappert/e4d0848c3a990d54bbdc84605bbc29ff to your computer and use it in GitHub Desktop.
Save chstappert/e4d0848c3a990d54bbdc84605bbc29ff to your computer and use it in GitHub Desktop.
Multiple Clipboard on inline composable with Vueuse clipboard function
<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: '[![Example Badge](https://img.shields.io/badge/Example-Badge-blue)](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>
@chstappert
Copy link
Author

Learn more about inline composabels form @TheAlexLichter here: https://www.youtube.com/watch?v=iKaDFAxzJyw&t=816s

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment