Kendo Vue UI

Build Better Vue Apps

Kendo UI for Vue: The Complete UI Component Library for
Responsive Web Apps


*Includes access to online technical training to speed-up your onboarding.

new Vue({
  el: "#vueapp",
  template: `<kendo-grid :data-source="localDataSource">
      <kendo-grid-column :field="'ContactName'"
                         :title="'Contact Name'"
      <kendo-grid-column :field="'ContactTitle'"
                         :title="'Contact Title'"
      <kendo-grid-column :field="'CompanyName'"
                         :title="'Company Name'"
      <kendo-grid-column :field="'Country'" :width="120"></kendo-grid-column>
  data: {
    contactNameTemplate: `<div class='customer-photo'
                           style='background-image: url("");'></div>
                           <div class='customer-name'>#: ContactName #</div>`,
    localDataSource: localData,
new Vue({
 el: '#vueapp',
 template: ` <kendo-scheduler :data-source="localDataSource"
      <kendo-scheduler-view :type="'day'"></kendo-scheduler-view>
      <kendo-scheduler-view :type="'week'"></kendo-scheduler-view>
      <kendo-scheduler-view :type="'month'"></kendo-scheduler-view>
      <kendo-scheduler-view :type="'agenda'"></kendo-scheduler-view>
 data: {
  date: new Date('2018/6/6'),
  localDataSource: [{
    id: 1,
    start: new Date("2018/6/6 08:00 AM"),
    end: new Date("2018/6/6 09:00 AM"),
    title: "Interview"
    id: 2,
    start: new Date("2018/6/6 08:00 AM"),
    end: new Date("2018/6/6 09:00 AM"),
    title: "Meeting"
 new Vue({
  el: '#vueapp',
  template: `<kendo-chart
                :title-text="'Gross domestic product growth /GDP annual %/'"
  data: {
   date: new Date('2018/6/6'),
   series: [{
    name: "India",
    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
   }, {
    name: "Russian Federation",
    data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
   }, {
    name: "Germany",
    data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
   }, {
    name: "World",
    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
   categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011]
new Vue({
 el: '#vueapp',
 template: ` <kendo-editor :resizable-content="true"
 data() {
  return {
   htmlText: "<p>Some sample text.</p>"
More Demos

Architect your next app with Vue components designed to deliver high-performance and rich user experiences

Key Features

Easy to Use UI Components

The Vue components from Kendo UI provide a rich set of features and customizable functionality. The library provides components ranging from complex data grids, charts, and schedulers to basic buttons and inputs – all integrated seamlessly with the Vue.js framework.

Awesome Integration with
the Vue Ecosystem

Vue is often called a progressive framework and with reason – there are a ton of additional libraries you can work with to make your Vue applications even more powerful. We made sure that the Kendo UI Vue components integrate with the Vue ecosystem including libraries like Vuex.

Flexible Themes &

The look and feel of your application has never been more important, and Kendo UI is here to help ensure your apps look better great! Whether you use our stock themes or customize them to fit in to your own designs – you will be well taken care of! Our themes are written with Sass so customization is easy. Want a more interactive way to modify themes? Just use our online ThemeBuilder tool to easily modify any theme and see the results live.

Localization & Accessibility

Ensuring that your applications can be access by anyone across the globe is a major challenge for modern web applications. Fortunately our Vue UI components are fully accessible out of the box. We support standards like WAI-ARIA, Section 508, and WCAG 2.1 with no loss of functionality or extra configuration work. On top of the accessibility you can also rest assured that any of our UI components can be localized to the language preference of your users.


Telerik and Kendo UI Earns Multiple TrustRadius Best of Development 2021 awards

Kendo UI has won Best Feature Set , Best Customer Support and Best Usability.


Kendo UI Earned TrustRadius' Top Rated 2021 award

Progress Kendo UI has earned TrustRadius’ Top Rated Award for Software Components.

All Vue Components

Upgrade to Telerik DevCraft Complete

Be Ready for Any Project & Technology

Save up to 50% in development time by getting 1,250+ .NET and JavaScript UI components for building web, desktop and mobile apps.

Get the Best Value for Money

Enjoy Kendo UI (for Angular, React, jQuery, Vue) along with 12 products for .NET apps development, embedded reporting and mocking tools while saving up to 90% from the upgrade price.

Support and Learning

Industry leading support services backed by comprehensive documentation and learning resources.

success story
“Learn how Aspire used Progress® Sitefinity™ and Kendo UI® by Progress to help deliver rich, timely customer information, reaping rewards including a 253% increase in web and mobile traffic in three short months.”
Shelia Reed
Chief Marketing Officer, Aspire Financial Solutions
Watch video
Blog Post

Hello Vue: A Quick Tutorial on Getting Started with Vue

A quick tutorial on getting started with Vue, including the use of a component from Kendo UI for Vue. Designed to be a great starting point with an example that, like Vue itself, is scalable.

What our customers are saying on TrustRadius

Read all reviews

Get Started