In 2024, we announced thedeprecation of the Kendo UI for Vue Wrapper components of our jQuery suite, with End of Support by end of May, 2025. This deprecation is a huge step forward for our native Vue product - Kendo UI for Vue as it will now be our sole development focus. Naturally, this decision comes with some changes from the developers’ perspective for everyone previously using the Wrappers.
This article is only relevant to users still using Kendo UI Vue Wrappers. If you don’t know or have never used the Wrapper components you can safely skip this article .
This article:
You can directly jump to the following article sections:
The Wrapper documentation is already unpublished from our docs site and has been moved toour public repository.
In the shared link, you can find all Wrappers documentation previously available, separated by package names. Each package folder has subfolders with the names of the components part of each package. Following this structure here is where you can find the:
Another option to easily navigate to the documentation of the different components is using the list in thisReadMe file or using the search functionality of the shared repository.
Althoughthe Kendo UI for Vue Native suite provides a bigger number of components and functionalities that were not available in the Wrapper suite, there are still some components that were available as Wrapper components but are not implemented as Native ones.
As of the deprecation date of the Wrapper components, the components that were available as wrappers but are still not available as Native ones are:
If you are interested in some of the above components and would like to use them as a part of the Kendo UI for Vue Native suite, please visitour Feedback portal and:
Based on the users‘ interest in each feature request, we will consider their future implementation.
Under the hood, Kendo UI for Vue Wrapper components were using theKendo UI for jQuery components. In this context, those who prefer to continue to use the Wrappers functionality (which was a Kendo UI for jQuery functionality) can still use the Kendo UI for jQuery components in their Vue projects.
Below you will find details and examples about how one can add the Kendo UI for jQuery Diagram, Gantt, PivotGrid, Spreadsheet, and TreeMap components in a Vue.js project.
The following examples demonstrate in action what is described in thisMigrating Wrapper components to Kendo UI for jQuery article.
All examples below import the Kendo UI library and jQuery itself from NPM packages using the following definition in themain.js file:
importjqueryfrom'jquery';import{ createApp}from'vue';importAppfrom'./main.vue';window.$= jquery;window.jQuery= jquery;import'@progress/kendo-ui';import'@progress/kendo-theme-default';createApp(App).mount('#app');The same import can be done using CDN links:
<scriptsrc="https://code.jquery.com/jquery-3.7.0.min.js"></script><scriptsrc="https://kendo.cdn.telerik.com/2024.4.1112/js/kendo.all.min.js"></script>To run each example in Vue, in the Framework’s template section, we have a div element from which each component is initialized. All JavaScript definitions from the jQuery examples are inside the script tag of our Vue application.
To initialize a selected component, we need to call the $document.ready method (as it is in Kendo UI for jQuery) in the mounted function of the Vue application.
$(document).ready(...the logic that initializes a jQuery component...);The following demo uses theOverview demo of the Kendo UI for jQuery Diagram as a basis.
The demonstrated Gantt example is based on theBasic usage demo of the Kendo UI for jQuery Gantt, and uses the same configuration as described above.
Check the implementation of the Kendo UI for jQuery PivotGrid inside a Vue project:
Here is a runnable Vue example based on theKendo UI for jQuery Spreadsheet Overview demo:
The following example demonstrates the usage of the Kendo UI for jQuery TreeMap in a Vue project:
Q: Will the Barcode, QR code, Chat, Datasource, Diagram, MulticolumnCombobox, Gantt Map, MediaPlayer, PivotGrid, Spreadsheet, TreeMap, and Validator components be implemented as a part of the Kendo UI for Vue Native suite?
A: The Implementation of the components previously available as a Wrapper component or the introduction of new features in the Native suite depends on the community’s interest in each feature. To check the interest in a specific feature or submit a new feature request, please visitour Feedback portal.
Q: Can I use the Kendo UI for jQuery components in my Vue project?
A: Yes, you can. Please check the Using Kendo UI for jQuery components in your Vue.js project section above or check thisMigrating Wrapper components to Kendo UI for jQuery article