Skip to main content

Installation

To use VEF, four categories of dependencies are usually involved:

  1. React runtime
  2. VEF core packages
  3. Routing through @tanstack/react-router
  4. Build and lint tooling through @vef-framework-react/dev

Runtime Requirements​

The repository currently aligns with the following versions:

ItemRecommended
Node.js>= 22
pnpm10.x
React19.x
TypeScript5.9+ or newer

Minimal Installation​

For a typical admin-style application, the following packages are commonly installed:

pnpm add react react-dom @tanstack/react-router
pnpm add @vef-framework-react/core @vef-framework-react/components @vef-framework-react/hooks @vef-framework-react/shared @vef-framework-react/starter
pnpm add -D vite typescript @types/react @types/react-dom @vef-framework-react/dev eslint stylelint lint-staged husky @commitlint/cli

If the project also needs the approval flow editor:

pnpm add @vef-framework-react/approval-flow-editor

Which Packages Are Usually Needed​

ScenarioPackages
Only requests and query@vef-framework-react/core
Only components and form wrappers@vef-framework-react/components
Full admin-style application skeleton@vef-framework-react/starter + components + core + hooks + shared
Shared project tooling@vef-framework-react/dev
Approval flow designer integration@vef-framework-react/approval-flow-editor

In most applications, starter is used together with components, core, hooks, and shared.

Example package.json​

The following dependency set is close to what a real project would look like:

{
  "dependencies": {
    "@tanstack/react-router": "^1.168.3",
    "@vef-framework-react/components": "^2",
    "@vef-framework-react/core": "^2",
    "@vef-framework-react/hooks": "^2",
    "@vef-framework-react/shared": "^2",
    "@vef-framework-react/starter": "^2",
    "react": "^19.2.4",
    "react-dom": "^19.2.4"
  },
  "devDependencies": {
    "@vef-framework-react/dev": "^2",
    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
    "typescript": "^6.0.2",
    "vite": "^8.0.2"
  }
}

Required Vite Configuration​

VEF packages expose source or build outputs through custom export conditions, so resolve.conditions matters.

The following setup works well in application projects:

vite.config.ts
import { defineViteConfig } from "@vef-framework-react/dev";

export default defineViteConfig({
  react: {
    useCompiler: true
  }
});

Basic TypeScript Configuration​

If you use the tsconfig exported by @vef-framework-react/dev, it can be reused directly.
If you prefer to write your own config, these settings should at least be aligned:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "jsx": "react-jsx",
    "strict": true,
    "types": ["vite/client", "@vef-framework-react/dev/types"]
  }
}
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "typecheck": "tsc --noEmit"
  }
}

After installation, the next page to read is Quick Start.