Kendo UI for Vue
Previously available as a wrapper, the Vue Charts component has been rebuilt natively from the ground up for Vue. The Charts component delivers every chart type you will need, from ordinary line and bar charts to complex stock charts and everything in between. Like the rest of the components in Kendo UI, each chart is built with performance, theming, customizability and accessibility in mind.
Also previously available as a wrapper, the Vue Sparkline component has been rebuilt natively for Vue. These tiny charts are perfect for dashboards and grid views and can be rendered as line, bar, column, area, pie and bullet types.
The new Vue Drawing Library is the basis for all Vie data visualizations. It contains a low-level API for building and manipulating visual scenes that can be rendered as SVG or canvas elements, PNG images, as well as PDF documents.
The Vue PDF Export library enables you to export an entire HTML page or part of it as a PDF file. There are several features available to customize the exported file, including scale the content to better fit on the page, customize the paper size, change the page orientation, work with templates and more.
See the Vue Export to PDF demo
The Vue Data Query package assists with handling common in-memory data operations like grouping, filtering, paging and sorting data. It also serializes the data descriptors according to the OData v4 URI specification..
The Vue Date Math package has the sole purpose of assisting with JavaScript Date manipulations. The Date Math library offers many functions that support various date manipulation tasks like getting a week number and adding or removing days from a particular date.
Vue File Saver uses a saveAs method to allow users to save files to their local machine. The Vue File Saver component is integrated into the Kendo UI for Vue library as a standalone package and consumed using TypeScript or JavaScript.
Previously available as a wrapper, the TabStrip is now built natively in Vue. It displays a collection of tabs, each with their own associated content. It is a great way to organize, fit and navigate content in a single frame as it allows users to switch between the different tabs inside the component.
See the Vue TabStrip Overview demo
Previously available as a wrapper, this component the Pager now built natively in Vue. It splits content into pages to prevent long loading times and to show manageable segment of content. You can set the page size, maximum number of buttons, show the user where they are, and more.
See the Vue Pager Overview demo
The Vue Form component allows you to generate and manage forms. Through a variety of configuration options, it makes creating and customizing forms a seamless experience. Achieve the desired form appearance by using default or custom editors, choose the layout and orientation, display the editors in groups and columns and configure validation.
See the Vue Form Overview demo
The Vue Hint component integrates with the Kendo UI for Vue Form to help you build forms in Vue in accordance with best practices. The hint is displayed underneath an input element and provides the user with an example of the value they should enter into the field.
See the Vue Hint Overview demo
The Vue Error component displays additional text under Vue components to help deliver error messages. They are often used to indicate required fields when validating form submissions.
The Vue Avatar component is a quick and impactful way to represent people and other entities with image, icons or initials.
See the Vue Avatar Overview demo
The Vue Card component represents a common layout item used in most modern apps. This layout tool contains content and actions about a single subject. While it can work well on its own, it is typically combined with components to display a collection of cards. Each Card comes with content, title and subtitle and action button areas, images and footers.
See the Vue Card Overview demo
The Vue Label component enables you to associate labels with other Vue components or HTML elements. Beyond the standard HTML label, the Vue label supports richer features such as configuring optional text as part of the label text.
See the Vue Label Overview demo
The Vue Checkbox moves beyond the traditional HTML input element and provides styling that fits with all Kendo UI for Vue themes, allowing users to maintain a consistent look and feel throughout their entire application. The Checkbox supports a variety of states that can be easily set to match your requirements.
See the Vue Checkbox Overview demo
The Vue RadioButton component goes beyond traditional HTML radio button inputs by automatically applying the theme you are using to the rest of your application.
See the Vue RadioButton Overview demo
The Vue RadioGroup serves as a container for two or more radio buttons. This helps you manage the current values available for users, input validation, and how to display the group of RadioButtons on the page.
See the Vue RadioGroup Overview demo
Floating labels were first popularized by Material Design and are now an important part of many modern designs. Floating labels start as a placeholder in an input element and, upon focusing the input, the label floats to the top of the input element. The Vue FloatingLabel component allows developers to add a floating label to an HTML input, their own input components or other Kendo UI for Vue components.
See the Vue FloatingLabel Overview demo
The Kendo UI Kits for Figma are design files that make the collaboration between application developers and designers easier. Each UI kit is a precise visual representation of the Kendo UI for Vue components. You can choose between three Kendo UI Kits for Figma, one for each of the themes that come with the Kendo UI for Vue component library: Default, Bootstrap and Material. The purpose of the Kendo UI Kits is to enable the seamless handover of the interface design to the developers.
Every demo now includes a drop-down menu that allows you to choose to apply the Material, Bootstrap or Kendo Default themes and one of their built-in color swatches. This enables you to easily preview what these selections will look like for each component.
See the Vue Data Grid demo for an example
Keyboard navigation is important for enhancing the UX and accessibility of a web application. The Vue Data Grid now allows developers to configure keyboard or keyboard and mouse combinations to perform navigation, selection, data operations, editing and more.
As part of our commitment to supporting industry standards as they are updated, Kendo UI for Vue supports Bootstrap 5 the latest version of Bootstrap.
We recognize that good documentation is key to your success with Kendo UI for Vue. As a result, we have added new documentation for some of the most commonly requested (and newly available) tasks. These include various Grid articles and advanced topics such as export to PDF, date math, data query, globalization and many more.