vuejs and kendo ui

[eni]

I'm just getting started with vue.js 2.0. I've been using Telerik's Kendo UI and their MVVM framework, but I'd like to switch to vue.js. Does anyone know how I might go about creating wrappers to make kendo and vue.js work together? I've never done anything like this and not really sure where to start. Thank you for any guidance.

[Petar]

Hi Eni,

The first thing I can recommend if you are now starting with Vue.js, is to directly focus on its version 3, instead of 2. Vue 3 is already the official latest version of Vue.js. 

The second thing I can recommend is to use the Kendo UI for Vue Native components instead of the Kendo UI for Vue Wrappers. The Native components are built from scratch with Vue.js and provide all the benefits of the Vue ecosystem. The Wrapper components use Kendo UI for jQuery under the hood and there are limitations in their usage. 

As per your question about how to integrate the Vue components work with other code, what I can suggest for your scenario are two options:

1. Option 1 - What we recommend -  Create a new Vue project and use the routing provided by the Framework. Using the routing, you can redirect your users to the pages that are currently implemented with Kendo UI for jQuery. Once your current application is correctly working with the Vue JS routing, you can start implementing a given functionality of the application using the Kendo UI for Vue Native suite. In this scenario, your application will work with NPM packages, will have a better structure, and will be easily maintained. 
2. Option 2 - As the Vue Framework is also designed to be easily pluggable into legacy code, what you can do is to keep the current implementation of your project and use Vue with CDN/script file and not through NPM packages. For example, here is a Dojo project demonstrating how we can use the Native Grid component and add the Chart inside it. As you can see the implementation in the linked example is not as readable as this StackBlitz project that uses the approach from Option 1. However, using CDN allows you to change selected parts of your application by including Vue components. If you decide to use this approach, once all your functionality is migrated to Vue, I would suggest creating the Vue project from "Option 1" and moving everything to a Vue-based project. 
   

I hope the above details will help you achieve the migration that you are planning. 

Regards,
Petar
Progress Telerik