{"id":28518979,"url":"https://github.com/rarar89/copy-code-vue","last_synced_at":"2026-02-14T08:03:36.618Z","repository":{"id":281507447,"uuid":"945419099","full_name":"rarar89/copy-code-vue","owner":"rarar89","description":"Add copy button to your code blocks automatically","archived":false,"fork":false,"pushed_at":"2025-03-26T18:30:40.000Z","size":249,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-26T08:51:39.767Z","etag":null,"topics":["button","clipboard","code-blocks","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rarar89.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-09T11:32:07.000Z","updated_at":"2025-03-26T18:29:11.000Z","dependencies_parsed_at":"2025-03-09T15:43:26.335Z","dependency_job_id":null,"html_url":"https://github.com/rarar89/copy-code-vue","commit_stats":null,"previous_names":["rarar89/copy-code-vue"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rarar89/copy-code-vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rarar89%2Fcopy-code-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rarar89%2Fcopy-code-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rarar89%2Fcopy-code-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rarar89%2Fcopy-code-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rarar89","download_url":"https://codeload.github.com/rarar89/copy-code-vue/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rarar89%2Fcopy-code-vue/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29439821,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T07:24:13.446Z","status":"ssl_error","status_checked_at":"2026-02-14T07:23:58.969Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["button","clipboard","code-blocks","vue"],"created_at":"2025-06-09T06:05:50.130Z","updated_at":"2026-02-14T08:03:36.613Z","avatar_url":"https://github.com/rarar89.png","language":"TypeScript","readme":"# Copy Code Vue\n\nA lightweight Vue library that automatically adds copy buttons to code blocks. Customizable options for button position, styling, text and highlighting.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/rarar89/copy-code-vue/blob/main/public/copy-code-block.gif?raw=true\" alt=\"Copy Code Demo\" style=\"max-width:300px\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/copy-code-vue\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/copy-code-vue.svg\" alt=\"npmjs\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/rarar89/copy-code-react\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/React-library-blue\" alt=\"React version\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://apimimic.com/blog/building-a-crud-application-with-react-and-nextjs/\"\u003e\n    LIVE DEMO\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Installation\n\nInstall using pnpm, npm or yarn\n\n```bash\npnpm install copy-code-vue\n```\n\n```bash\nnpm install copy-code-vue\n```\n\n```bash\nyarn add copy-code-vue\n```\n\n## Usage\n\n### Method 1: Using the CopyCode Component\n\nThe CopyCode component automatically adds copy buttons to all code blocks within it. This is the simplest way to add copy functionality to specific sections of your app.\n\n```vue\n\u003cscript setup\u003e\nimport { CopyCode } from 'copy-code-vue';\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cCopyCode\u003e\n    \u003cdiv\u003e\n      \u003ch3\u003eExample code block:\u003c/h3\u003e\n      \u003cpre\u003e\u003ccode\u003e\n        function hello() {\n          console.log(\"Hello, world!\");\n        }\n      \u003c/code\u003e\u003c/pre\u003e\n      \u003cdiv\u003e\n        \u003ch4\u003eExample code block 2:\u003c/h4\u003e\n        \u003cpre\u003e\u003ccode\u003e\n          const a = b + c;\n        \u003c/code\u003e\u003c/pre\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/CopyCode\u003e\n\u003c/template\u003e\n```\n\nCopyCode component also works with v-html:\n\n```vue\n\u003cscript setup\u003e\nimport { CopyCode } from 'copy-code-vue';\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cCopyCode\u003e\n    \u003cdiv v-html=\"'\u003cpre\u003e\u003ccode\u003econsole.log(\\\"Hello, world!\\\");\u003c/code\u003e\u003c/pre\u003e'\"\u003e\u003c/div\u003e\n  \u003c/CopyCode\u003e\n\u003c/template\u003e\n```\n\nYou can customize the appearance and behavior of the copy buttons:\n\n```vue\n\u003cscript setup\u003e\nimport { CopyCode } from 'copy-code-vue';\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cCopyCode \n    position=\"bottom-right\" \n    copyMessage=\"Copied!\" \n    :highlightOnCopy=\"true\"\n  \u003e\n    \u003c!-- Your code blocks here --\u003e\n  \u003c/CopyCode\u003e\n\u003c/template\u003e\n```\n\n### Using Custom Icons\n\nYou can provide your own custom icons for both the copy button and success state:\n\n```vue\n\u003ctemplate\u003e\n  \u003cCopyCode \n    position=\"top-right\" \n    copyMessage=\"Copied with custom icon!\" \n  \u003e\n    \u003ctemplate #copy-icon\u003e\n      \u003cCustomCopyIcon /\u003e\n    \u003c/template\u003e\n    \u003ctemplate #success-icon\u003e\n      \u003cCustomSuccessIcon /\u003e\n    \u003c/template\u003e\n    \n    \u003c!-- Your code blocks here --\u003e\n    \u003cpre\u003e\u003ccode\u003eYour code here\u003c/code\u003e\u003c/pre\u003e\n  \u003c/CopyCode\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { CopyCode } from 'copy-code-vue';\nimport CustomCopyIcon from './components/icons/CustomCopyIcon.vue';\nimport CustomSuccessIcon from './components/icons/CustomSuccessIcon.vue';\n\u003c/script\u003e\n```\n\n### Method 2: Using the Composable Directly\n\nFor more control, you can use the useCopyCode composable directly in your components. This allows you to target specific sections of your app.\n\n```vue\n\u003cscript setup\u003e\nimport { ref, onMounted } from 'vue';\nimport { useCopyCode } from 'copy-code-vue';\n\n// Create a ref to limit the scope of code blocks that will get copy buttons\nconst containerRef = ref(null);\n\n// Apply the composable with custom options\nuseCopyCode(\n  { \n    position: 'top-left',\n    copyMessage: 'Code Copied!',\n    highlightOnCopy: true \n  }, \n  containerRef\n);\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv ref=\"containerRef\"\u003e\n    \u003cpre\u003e\n      \u003ccode\u003e\n// This code block will have a copy button\nfunction example() {\n  return \"Hello world!\";\n}\n      \u003c/code\u003e\n    \u003c/pre\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\nWithout a ref, the composable will apply to all code blocks in the document:\n\n```vue\n\u003cscript setup\u003e\nimport { useCopyCode } from 'copy-code-vue';\n\n// Add copy buttons to all code blocks in the document\nuseCopyCode({ \n  selector: 'pre code',\n});\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003c!-- Your content with code blocks --\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Options\n\nBoth the CopyCode component and useCopyCode composable accept the following options:\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| selector | string | 'pre code' | CSS selector for code blocks |\n| position | string | 'top-right' | Position of the copy button. Options: 'top-right', 'top-left', 'bottom-right', 'bottom-left' |\n| copyMessage | string | 'Copied' | Message to show after copying |\n| copyMessageTimeout | number | 2000 | Time in milliseconds to show the success message |\n| containerClassName | string | 'copy-code-vue-button-container' | Class name for the button container |\n| buttonClassName | string | 'copy-code-vue-button' | Class name for the copy button |\n| successClassName | string | 'copy-code-vue-success' | Class name for success message |\n| highlightOnCopy | boolean | false | Whether to highlight the code block when copied |\n\n## Development\n\nTo develop and test the library:\n\n```bash\n# Install dependencies\nnpm install\n\n# Start the development server\nnpm run dev\n```\n\nThe development server will start, and you can view the examples at `http://localhost:5173` (or the port shown in your terminal).\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frarar89%2Fcopy-code-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frarar89%2Fcopy-code-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frarar89%2Fcopy-code-vue/lists"}