Let’s build a climate view UI component in Vue.js using Kendo UI, completing the interface with chart components.
First, a little bit of background.
Kendo UI is a comprehensive web user interface framework with a collection of JavaScript UI components with libraries for jQuery and even more modern ones like Vue, React and Angular. Kendo UI developers build interactive and responsive high-performance apps using a large library of UI widgets and data visualization components.
Using Kendo UI you can easily add really advanced UI components into your frontend project in the library of your choice. You get to save time from worrying about key functionalities of the interface and focus on proprietary features instead. Kendo UI ships with support for each of your favorite frontend web frameworks like Vue.js with an easy-to-use integration.
Also besides basic UI components, Kendo UI provides you with advanced data visualization UI elements that ensure you do not have to add additional libraries to your project to handle charts and graphs. These advanced UI elements are also very customizable too.
You will be building a climate view UI component in Vue.js using Kendo UI. We will start by scaffolding it with the Kendo UI starter extension in VS Code and then use Vue Router to create routes and finally use some Kendo UI chart components to build the interface.
I’m assuming you already have Vue installed; if not go to the installation guide. Now, let’s open up your VS Code. The first thing we are going to do is to install the Kendo UI template wizard extension. You can do that by going to the extensions tab of VS Code and searching for “Kendo UI Template.” Go ahead and download it, and after restarting VS Code you can now use it to scaffold new projects.
Kendo UI Template Wizard: Launch
and press Enter
to launch the extensionYou can start by choosing a project name and a folder where it will be located. When you click Next you are prompted to choose the frontend library you would like to use. Kendo UI has component elements for Vue, Angular and React.
The next stage is to choose the pages you want on your new project. For this project you can choose one chart with routing. Once you make a choice, the template wizard will run the Vue create command in the background and scaffold a Vue application for you.
Now that you are done with scaffolding the application, you have to ensure all dependencies are properly installed by running these commands:
Navigate to the root directory of the new app and in the main.js file ensure it looks exactly like this:
You can see that routing has been introduced to the project. In the case that you did not use the Kendo UI template wizard or you chose a blank project, you can add routing easily with the command below in the terminal of the project:
In the app.vue
file, replace the content with the code block below:
The router that was imported has now been brought in here. If you open the router folder, you will see the router script (index.js) where the routes have been registered. Make sure that yours looks like this:
Now when you look at the app.vue
file, you will see where these defined routes are brought in. To define these individual routes, navigate to the components folder. You will see a lot of components. Delete all the components leaving just the home component.
Your home component home.vue
should look like this code block below:
You might encounter errors which might be asking for the routes you defined in the route script. To create those, create a chart1.vue
file inside the components folder and inside it copy the code block below:
Here we use the Kendo UI chart component that comes with a special animation as it opens up to define continents according to their population. Kendo UI integrates beautifully with Vue, and you can add a lot of options in the Vue return function of a particular component.
For the second route, create a Chart2.vue
file inside the components folder and copy the code block below inside it:
This second route makes use of the Kendo UI Sparkline component to portray climate conditions. Tying everything together, you can now run the app in the dev server with the command:
And you will have a fully functioning UI component with routing and all the pre-defined charts.
This post is an introduction to Kendo UI for Vue.js and how you can easily start a Vue project using the Kendo UI template wizard. It also shows how easy it is to implement Vue routing and to bring in Kendo UI components into your Vue projects. Happy hacking!
Nwose Lotanna Victor is a web technology enthusiast who documents his learning process with technical articles and tutorials. He is a freelance frontend web developer based in Lagos, Nigeria. Passionate about inclusion, community-building and movies in Africa, he enjoys learning new things and traveling.