SIMRS - FE

RSSA - Front End

Important

Read this following instructions before doing your job

Framework Guide

• Vue Style Guide
• Nuxt Style Guide
• Shadcn Vue @radix-ui

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/flow : 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 flow/ 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 flow 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/flow

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

Create Pages in pages/

• Define permissions and guards for each page.
• Pages load the appropriate flow from components/flow/.
• They do not contain UI or logic directly, just route level layout or guards.

Code Conventions

• Under the script setup block, putting things in group with the following order:
  • Imports → all dependencies, sorted by external, alias (~), and relative imports.
  • Props & Emits → clearly define component inputs & outputs.
  • State & Computed → all ref, reactive, and computed variables grouped together.
  • Lifecycle Hooks → grouped by mounting → updating → unmounting order.
  • Functions → async first (fetching, API calls), then utility & event handlers.
  • Watchers → if needed, put them at the bottom.
  • Template → keep clean and minimal logic, use methods/computed instead of inline JS.
• Declaration Naming
  • Uses PascalCase for type naming
  • Uses camelCase for variable and const naming
  • Underscore can be used to indicates that a variable has derived from an attribute of an object
    for example: person_name indicates it is an attribute name from object person
• Looping
  • Uses i, j, k as variable for for looping index
  • Uses item as object instantition for forEach loop callback
  • Uses item as object instantition for v-for loop callback in the template

Git Workflows

The basic git workflow follows these steps:

1. Create a new branch on dev
   • branch name should be feat/<feature-name> or fix/<bug-name>
2. Make your changes
3. Commit your changes
   • commit msg format: [type]: [description]
     • type can be feat, fix, docs, style, refactor, perf, test, build, ci, chore, revert
     • description should be a brief description of the changes
     • Example: feat: add new feature
4. Push your changes to dev
5. Create a pull request from dev to main