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.
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.
Kendo UI Vue components page (where you can also download the free trial)
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.
GitHub repo for the sample project (used in this and the following videos)
Google’s Progressive Web Apps resource
Mozilla’s documentation on using service workers
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.
GitHub repo for the sample project
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.
GitHub repo for the sample project
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:
Progress Developer Relations
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