What’s New in the Kendo UI Vue Components with R1 2020

The R1 2020 release of the Kendo UI Vue.js components is here, bringing new native UI components for Vue.js, including the Input, NumericTextbox, DropDownList, Dialog, and more!

Over the last couple of months, the Kendo UI team has been busy working on a new set of native Vue.js components. Previously the only native Vue component we offered was the Kendo UI Vue Grid, but with R1 2020 we have six new components that are built natively for Vue! Let’s jump in to things and see what is new in Kendo UI for Vue developers.

New Native Vue Components

A quick note to make on the Vue components we were able to add: this release had a big focus on form elements, and UI components that can be used inside of the native Vue Data Grid. Of course, this also has the benefit for Vue developers that they now have more form elements to select from!

New Component: Input

What is an application without some sort of way for users to input text? This is one of the first components that we tackle in any native UI library, and Vue is no exception. The Kendo UI Vue Input component is of course fully integrated with all the Kendo UI themes, which helps with creating a uniform look-and-feel across your entire application.

New Component: NumericTextBox

Continuing an emphasis on inputs, the Kendo UI Vue NumericTextBox is perfect for any scenario that requires numbers of some kind (simple number, currency, percentage, etc.). As with any Vue component that we create, the NumericTextBox works with all our available themes and is compliant with WCAG 2.1 and WAI-ARIA accessibility standards.

New Component: DropDownList

The Kendo UI for Vue DropDownList is a form component that lets users choose a single value from a predefined list of values. Think of it as a select element with enhancements such as data binding, filtering, and more!

New Component: Dialog

The Kendo UI Vue Dialog component is very useful in scenarios where you need to showcase some specific information to users and prompt them to take an action. This is usually portrayed in a modal fashion to reduce distraction. Of course, as a developer you have full control over the content of the title, dialog box, as well as the action buttons (and their events) to ensure that the component can easily integrate to your existing applications.

New Component: Animation

Animations can often be a tricky thing to implement. The Kendo UI team needs animations throughout all components to make sure that they properly “pop” and have the great look-and-feel that comes with all Kendo UI components. Since this is a part of Kendo UI that is used across the entire library we wanted to take this work and expose it to all Kendo UI users as well, allowing you to create your own animations and not just when working with the Kendo UI components. The Kendo UI Vue Animation package can be used to help animate just about anything in your apps.

New Component: Popup

The Kendo UI Vue Popup component is the basis of a lot of Kendo UI components, including the DropDownList and other DropDown components. Not only does this help with having content appear on the page upon interaction (clicking a button for example) it also needs to be able to be configured to display and align in certain ways, work with boundary detection (if the popup appears outside of the current view port), and even animate. As we needed to build this out to start creating more native Vue UI components we figured it would be great to expose this functionality to our users as well!

Got Feedback?

R1 2020 is laying the foundation of a great rest of 2020 for native Vue.js components from Kendo UI! Are you actively working with, or looking to adopt, Vue.js? Any specific features or components that you need from a UI library like Kendo UI? Head on over to our Kendo UI for Vue feedback portal to add your feedback or vote/comment on existing items! Everything we added in R1 2020 came from feedback from our users and utilizing this portal is the best way to ensure we add the component or feature that you need in one of our upcoming releases!

Join Us For a Live Webinar!

Want to check out the components I mentioned above live and in action? Join myself and my colleagues on the Kendo UI for Vue team during our live webinar on Thursday, January 23rd at 11:00 AM ET! We’ll be covering all the various Kendo UI flavors throughout the day, but the Vue-specific section will kick things off at 12:30 PM! Seats are limited, so head on over to the webinar page to sign up today and reserve your seat!