Skip to content

on_boarding.md

Latest commit

 

History

History
99 lines (65 loc) · 7.97 KB

on_boarding.md

File metadata and controls

99 lines (65 loc) · 7.97 KB
graph LR
    App_Bootstrap["App Bootstrap"]
    Routing_Layout_System["Routing & Layout System"]
    State_Management["State Management"]
    UI_Charting_Library["UI & Charting Library"]
    Internationalisation_Data_Layer["Internationalisation & Data Layer"]
    Unclassified["Unclassified"]
    App_Bootstrap -- "registers router" --> Routing_Layout_System
    App_Bootstrap -- "registers Pinia stores" --> State_Management
    App_Bootstrap -- "registers i18n" --> Internationalisation_Data_Layer
    Routing_Layout_System -- "embeds UI components and router‑view" --> UI_Charting_Library
    UI_Charting_Library -- "reads store values and dispatches actions" --> State_Management
    State_Management -- "triggers UI re‑render via store mutations" --> UI_Charting_Library
    State_Management -- "seeds stores with locale‑specific mock data" --> Internationalisation_Data_Layer
    Internationalisation_Data_Layer -- "provides localized strings to UI components" --> UI_Charting_Library
    click Routing_Layout_System href "https://github.com/CodeBoarding/GeneratedOnBoardings/blob/main/vuestic-admin/Routing_Layout_System.md" "Details"
    click State_Management href "https://github.com/CodeBoarding/GeneratedOnBoardings/blob/main/vuestic-admin/State_Management.md" "Details"
    click UI_Charting_Library href "https://github.com/CodeBoarding/GeneratedOnBoardings/blob/main/vuestic-admin/UI_Charting_Library.md" "Details"
Loading

CodeBoardingDemoContact

Details

vuestic-admin follows a classic Vue 3 + Pinia architecture. The App Bootstrap (src/main.ts) creates the Vue instance and globally registers three foundational services: router, Pinia stores, and i18n (plus Vuestic‑UI and optional GTM). The Routing & Layout System (src/router/index.ts together with the three layout shells) determines which layout wraps a page and injects the shared UI widgets (navbar, sidebar, icon set). All visual components, including the VaChart subsystem, consume reactive data from the State Management layer (Pinia stores defined under src/stores/). Stores are initially seeded with static mock data from the Data directory and expose actions that drive UI state (theme, sidebar visibility, notifications). Localized strings are provided by Internationalisation (src/i18n/) and are used throughout the UI and chart labels. The resulting data‑flow is a top‑down cascade (Bootstrap → Router → Layout → UI/Chart) with upward event feedback (UI → Store → Router), forming a clean, diagram‑friendly flow graph.

App Bootstrap

Creates the Vue application, registers Pinia, router, i18n, Vuestic‑UI, optional GTM, and mounts the root component.

Related Classes/Methods:

Routing & Layout System [Expand]

Declares all route records, lazy‑loads page components, and selects one of three layout shells (App, Auth, RouterBypass).

Related Classes/Methods:

State Management [Expand]

Pinia‑based stores that hold UI flags, authentication state, domain data (projects, payments, billing, notifications) and expose actions used throughout the UI.

Related Classes/Methods:

UI & Charting Library [Expand]

Reusable visual widgets (navbar, sidebar, icon set) and the charting subsystem (VaChart wrapper, chart‑type components, config helpers, external tooltip integration).

Related Classes/Methods:

Internationalisation & Data Layer

Sets up Vue‑i18n, loads locale JSON files, and provides static/mock datasets consumed by stores and chart components.

Related Classes/Methods:

Unclassified

Component for all unclassified files and utility functions (Utility functions/External Libraries/Dependencies)

Related Classes/Methods: None

FAQ