Nuxt Content で作ってるブログにある、コードブロックの内容をコピーできるボタンを用意した

<template lang="pug">
  slot
</template>

<style lang="scss">
pre code .line {
  display: block;
  min-height: 1rem;
}
</style>

<template lang="pug">
  div.code-block
    slot
    button(@click="onClick")
</template>

<script lang="ts">
import { useClipboard } from '@vueuse/core';

const props = defineProps({
  code: {
    type: String,
    default: ''
  },
})

const { copy } = useClipboard();

const onClick = () => {
  copy(props.code)
}

</script>

<style lang="scss">
  .code-block {
    pre {
      padding-top: 2.1111111em !important;
      code .line {
        display: block;
        min-height: 1rem;
      }
    }
  }
</s>

<template lang="pug">
div.code-block.relative
  span(
    v-if="filename"
    class="absolute top-0 py-2 px-4 text-xs text-gray-100 bg-zinc-500 dark:bg-gray-800 rounded-br-lg"
  ) {{ filename }}
  span(
    v-else-if="language"
    class="absolute top-0 py-2 px-4 text-xs text-gray-100 bg-zinc-500 dark:bg-gray-800 rounded-br-lg"
  ) {{ language }}
  slot
  label(
    class="absolute top-0 right-4 normal-case btn btn-ghost rounded-btn hover:text-rose-600  dark:hover:text-sky-300 hover:bg-inherit"
    ref='btn'
    @click="onClick"
  )
    span.mr-2(v-if="copied") Copied code!
    span.mr-2(v-else-if="isHovered") Copy
    font-awesome-icon(icon="copy" v-element-hover="onHover")
</template>

<script setup lang="ts">
import { useClipboard } from '@vueuse/core';
import { vElementHover } from "@vueuse/components"

const props = defineProps({
  code: {
    type: String,
    default: ''
  },
  language: {
    type: String,
    default: ''
  },
  filename: {
    type: String,
    default: ''
  }
})

const isHovered = ref(false)
function onHover(state: boolean) {
  isHovered.value = state
}

const { copy, copied } = useClipboard();

const onClick = () => {
  copy(props.code)
}

</script>

<style lang="scss">
  .code-block {
    pre {
      padding-top: 2.1111111em !important;
      code .line {
        display: block;
        min-height: 1rem;
      }
    }
  }
</style>

```language{number[]}[filename]
// JavaScript のコード
```

````md
```js
```
````