Frontend Technical Stack

🛠️ Technical Stack

The IONFLOW Frontend is built on a modern Vue 3 ecosystem, prioritizing performance, type safety, and developer experience.

Core Framework

Vue 3

Using the Composition API and <script setup> for better logic reuse and type inference.

• Version: 3.x
• Pattern: Composition API

TypeScript

Strict type checking enabled to ensure robustness and catch errors at compile time.

• Version: 5.x
• Config: Strict Mode

Vite

Next-generation build tool for incredibly fast development server start and hot module replacement (HMR).

UI & Styling

PrimeVue 4

We use PrimeVue in Unstyled Mode (Passthrough). This allows us to use all the complex functionality of enterprise components (DataTables, Trees, Pickers) but completely control the styling via Tailwind.

Tailwind CSS 4

Utility-first CSS framework for rapid UI development.

• Theme: Custom preset for IONFLOW branding.
• Dark Mode: Fully supported via logical properties.

State Management & Data

Pinia

The standard store library for Vue. Used for:

• User Session (Auth)
• Global UI State (Sidebar, toasts)
• Complex Synchronous Data

TanStack Query (Vue Query)

Used for server-state management.

• Caching: Automatic data caching and invalidation.
• Deduping: Prevents multiple requests for the same resource.
• Optimistic Updates: Immediate UI feedback.

Testing

Scope	Tool	Description
Unit	Vitest	Blazing fast unit test runner, compatible with Vite.
E2E	Playwright	Reliable end-to-end testing for critical user flows.

📦 Key Dependencies

Package	Purpose
@vueuse/core	Collection of essential Vue composition utilities.
zod	Schema validation (used for forms and API responses).
date-fns	Modern date manipulation library.
monaco-editor	Code editor component for JSON/Script editing.

Architectural Decisions

For reasoning behind these choices, see the Architecture Decisions Records.