vue-bg

Build Better Vue Apps Faster

The Complete UI Component Library for Responsive Web Apps

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>"
        }
    }
  })
 
 
 
 

Architect your next app with true Vue components, built from the ground up, designed to provide high-performance and rich UI

More demos Learn more Download free trial

Key Features

Take advantage of the extensive list of UI components available for Vue developers. The full breadth of Kendo UI now offered for Vue apps.

  • Your Development Shortcut

    The Kendo UI component library was built to help you cut development time and cost. It provides an advanced UI library, ranging from complex Data Grid components to basic Button components. All of these components integrate seamlessly with the Vue framework so you can focus on all your core functionality.

  • Easy Integration

    Kendo UI comes with 17 standard themes including popular Bootstrap, Material, Office365 and more themes. We also give you a custom theme editor, so you can quickly match any existing look and feel. Easy integration with your technology, easy integration with your brand standards. Fast and painless.

  • Better User Experiences

    The UI provides more than just part of your features and functionality; it provides the “face” of the app. Kendo UI lets you develop apps that both look and act professionally. And full support for accessibility standards means easy compliance with government requirements.

  • Flexible Product Support

    Whether you need live phone support or just need the ability to submit questions or file a feature request, we’ve got a support option to cover your specific needs. Pick from one of our support options and pay for only the support you need, backed by our team of developers and application experts.

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

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

Get Started