From 856ccf4537e92154a422da4beab815490cfe5916 Mon Sep 17 00:00:00 2001 From: Abizrh Date: Thu, 7 Aug 2025 17:36:47 +0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=96=20docs=20(readme):=20update=20dire?= =?UTF-8?q?ctory=20structure=20and=20workflows=20documentation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 47 ++++++++++++++++++++++++++++++++--------------- 1 file changed, 32 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 34ab8766..0889a937 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,6 @@ # SIMRS - FE RSSA - Front End - ## Framework Guide - [Vue Style Guide](https://vuejs.org/style-guide) - [Nuxt Style Guide](https://nuxt.com/docs/4.x/guide) @@ -10,21 +9,39 @@ RSSA - Front End - `nuxt.config.ts`
Nuxt configuration file - `.env`
Some environment variables -## Directory Structure for `./app` -- `app.vue`
Main layout -- `components` : Contains all the components that are used in the app. -- `components/flows` : related to business flows. -- `components/app` : components that are used for common purpose. -- `components/pub` : components that are used for common purpose. -- `composables` : Contains all the composables/scripts that are used in the app. -- `layouts` : to extract common UI patterns into reusable layouts accross the app - - -## Directory Structure for `./app/pages` -- `./app/pages/auth` : pages for auth. -- `./app/pages/(features)` : grouping features related to business flows. +## 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 workflow has the following steps: +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.