Telerik blogs
Kendo UI Blogs R2 2021 Banner Image

The R2 2021 release of Kendo UI for Vue is here, bringing six new native UI components for Vue, including the Button, Floating Action Button and Upload components.

The R2 2021 release of Kendo UI for Vue is here and with it comes a big list of new native UI components for Vue. Let’s dive straight in to see what’s new in Kendo UI for Vue with R2 2021.

New Components

New Component: Button

Kendo UI for Vue Button Component offers a variety of buttons, including: Basic Button, which shows a rectangular gray button with black text reading 'Click me!'; Styled Buttons which show two buttons, one pink with light gray text reading 'Primary Button' and the other the inverse reading 'Red text button'; Buttons with icons showing three gray rectangular buttons, one with a Netherlands flag (red, white, blue horizontal stripes) and the word 'Sprite', one with a funnel icon and the word 'Icon', and a third with a simplified snowboarder image and the words 'Image Url'; and a Disabled Button, which is much like the standard button but its text (Disabled Button) is grayed out.

Every application needs a button at some point—it’s the main way we get users to perform an action in our Vue applications. With R2 2021, Kendo UI for Vue added a new native Button component, which can include just text, just icons or both. Of course, the look and feel of the Vue Button is completely customizable as well.

Click here to head on over to the new Kendo UI for Vue Button component demos.

New Component: ButtonGroup

Three side-by-side buttons and each has a corresponding symbol: Bold, Italic, Underline. The Bold button is pink with light gray text, suggesting it is selected. The other two are light gray with dark text.

Going a step further from the Vue Button, the new Kendo UI for Vue ButtonGroup component can help manage a set of buttons belonging to a single group. This can help you maintain items such as controlling currently toggled buttons or ensuring that only one button out of a group gets interacted with.

Here’s a direct link to the new native Kendo UI for Vue ButtonGroup component docs & demos.

New Components: Floating Action Button

Kendo UI for Vue Floating Action Button Component. A round pink button with the share icon is clicked. It brings up three people's names and images, and the button changes to an X.

Continuing the trend of adding button elements with R2 2021, Kendo UI for Vue also is introducing the Vue Floating Action Button. Found in desktop and mobile applications alike, the Vue Floating Action Button lets users execute a single action, usually something like compose a new email or add a new entry. There’s also the ability to instead create a “Speed Dial” which expands a list of action items whenever the main Floating Action Button element is interacted with.

To see how you can add this new component to your Vue apps today, check out the Kendo UI for Vue Floating Action Button demos.

New Component: Chip

Kendo UI for Vue Chip Component shows five chips, similar to buttons, that are rounded rectangles. Each has a map pin icon on the left and an X button on the right.  They are None in gray, Success in green, Info in blue, Error in red, and Warning in yellow.

The new Vue Chip component is a great UI component to round out the native Vue UI element list. Chips are very flexible and can be styled to fit any application’s design requirements and can include a mix of text and even icons in their content.

Here’s a quick link to the new Kendo UI for Vue Chip component demos.

New Component: ChipList

Text 'Order meal' has options below it for pizza, sushi, burger. These are buttons/chips, each with an emoji for the food. Sushi has been selected and is pink with white text, whereas the other two are gray boxes with dark text. 'Add more' has options for wasabi, ginger, and soy sauce. These are rounded light gray rectangles with dark text. Soy sauce has been selected, shown with a check mark icon and the box is darker gray.

Going hand-in-hand with the new Vue Chip component, the Kendo UI for Vue ChipList can help manage a collection of chips whenever there is need for more than a single chip. This can help manage aspects like the current selection of chips or manipulating the list of chips by adding and removing items.

For more information, you can refer to the Kendo UI for Vue ChipList demos.

New Component: Upload

A bar has a button on the left that says 'Select files...' and on the rught text reads, 'Drop files here to upload'.

The last new Vue UI component for R2 2021 is the Kendo UI for Vue Upload component. This is one of the most popular UI components across the various Kendo UI libraries, so it’s very exciting to be able to chat about the component in Kendo UI for Vue! The Upload component can be added into any existing Vue application and lets users upload files through an intuitive user experience.

Head on over to the Kendo UI for Vue Upload docs & demos to see the Upload in action!

Enhancements to Components

Grid: Infinite Scrolling

A grid with ID, Name, Discontinued, and UnitPrice is being scrolled through

Ensuring that Kendo UI for Vue has the most feature-rich Data Grid out there, with R2 2021 the Vue Data Grid added the infinite scrolling feature. With this feature enabled, the Vue data table loads additional data items whenever the user reaches the end of the current data set, giving the illusion that the content can be scrolled infinitely.

Check out the Scroll Modes section of our docs to see how you can add infinite scrolling to your Vue Data Grids.

Telerik and Kendo UI Community Forums Revamp

And last but not least, we revamped one of the favorite places that developers love hanging out—the Telerik and Kendo UI Community Forums. Check out the complete story of why and what in the dedicated blog post.

Telerik and Kendo UI Forums Hub

Got Feedback?

We’re always looking for the next set of native UI components to build from the ground up for Vue, and now is your chance to ensure that we add the components and features that you need. Head on over to the Kendo UI for Vue Feedback Portal to submit your ideas or vote for existing ones! With your feedback we can continue down the path toward our goal of delivering the most advanced set of UI components for Vue developers.

Webinar and Live Streams

Want to see everything I mentioned above live and in action? Well, do I have good news for you! On Thursday, May 20, at 11 am ET we are hosting the Kendo UI R2 2021 release webinar. This session will cover everything I mentioned here, plus information about jQuery, Angular and React.

On top of this, we will also have Twitch live streams diving in deeper to Kendo UI for Angular and KendoReact on Tuesday, May 18, from 9:00 – 10:30 am ET and Wednesday, May 19, from 1:30 – 3:00 pm ET.

Tons of fun will be had, so head on over to the Kendo UI R2 2021 webinar registration page to reserve your seat and join in on the festivities!

Reserve Your Webinar Seat

Carl Bergenhem
About the Author

Carl Bergenhem

Carl Bergenhem is the Product Manager for Kendo UI. Throughout his time at Telerik/Progress he has covered the entire portfolio of products offered, but mainly spent his time in the web development arena covering ASP.NET Ajax, ASP.NET MVC, and JavaScript-based products. He’s passionate about web technologies and tries to stay on top of all JavaScript libraries and frameworks relating to Kendo UI, developing with jQuery, Angular, React, and Vue.js on a regular basis. In his free time Carl enjoys slaying virtual monsters, snowboarding and playing his guitar.

Related Posts


Comments are disabled in preview mode.