Skip to main content

vef framework · react

Composable React, layer by layer.

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

App LayerStarter@vef-framework-react/starter

bootstrap · routing · layouts · CRUD

UI LayerComponents@vef-framework-react/components

forms · options · charts · icons

Data LayerCore@vef-framework-react/core

requests · query · stores · atoms

ToolingDev@vef-framework-react/dev

Vite · ESLint · Stylelint · Commitlint

main.tsxTS
  • 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.

  1. 01

    Establish the Foundation

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

  2. 02

    Assemble the Main Runtime

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

  3. 03

    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.