New to Kendo UI for Vue? Start a free 30-day trial

Coffee Warehouse 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 current application uses the Native Data Grid, Charts, Scheduler, Drawer, From and other Native components to show how we can build a complex Dashboard application.

About the App

The Coffee Warehouse Dashboard application is created following the best practices of building a Vue Application. The application has four main sections:

  • Team - Demonstrates the usage of the Native Grid component with its ability to export data to Excel and PDF.
  • Dashboard - Shows the Native Chart components in action.
  • Profile - Showcases the usage of the Native Form component in a combination with the Native Input, MaskedTexBox, DropDownList, Editor, Switch and RadioGroup components.
  • Info - Lists the different Kendo UI for Vue Native components used to implement the final application.

The source code of the Coffee Warehouse application can be found in our public GitHub repository.

The Coffee Warehouse 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 Coffee Warehouse Dashboard application locally, by following the below steps:

  1. Clone or download the kendo-vue GitHub repository.
  2. In the folder that contains the kendo-vue repository, navigate to the examples-standalone/coffee-warehouse folder.
  3. Run npm install to install all dependencies needed by the component.
  4. Use npm run serve command to start the application.
  5. 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. 

Use the Theme Change DropDownList in the upper right corner of the application's header to switch between the main Kendo UI Themes.

Application for a Global Audience 

The Globalization is the process that combines the translation of components' messages (localization) with their adaptation to specific cultures (internationalization). The current project shows how easy it is to apply globalization to the Kendo UI for Vue Native components. Next to the Theme Change DropDownList, you will find the Language DropDownList that can dynamically update the applications' messages and culture specifics.