VitePress CopyButton

Appearance

Use from Source ​

Work in Progress

This guide is not yet complete but should get you started.

You can easily add the source file to your project for full control over the template.

Download or copy the CopyButton.vue file to your project.

  • Source File: CopyButton.vue
  • Target Location: .vitepress/theme/components/CopyButton.vue

Add these 2 lines to your index.[js,ts].

.vitepress/theme/index.js
javascript
import DefaultTheme, { VPBadge } from 'vitepress/theme'

import CopyButton from './components/CopyButton.vue'

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    app.component('Badge', VPBadge) 

    app.component('CB', CopyButton) 
  },
}
VPBadge Only required if you are using the VitePress Badge.

See the CopyButton Documentation for <CB /> tag usage or view the Examples.