You’re currently viewing documentation for our jQuery wrappers.We highly recommend that you migrate to the equivalent Native Vue component as that is what will receive updates in the future.

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.

• Integrating by using NPM and Webpack
• Integrating by using CDN
• VSCode Extension

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.

   Copy Codenpm install --save @progress/kendo-ui

2. Add Kendo UI Theme by installing the Kendo UI Default Theme NPM package.

   Copy Codenpm install --save @progress/kendo-theme-default

3. Add the Kendo UI DateInputs wrappers package for Vue.

   Copy Codenpm 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.

   Copy Codeimport '@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.

   Copy CodeVue.component(Calendar.name, Calendar)
   
   new Vue({
   	el: '#app',
   	router,
   	template: '<App/>',
   	components: {
   		App,
   		Calendar
   	}
   })

6. Declare the Calendar in a component by opening the Hello.vue file and then adding the Calendar to the template section.

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

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.

Suggested Links

• Configuration of the Kendo UI Wrappers for Vue
• Model Binding of the Kendo UI Wrappers for Vue
• Integrating with CDN
• Video Tutorial on Getting Started with Kendo UI and Vue