vue-bg

Build Better Vue Apps Faster

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

Download Free Trial

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

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

More demos Learn more

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.

Download Free Trial

Kendo-UI-VueAll Vue Components

part-of-devcraft

Need .NET with your JavaScript?

Flexible Options Matched to Your Development Needs

Our DevCraft package gives you the complete Telerik .NET and Kendo UI JavaScript component libraries in one convenient bundle. Want more? You also get our Reporting and Productivity tools included in DevCraft as well for an outstanding value. Easily build modern, high-performance apps on any web, desktop or mobile platform—fast.

Get started fast by taking advantage of thousands of demos (with source code) as well as comprehensive documentation and a full assortment of VS templates.

Learn more about DevCraft

Support and Learning Kendo-UI-Vue

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.

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, U.S. Government

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

Download Free Trial