SIMRS - FE

RSSA - Front End

Framework Guide

• Vue Style Guide
• Nuxt Style Guide

Configuration

• nuxt.config.ts
  Nuxt configuration file
• .env
  Some environment variables

Directory Structure for app/

• app.vue: Main layout
• components : Contains all reusable UI components.
• components/flows : Entry point for business logic and workflows. Pages or routes call these flow components to handle API requests and process application logic
• components/app : View-layer components that manage and present data. These are used within flows/ to render or handle specific parts of the UI, and return results back to the flow
• components/pub : Public/shared components used across different parts of the app.
• composables : Contains reusable logic and utility functions (e.g. composables, hooks)..
• layouts : Reusable UI layout patterns used across pages.

Directory Structure for app/pages

• pages/auth : Authentication related pages.
• pages/(features) : Grouped feature modules that reflect specific business flows or domains.

Directory Structure for server/

• server/api : API or proxy requests

Workflows

The basic development workflow follows these steps:

Define Your Data in models/

• Create data definitions or interfaces.
• These should represent the structure of the data used across your app.

Build UI Components in components/app

• Create reusable UI and app-specific components.
• Keep components pure — avoid making HTTP requests directly within them.
• They receive data via props and emit events upward.

Business Logic in components/flows

• This layer connects the UI with the logic (API calls, validations, navigation).
• It composes components from components/app/, components/pub/, and other flows.
• Also responsible for managing state, side effects, and interactions.

Create Pages in pages/

• Pages load the appropriate flow from components/flows/.
• They do not contain UI or logic directly—just route-level layout or guards.