Frontend (Zova)

This page is the frontend hub for Cabloy users, contributors, and AI vibe coding workflows that need the frontend side of the framework.

Zova is the frontend half of Cabloy’s one-framework-system fullstack architecture.

What Zova is responsible for

• page and component architecture
• SSR, SPA, Web, and Admin rendering flows
• data access patterns such as $fetch, $api, and generated SDKs
• UI library integration
• route, icon, and component type generation
• frontend-side refactors and code generation through the Zova CLI

How to approach frontend work

For contributor and automation workflows in this repository, prefer this order:

1. inspect the root package.json and npm run zova entrypoint
2. inspect Zova CLI command families such as create:*, init:*, refactor:*, tools:*, and openapi:*
3. inspect the active edition before assuming a UI stack
4. document shared concepts once, then isolate edition-specific notes where the module set or UI library differs

Frontend reading paths

Use this page as the main frontend hub, then choose the path that matches your task.

Getting started and architecture spine

Start here when you need the shortest route to the frontend mental model and startup context.

A practical rule is:

• if you need the broadest entry page, stay on this page
• if you need help choosing a topic cluster, continue with Frontend Source Reading Roadmap
• if you already know the topic and want file-order guidance, continue with Zova Source Reading Map

Recommended starting set:

• Quickstart
• Foundation
• Reading Zova for Vue Developers
• Frontend Source Reading Roadmap
• Zova Source Reading Map
• IoC and Beans
• Design Principles
• Environment and Config Guide
• App Startup Guide
• System Startup Guide
• Frontend Directory Structure

Page and routing flow

Use this path when the task is page-oriented, route-oriented, or the first time you need Zod in frontend params and query work:

• Page Guide
• Page Query Guide
• Page Params Guide
• Zod Guide
• Page Route Guide
• A-Router Guide
• Route Alias Guide
• Navigation Guards Guide
• Zova Router Under the Hood
• Router View Hosts Guide
• Router Tabs Introduction
• Router Tabs Overview
• Router Tabs Mechanism
• Page Meta Guide
• Router Tabs Layout Integration
• Router Tabs vs Stack
• Router Stack Guide
• Router Tabs Route Meta Cookbook

Components and UI flow

Use this path when the task is about UI composition, component contracts, form or table architecture, form or table internals, form or table source reading, or theme work:

• Component Guide
• Form Guide
• Zova Form Under the Hood
• Zova Form Source Reading Map
• Table Guide
• TableCell Authoring Cookbook
• Table + Resource CRUD Cookbook
• Zova Table Under the Hood
• Zova Table Source Reading Map
• Component Props Guide
• Component v-model Guide
• Generic Component Guide
• CSS-in-JS Guide
• Theme Guide
• Icon Engine Guide

Data, contract, and SSR flow

Use this path when the task is about data loading, API contracts, generated SDKs, or SSR behavior:

• Server Data
• API Guide
• Model Architecture
• Model State Guide
• Model Resource Owner Pattern
• Rest Resource Under the Hood
• Rest Resource Source Reading Map
• Using ModelResource in Your Module
• Resource Model Best Practices
• Resource Model Cookbook
• OpenAPI SDK Guide
• API Schema Guide
• SDK Guide
• SSR Architecture Overview
• SSR Build and Deploy Guide
• SSR Troubleshooting Guide
• SSR Review Checklist
• SSR Overview
• SSR Init Data
• SSR ClientOnly
• SSR SEO Meta
• SSR Env

Tooling support

Use these pages when the work is about commands, scripts, or mock-driven iteration:

• CLI
• Scripts
• Mock Guide

Edition impact

Frontend work is where Cabloy Basic and Cabloy Start differ most clearly.

• Shared frontend engineering layer: both editions follow the same Zova-centered frontend direction, with Vue, Vite, Quasar tooling, and related libraries.
• Cabloy Basic UI layer: current public docs and examples align with DaisyUI + Tailwind CSS.
• Cabloy Start UI layer: the private commercial edition aligns with Vuetify and may use different frontend modules, SSR site baselines, and project assets.

Because of this, automation and docs should always detect the active edition before recommending page-level, component-level, or UI-library-specific work.