Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/fredy-rizo/despacho-frontend/llms.txt

Use this file to discover all available pages before exploring further.

Understanding how the Lex Consultoría Despacho Frontend is organized makes it far easier to locate the right file for any given change. The project follows the standard Quasar CLI scaffold with a few deliberate conventions: feature-grouped subdirectories inside src/components/ and src/pages/, a clear separation between page-level containers and reusable components, and utility helpers isolated in src/tools/. Everything outside src/ is configuration — readable in one pass before you start coding.

​
Top-Level Layout

despacho-frontend/
├── public/                   # Static assets served as-is (favicon, icons)
│   ├── favicon.ico
│   └── icons/
│       ├── favicon-16x16.png
│       ├── favicon-32x32.png
│       ├── favicon-96x96.png
│       └── favicon-128x128.png
├── src/                      # All application source code
├── index.html                # Vite HTML entry point
├── quasar.config.js          # Quasar CLI configuration (boot, plugins, build)
├── jsconfig.json             # Path aliases and editor intelligence
├── eslint.config.js          # Flat ESLint config (ESLint v9)
├── .prettierrc.json          # Prettier formatting rules
├── postcss.config.js         # PostCSS / Autoprefixer setup
├── .editorconfig             # Cross-editor whitespace and encoding rules
├── .npmrc                    # npm registry and engine-strict settings
└── package.json              # Dependencies, scripts, and engine constraints

​
The src/ Directory

All Vue components, routing logic, styles, and helpers live under src/. The structure mirrors the Quasar CLI conventions while adding feature-based sub-groupings. 
src/
├── App.vue                   # Root component — renders <router-view />
├── assets/
│   └── logo/
│       └── logo3.png         # Primary brand logo
├── boot/
│   └── axios.js              # Axios boot file: registers $axios and $api globally
├── components/
│   └── users/
│       ├── auth/
│       │   ├── signInComponent.vue
│       │   └── signUpComponent.vue
│       ├── start/
│       │   └── startComponent.vue
│       └── whoWeAre/
│           └── whoWeAreComponent.vue
├── css/
│   ├── app.scss              # Global styles, imported by quasar.config.js
│   └── quasar.variables.scss # Quasar SCSS variable overrides (colors, breakpoints)
├── layouts/
│   └── MainLayout.vue        # App shell: branded header + <router-view />
├── pages/
│   ├── ErrorNotFound.vue     # Catch-all 404 page
│   └── users/
│       ├── auth/
│       │   ├── signInPage.vue
│       │   └── signUpPage.vue
│       ├── start/
│       │   └── startPage.vue
│       └── whoWeAre/
│           ├── whoWeArePage.vue
│           └── dashboardPage.vue
├── router/
│   ├── index.js              # Router factory (defineRouter, createWebHashHistory)
│   └── routes.js             # Route definitions (all application routes)
└── tools/
    └── User.js               # Auth helpers: validateUser, ValidateSession, getDataUser

​
Directory Reference

src/boot/

Quasar boot files run before the root Vue instance mounts. axios.js creates an Axios instance and attaches it to app.config.globalProperties as both $axios and $api, making HTTP requests available in every component without an explicit import.

src/components/

Reusable Vue components organized by feature group under users/. Each component is paired with a same-named page in src/pages/ — the page is the route target, and the component contains the actual template and logic.

src/css/

app.scss holds global CSS applied project-wide. quasar.variables.scss overrides Quasar’s built-in SCSS variables, such as primary/secondary colors and typography scale, to match the Lex Consultoría brand.

src/layouts/

MainLayout.vue is the sole layout and serves as the app shell for all public and dashboard routes under /. It renders a <q-header> with the Lex Consultoría brand mark and wraps child pages in a <q-page-container>.

src/pages/

Page-level components are the direct targets of Vue Router route definitions. Each page imports its corresponding component from src/components/ and delegates rendering to it, keeping routing concerns separate from UI logic.

src/router/

index.js exports the Quasar-wrapped router factory. routes.js declares every route, nesting the public pages under MainLayout.vue and keeping auth pages (/signIn, /signUp) at the top level without a layout wrapper.

src/tools/

Utility helpers that are not Vue components. User.js exports three functions — validateUser, ValidateSession, and getDataUser — used across components to check role permissions and manage the localStorage session token.

src/assets/

Static assets referenced directly in Vue templates or CSS. Currently holds logo/logo3.png, the primary brand image used in the application header and marketing sections.

​
Naming Conventions

The project follows a consistent <featureName><Type>.vue convention that makes the purpose of any file immediately clear from its name alone.
File nameTypeLocation
signInPage.vueRoute target (page)src/pages/users/auth/
signUpPage.vueRoute target (page)src/pages/users/auth/
startPage.vueRoute target (page)src/pages/users/start/
whoWeArePage.vueRoute target (page)src/pages/users/whoWeAre/
dashboardPage.vueRoute target (page)src/pages/users/whoWeAre/
signInComponent.vueReusable componentsrc/components/users/auth/
signUpComponent.vueReusable componentsrc/components/users/auth/
startComponent.vueReusable componentsrc/components/users/start/
whoWeAreComponent.vueReusable componentsrc/components/users/whoWeAre/
The Page suffix signals a route-level container; the Component suffix signals a reusable building block. Layouts use a descriptive name with a Layout suffix (MainLayout.vue).
All page-level components are lazy-loaded via dynamic import() in routes.js. For example: component: () => import('../pages/users/auth/signInPage.vue'). This ensures each page is split into its own JavaScript chunk and is only downloaded by the browser when the user navigates to that route, keeping the initial bundle size small.

​
Configuration Files

quasar.config.js

The central Quasar configuration. Declares boot files (axios), global CSS (app.scss), icon extras (line-awesome), Quasar plugins (Notify), router mode (hash), Vite plugins, and dev server options including open: true.

jsconfig.json

Configures path aliases (e.g., src/ mapped to src) so editors and the Vite resolver can both resolve bare imports like import('src/layouts/MainLayout.vue') without relative path traversal.

eslint.config.js

Flat ESLint configuration using the ESLint v9 API. Integrates eslint-plugin-vue for Vue-specific rules and @vue/eslint-config-prettier to disable formatting rules that conflict with Prettier.

.prettierrc.json

Prettier formatting rules applied to JS, Vue, SCSS, HTML, Markdown, and JSON files. Run npm run format or yarn format to auto-apply these rules across the entire repository.
When adding a new feature, create both a <feature>Component.vue in src/components/users/<feature>/ and a <feature>Page.vue in src/pages/users/<feature>/, then register the page in src/router/routes.js using a dynamic import. This pattern keeps the codebase consistent and ensures the new route is automatically code-split.

Build docs developers (and LLMs) love

Get started for freeTalk to us