Personal Portfolio Sample Application
The Personal Portfolio sample app showcases Kendo UI for Vue UI components, including a Data Grid, Drawer, Inputs, Gauge, Dropdowns, Icons, Chart, ExpansionPanel, Form, Buttons, Card, and CSS utility classes from the Progress Design System.
How to Run the Demo
You can find the Vite application's source code on GitHub.
To play with the demo and see how it’s built, you may want to run it locally:
- Clone or download the source code from GitHub.
- Install the required dependencies via
npm install. - Make sure you have activated your license.
- Use
npm run build(for production usage) ornpm run devcommand to start a dev server. - Follow the console instructions to view the Personal Finance app.
About the App
This application was built following best practices for using Kendo UI for Vue components, maintaining a clean structure that makes it an excellent learning resource. You can explore how to set up complex components such as the Data Grid (Table), Charts, Inputs, Dropdowns, and Forms.
Styling Kendo UI for Vue Components with Ease
To make styling as easy as possible, you can use the Kendo UI for Vue Themes that come out-of-the-box with this Vue UI components library. In this demo, we use the Kendo UI for Vue Default Theme to make our components stand out and look great.
For more information on how to add one of the themes to your project, refer to the article on using the Kendo UI for Vue themes in Vue projects.
Easier Collaboration with Your Designers
To enable a smooth and trouble-free collaboration between designers and developers, the Progress Design kit offers several UI Kits for Figma. These kits supply your designers with assets that match the Kendo UI for Vue UI components at your disposal. Matching building blocks on both sides - design and development - guarantee the smooth implementation of the design.