GitHub Dashboard Application
The Kendo UI for Vue Native suite provides a number of components that can be combined in a way that fits the requirements of your application. The final result can be both a beautiful and powerful solution.
About the App
The GitHub Dashboard application is created following the best practices of building a Vue Application using Vite.js and providing a clean project structure. The application binds the Kendo UI Native Grid and Native Charts to a Github API. The result is a useful dashboard that provides detailed information about the issues in the kendo-ui-core repository.
The Dashboard application consists of the following pages:
- The Dashboard page of the application demonstrates the
Native Chartsin action. You can see different types of Charts, with simple and more complex configurations. - The Issues page shows a
Native Gridimplementation with a detail row, custom templates, data paging and filtering. This page also demonstrates how we can nest other Native components inside the Grid. - In the My Profile page you can see the usage of the Card, Switch, Dialog, Button components.
Last but not least, the current example demonstrates how to style the different Kendo UI for Vue Native components, using the Kendo Themes. More information about the usage of the Kendo Themes, you can find in the Styling the Components section below.
The source code of the Dashboard application can be found in our public GitHub repository.
The Dashboard App in Action
To test the above example in a separate window you can follow this link.
How to Run the Demo Locally
To to see the demo implementation and how the different Native components are configured to interact with each other, you can run the GitHub Dashboard application locally, by following the below steps:
- Clone or download the kendo-vue GitHub repository.
- In the folder that contains the
kendo-vuerepository, navigate to theexamples-standalone/dashboardfolder. - Run
npm installto install all dependencies needed by the component. - Use
npm run devcommand to start the application. - Open the link that appears in the console to open the project in a browser.
Styling the Kendo UI for Vue Native components
The Kendo UI for Vue Native components come with customizable Kendo Themes that can style your application in different ways. The Kendo Themes are shipped as a part of the Kendo UI for Vue library. Details about the usage of the different themes, you can find in our Styling documentation article.
The GitHub Dashboard application shows how we can dynamically switch between the different Kendo Themes. The following line in the template of the App.vue file controls the Kendo Theme that will be applied to each component in the application.
<link rel="stylesheet" :href="themeLink" />