Creating a Copy Code Button in Kendo UI for Vue

Let’s create a copy code button for the Kendo UI for Vue Editor, with correct styling and the copy icon built in.

Progress Kendo UI for Vue has a very useful editor, and it is also extensible!

TL;DR

This allows you to create a copy code button for Kendo UI for Vue and add it to the Editor. This will automatically use the correct styling and the built-in copy icon.

Setup

Create a new Nuxt App. You can also use Vue.js directly.

Get a Kendo UI for Vue License

Log in to Progress Telerik and purchase a Kendo UI License for Vue or use the free trial.

Download the actual key, as you will need it later for deployment.

Install Kendo Licensing

Then run:

This will set up Kendo UI on your local machine for this project. Make sure you have a working license at this point, and to follow the correct setup.

Install Packages

Install all the packages you will need for this demo.

Nuxt Setup

Update your nuxt.config.ts to optimize Vue dependencies and include the CSS for the Kendo UI Theme you want to use. Progress Kendo UI has a Custom ThemeBuilder for any colors you want!

Copy Button Editor

First, we need functionality.

Copy Button Composable

We need a reusable composable that can be used in any component.

• Navigator has a clipboard property that is widely available in all browsers.
• We set a timeout so that the button looks more fluid for the UX. We can get rid of the timer when the composable is unmounted with onScopeDispose.
• We also return the copied value.

Editor Copy Component

Next, we configure the editor.

• We really only need handleEditorChange for more advanced use cases.
• We pass the HTML to the copy code function in the composable, and we use the state to toggle the icon.

Each tools group the buttons into sections.

Here we use render to show the component we want inside our template.

🛸 Bonus: Copy Code Block Button

I created a code block copy button using our composable.

• I generated some SVG Copy buttons, as the Kendo UI Copy Buttons didn’t look correct for this use case. The composable works the exact same way and is extremely easy to use.
• The norm for code blocks is to use pre and code tags.
• If you plan on displaying code blocks in your app, you should install a Syntax Highlighting Library. Prism.jsHighlight.js

Repo: GitHubDemo: Vercel Serverless

Remember, Kendo UI for Vue comes with a free 30-day trial!Try Now

Remember, Kendo UI for Vue comes with a free 30-day trial!

Try Now