ERPNova UI
Vue 3 Frappe UI Kit
Overview
Vue 3 component library for building Frappe/ERPNext interfaces with modern reactive UI patterns.
The Problem
Building custom UIs on Frappe/ERPNext typically requires working with server-rendered templates and jQuery. Developers wanting modern reactive patterns had no component library to start from.
Architecture & Approach
Created a Vue 3 component library with Frappe-specific components (DataTable, FormBuilder, DocTypeGrid, etc.) that communicate with Frappe's REST API. Built with TypeScript for type safety and Tailwind CSS for styling. Published as an NPM package.
Technology Stack
Key Features
DataTable
Sortable, filterable, paginated tables with server-side processing support.
FormBuilder
Dynamic form generation from Frappe DocType meta with validation.
DocTypeGrid
Kanban/List/Grid views for any DocType with real-time updates.
Desk Integration
Seamless embedding in Frappe Desk via custom pages and workspace shortcuts.
TypeScript Types
Auto-generated types from Frappe DocType definitions for end-to-end type safety.
Theming
Tailwind-based theming with ERPNext color palette presets.
Lessons Learned
Frappe's meta API is powerful but requires careful caching for performance.
Server-side rendering with Nuxt 3 improves initial load for public-facing pages.
Community adoption depends on documentation quality — invest in examples early.
Version alignment with Frappe/ERPNext releases is an ongoing maintenance burden.