Documentation for enterprise and admin-focused React applications

VEF Framework React

The documentation focuses on how to build applications with the exported APIs from `@vef-framework/*`, including routing, requests, forms, CRUD pages, and approval-flow integration.

Read the Overview Open Quick Start

App LayerStarter@vef-framework/starter

bootstrap · routing · layouts · CRUD

UI LayerComponents@vef-framework/components

forms · options · charts · icons

Data LayerCore@vef-framework/core

requests · query · stores · atoms

ToolingDev@vef-framework/dev

Vite · ESLint · Stylelint · Commitlint

App Entry

import { createApp } from "@vef-framework/starter";
import { apiClient } from "./api";
import router from "./router";

createApp().render({
  apiClient,
  router,
  appContext: {
    dataDictQueryFn: findDataDictItems,
    fileBaseUrl: FILE_BASE_URL
  }
});

The entry point focuses on one thing: wiring apiClient, router, and appContext into createApp.
Data dictionaries, file URLs, and permission checks enter the page system through appContext.
Routing, theme, query, and notifications are mounted by the starter layer.

Main Flow

Establish the shell first, then build the product on top

The most effective way to understand VEF is to follow the same shape as a real application: bootstrap the shell, assemble the runtime, and then build pages on top.

Establish the Foundation

Set up the project tooling once through defineViteConfig, ESLint, and Stylelint.

Assemble the Main Runtime

Create the apiClient, router, and application entry so auth, permissions, query, and routing work together.

Build Pages on Top

Use Page for regular screens, ProTable for data-heavy pages, and CrudPage with createCrudKit for CRUD workflows.

Core Surfaces

These API surfaces matter first

These capabilities cover the most common application tasks and represent the most central, most stable parts of the framework.

STARTER

Application Entry and Layout

createApp, createRouter, login routes, access-denied routes, Page, ProTable, and CrudPage all live in the main application shell.

CORE

Requests, Cache, and State

ApiClient, useQuery, useMutation, createStore, createComponentStore, and atom form the page-level data layer.

COMPONENTS

Components, Forms, and Theme

The component system is already integrated with theming, notifications, form fields, permissions, and option transformation.

CRUD

Reusable CRUD Pages

A unified API for search areas, tables, form scenes, delete flows, and batch actions.

HOOKS

Page-Level Helper Hooks

Data dictionaries, option transformation, permission checks, loading-state checks, and common interaction hooks are all exported in one place.

FLOW

Approval Flow Editor

Can be embedded independently and extended through plugins for users, roles, departments, and form fields.

Suggested Entry Points

A practical reading path into the framework

These four pages are a good starting path for understanding the structure of the framework and moving quickly into implementation work.