New to Kendo UI for Vue? Start a free 30-day trial

You’re currently viewing documentation for our jQuery wrappers.This product reached EOL in May, 2024. To ensure smoother transition we provide support till May, 2025. Check here details and migration guidelines.

Get Started with Kendo UI for Vue Wrapper Components

To start using the Kendo UI for Vue components, you need to integrate them in either of the available ways.

Play also our video tutorial on Getting Started with Kendo UI and Vue.

Integrating with NPM and Webpack

To integrate the Kendo UI for Vue by using NPM and Webpack:

  1. Set up the Vue project
  2. Update and build the application

Setting Up the Vue Project

To create a new Vue project, use the Create Vue App approach from the official Vue documentation.

  1. Add Kendo UI by installing the Kendo UI Professional NPM package.

    npm install --save @progress/kendo-ui
  2. Add Kendo UI Theme by installing the Kendo UI Default Theme NPM package.

    npm install --save @progress/kendo-theme-default
  3. Add the Kendo UI DateInputs wrappers package for Vue.

    npm install --save @progress/kendo-dateinputs-vue-wrapper
  4. Import the Kendo UI packages to the App component. If you refer to Kendo UI in two or more places in your application, add the Kendo UI-related files only to the main.js file. Alternatively, add them only to the component files where they will be used.

    import '@progress/kendo-ui'
    import '@progress/kendo-theme-default/dist/all.css'
    import { Calendar } from '@progress/kendo-dateinputs-vue-wrapper'
  5. Add the Calendar component globally by registering it as a global component and then adding it to the collection of components.

    Vue.component(, Calendar)
    new Vue({
    	el: '#app',
    	template: '<App/>',
    	components: {
  6. Declare the Calendar in a component by opening the Hello.vue file and then adding the Calendar to the template section.

    	<div class="hello">
    		<h1>{{ msg }}</h1>
    		<kendo-calendar :value="new Date()"></kendo-calendar>
    	export default {
    		name: 'hello',
    		data () {
    			return {
    				msg: 'Hello Kendo UI for Vue.js'

Building the Application

After you add the dependencies and the code, run the npm run dev command to start the application.

As a result, the application is built and the Calendar component appears on the screen.

VSCode Extension

To help you create projects even faster we have introduced the Kendo UI VS Code Template Wizard. To learn more about this awesome extension please check Introducing the Kendo UI Template Wizard for Visual Studio Code.