Kendo Vue UI

Build Better Vue Apps
Faster

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

NEW

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

Grid Scheduler Charts Editor Full List of Controls 
new Vue({
  el: "#vueapp",
  template: `<kendo-grid :data-source="localDataSource">
      <kendo-grid-column :field="'ContactName'"
                         :template="contactNameTemplate"
                         :title="'Contact Name'"
                         :width="240"></kendo-grid-column>
      <kendo-grid-column :field="'ContactTitle'"
                         :title="'Contact Title'"
                         :width="120"></kendo-grid-column>
      <kendo-grid-column :field="'CompanyName'"
                         :title="'Company Name'"
                         :width="120"></kendo-grid-column>
      <kendo-grid-column :field="'Country'" :width="120"></kendo-grid-column>
  </kendo-grid>`,
  data: {
    contactNameTemplate: `<div class='customer-photo'
                           style='background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/#:CustomerID#.jpg");'></div>
                           <div class='customer-name'>#: ContactName #</div>`,
    localDataSource: localData,
  },
});

new Vue({
 el: '#vueapp',
 template: ` <kendo-scheduler :data-source="localDataSource"
                     :date="date"
                     :height="600"
                     :timezone="'Etc/UTC'">
      <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>
    </kendo-scheduler>`,
 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 %/'"
                :legend-position="'bottom'"
                :legend-position="'horizontal'"
                :series-defaults-type="'area'"
                :series="series"
                :category-axis-categories="categories">
        </kendo-chart>`,
  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"
                 :resizable-toolbar="true"
                 :value="htmlText"
                 style="height:280px"
                 rows="10"
                 cols="30">
    </kendo-editor>`,
 data() {
  return {
   htmlText: "<p>Some sample text.</p>"
  }
 }
})
DemoGrid
Scheduler
Charts
Editor
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 &
ThemeBuilder

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.

trust-radius-badge

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.

trust-radius-badge

Kendo UI Earned TrustRadius' Top Rated 2021 award

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

All Vue Components

Working with Designers? We Got You Covered!

It's easy to collaborate with your designers using Kendo UI for Vue and the Kendo UI kits for Figma. The highly-customizable, identical components on both sides set you off to a running start to craft your own design system.

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.

Aspire-Financial-Banks
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
vue-blog-post
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 Developers Say

Great JavaScript components for fast and high quality web app development. Kendo UI is very easy to use and very fast to get results from.

GoranBajer
Goran Bajer Software Developer, Info Novitas Ltd.

After being in the industry for over 20 years I have seen a lot of frameworks come and go, but Kendo UI is by far the best for hybrid/mobile/native apps. Not only for its ease of use but it plays well with others.

GeovanniHudson
Geovanni Hudson Sr. Web/UI Application Engineer, PCYC

As a developer working for the DOD we were able to rapidly integrate Kendo UI into a pre-existing C# application providing functionality to the client they were not even aware they wanted. This cut down majorly on cost saving roughly 1+ million. I would recommend Kendo UI to anyone who wants to impress their client with amazing UI.
Thanks Telerik Team!

GeraldHirsch
Gerald Hirsch Front End Developer, U.S. Government
logos

Get Started

kendoka