Vue Code Snippets

The Kendo UI Productivity Tools extension provides a handy feature for improving the daily development with our library – code snippets for fast UI component reference and configuration. Snippets simplify and accelerate the implementation of Kendo UI components in your project. They facilitate the development process by providing a quick way for adding the components directly in the source-code, while also including predefined tab stops for the required options.

Our snippets library covers all our components. You can easily add a Grid, Inputs, Layouts, Scheduler, Buttons, etc. just with a single snippet.

To take advantage of the tens availbale code snippets, follow the steps below:

1. Make sure you have the Volar extension installed.
2. Click inside the template section of the component, where the Kendo UI for Vue Native component should be inserted.
3. Type the kv- snippet prefix to list the Kendo UI for Vue snippets
4. Continue by typing the name of the component that should be inserted. Some components are provided by multiple snippets, which allow you to create them in multiple ways, depending on the desired configuration

1. Press Enter to insert the desired component in the source-code
2. Optionally, if the component provides placeholders for specific properties, you could iterate and provide them by pressing the Tab key
3. Import the component whose snippet is inserted. Details about the package you need to import can be found in the description popup of the inserted snippet. For example:

   Copy Codeimport { AutoComplete } from '@progress/kendo-vue-dropdowns';
   

4. If using the Options API, add the component name in the components section. For example:

   Copy Codecomponents: {
       AutoComplete
   }

Code Snippets Library

Suggested Links

• Download the Kendo UI Productivity Tools Extension
• Overview
• Project Wizard