ApiHug Vue Framework

When To Use It

Use this page when your UI module is Vue-based and you want a predictable structure for generated routes, shared components, i18n, and service wiring.

Steps

1. Keep the UI module split between reusable packages and the application itself. Typical areas are:
   • shared packages such as util, hook, or component wrappers
   • an application entry under src
2. Organize the application entry so responsibilities stay obvious:
   • assets for style and static resources
   • components for reusable UI pieces
   • pages for routed screens
   • router for generated and manual route assembly
   • service for generated API-facing models and service helpers
   • stores, types, and utils for runtime support
3. Let the toolchain generate route metadata from your page files instead of hand-maintaining a second route tree. The expected flow is:
   • page files define route metadata
   • the toolchain generates route records
   • the same metadata can drive menus and i18n keys
4. Keep the UI contract aligned with the app-level configuration described in Application Configuration and the generation flow described in Tool Chain.

What You Should Expect

In a healthy setup, the Vue module is not just a loose folder of components. It is a structured application whose routes, service layer, and UI metadata stay consistent with the ApiHug-generated contract surface.

Result

You end up with a Vue project layout that is easier to generate, easier to maintain, and less likely to drift from the backend contract.