Getting Started with Kendo UI and Vue: Video Tutorial

A powerful user interface is the difference maker between a merely functional app and one that delivers a great user experience. For this, you can count on Kendo UI.

In this engaging video series, you’ll get a hands-on demo of the Kendo UI components for Vue. There are five short quickstart videos in this course that show you how to create a basic Vue app, add components to the app and style the app to match your requirements. Presented by Tara Manicsic, one of our expert developer advocates, this series is both informative and enjoyable.

Kendo UI & Vue Video Tutorial

Let's begin!

1: What are the Kendo UI Vue components?

As they say, a good beginning makes for a good ending, so let’s start with the basics. In this video, we’ll dive into all the things that you get from Kendo UI that will help you build components that give you a uniform style, great user interactions and compliance with accessibility guidelines. Finally, we’ll cover the list of currently available components and resources that will guide you through implementing them in your Vue projects.

Useful links (in order of appearance):

Kendo UI Vue components page (where you can also download the free trial)

Styling – Kendo UI themes

Accessibility

Telerik Blogs

Kendo UI Whitepapers (on a variety of JavaScript and JavaScript framework topics)

Kendo UI Vue Forum

Kendo UI YouTube Channel

Kendo UI on Twitter

2: Creating Robust Vue Applications with Kendo UI

There’s no better way to learn than diving straight into the deep end! In this getting started video, we’ll spin up a Vue project using the Vue CLI—a Progressive Web App that lets users vote on a topic, displaying a visualization of the results in real time. After creating the Vue project, we’ll install the components we need to build up a robust application: Buttons and Chart, plus the Material theme library.

3: Adding the Kendo UI Buttons and Styling with the Theme Library

Now that we built our Vue application and installed all the necessary Kendo UI building blocks, let’s start building our application. In this video, we’ll add a few Kendo UI buttons to cover our different needs. First, we use the Kendo UI font icons to signify that users can press the button to hear a pronunciation. Next, we’ll add a button to submit the user’s vote input, which adds their vote to the tally. We’ll also install and use Kendo UI styling through the default theme library.

4: Data Visualizations with Kendo UI & Vue: Working with Chart Components

In this quickstart video, we take the data we’ve gathered from users and visualize it via a Kendo UI doughnut chart. We will import the Kendo UI chart component into our Vue application and add it to our template. Then, taking advantage of the chart component’s customization options, we can easily get the information our users are looking for. This video will also cover how to bind the user input data to the chart and how we keep the data updated with Vue’s computed properties.

5: Code Better Vue Apps with Kendo UI Components – Next Steps

Well now, would you look at that? We have a Progressive Web App made with Vue and Kendo UI! Thanks to Kendo UI, we were able to quickly spin up an interactive and accessible application that looks great. In this video, we’ll explore the other components we can add to make the application even better, including QRCode, DateInputs, Grid and Scheduler. We’ll also look into all the tools available to help us along our coding journey, including documentation, demos, blog posts, videos and more.

About the presenter:

Tara Manicsic
Progress Developer Relations

Tara is a life-long student, teacher and maker. She has spent the majority of her career using JavaScript on both the backend and frontend to create applications. In her free time, she works in her community to educate and learn from other developers. Tara launched the Cincinnati Chapter of Women Who Code and Co-Chairs the Cincinnati branch of NodeSchool. Beyond code, she likes to make things with other materials (wool, solder, clay, etc.) and hike any mountain she can get to.

Kendo UI & Vue Video Tutorial

What’s Next?

Now that you’ve learned a bit about using the Kendo UI Vue components in a real application, give it a try yourself! Download your free 30-day Kendo UI trial that includes the code, documentation and even support during your trial period. See how easy it is to meet your deadline while improving your app’s user experience with the power of Kendo UI components.

Get a Free 30-day Trial