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.

Lex Consultoría’s frontend uses Vue Router 4 in hash mode, meaning every URL is prefixed with # (e.g., http://localhost:5173/#/dashboard). Hash mode was chosen deliberately: it requires zero server-side configuration because the browser never sends the fragment portion of the URL to the server, making the app deployable on any static file host without rewrite rules.

​
Router Factory — src/router/index.js

Quasar wraps router creation inside its own defineRouter helper from #q-app/wrappers. This gives Quasar the opportunity to inject platform-specific context (like SSR server state) before the router is instantiated. Inside the factory, the correct history implementation is selected at build time via the VUE_ROUTER_MODE environment variable that Quasar sets from quasar.config.js. 
// src/router/index.js
import { defineRouter } from '#q-app/wrappers'
import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
import routes from './routes'

export default defineRouter(function (/* { store, ssrContext } */) {
  const createHistory = process.env.SERVER
    ? createMemoryHistory
    : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory)

  const Router = createRouter({
    scrollBehavior: () => ({ left: 0, top: 0 }),
    routes,

    // Leave this as is and make changes in quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    // quasar.conf.js -> build -> publicPath
    history: createHistory(process.env.VUE_ROUTER_BASE)
  })

  return Router
})
scrollBehavior: () => ({ left: 0, top: 0 }) ensures that every route transition resets the viewport scroll position to the top-left corner. This prevents the awkward experience of navigating to a new page while still scrolled halfway down the previous one.
The router mode is controlled from a single place — quasar.config.js: 
// quasar.config.js (build section)
build: {
  vueRouterMode: 'hash', // available values: 'hash', 'history'
}
Changing vueRouterMode to 'history' would switch to HTML5 pushState URLs, but that requires the web server to redirect all paths to index.html.

​
Full Route Table — src/router/routes.js

The complete routes array is defined in a separate file and imported by the router factory. Every page component is lazy-loaded via a dynamic () => import(...) call, which causes Vite to split each page into its own JS chunk. The /*webpackChunkName: "..."*/ magic comments are honored by both Webpack and Vite and give the output chunks human-readable names, making it easier to audit the network tab. 
// src/router/routes.js
const routes = [
  {
    path: "/signUp",
    component: () => import(/*webpackChunkName: "SIGNUP"*/ "../pages/users/auth/signUpPage.vue"),
  },
  {
    path: "/signIn",
    component: () => import(/*webpackChunkName: "SIGNIN"*/ "../pages/users/auth/signInPage.vue"),
  },
  {
    path: "/",
    component: () => import("src/layouts/MainLayout.vue"),
    children: [
      {
        path: "",
        component: () =>
          import(/*webpackChunkName: "START"*/ "src/pages/users/start/startPage.vue"),
      },
      {
        path: "/info_who_we_are",
        component: () =>
          import(/*webpackChunkName: "WHO_WE_ARE"*/ "../pages/users/whoWeAre/whoWeArePage.vue"),
      },
      {
        path: "/dashboard",
        component: () =>
          import(/*webpackChunkName: "DASHBOARD"*/ "../pages/users/whoWeAre/dashboardPage.vue"),
      },
    ],
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: "/:catchAll(.*)*",
    component: () => import("pages/ErrorNotFound.vue"),
  },
]

export default routes

​
Route Reference

/signUp

Registration page. Rendered outside MainLayout — no navigation bar or shared shell. Chunk name: SIGNUP.

/signIn

Login page. Also standalone, outside MainLayout. Displays the signInComponent form against a full-screen background image. Chunk name: SIGNIN.

/ (empty path)

Landing / start page rendered inside MainLayout. Matched when the path is exactly /. Chunk name: START.

/info_who_we_are

“Who We Are” informational page, rendered inside MainLayout. Chunk name: WHO_WE_ARE.

/dashboard

Admin reservations dashboard, rendered inside MainLayout. Intended for users with roles 1 or 2. Chunk name: DASHBOARD.

/:catchAll(.*)*

Catch-all 404 handler. The .* pattern with the * quantifier matches any path not claimed by a preceding route. Renders ErrorNotFound.vue.

​
Nested Routes and the MainLayout Wrapper Pattern

The three main application pages (/, /info_who_we_are, /dashboard) are declared as children of the root / route, whose component is MainLayout.vue. This is Vue Router’s nested route pattern: the parent component acts as a shell and renders child route components inside a <router-view /> outlet. 
App.vue
└── <router-view>              ← top-level outlet
    ├── signUpPage.vue         ← /signUp  (no layout)
    ├── signInPage.vue         ← /signIn  (no layout)
    └── MainLayout.vue         ← /  (layout shell)
        └── <router-view>      ← nested outlet inside MainLayout
            ├── startPage.vue           ← ""  (path: "")
            ├── whoWeArePage.vue        ← /info_who_we_are
            └── dashboardPage.vue       ← /dashboard
The benefit is that MainLayout.vue — which contains the navigation bar, drawer, and footer — is mounted once and persists across navigations between its children. Only the inner <router-view> swaps out, making transitions snappy and preventing unnecessary re-renders of shared chrome.
Auth pages (/signIn, /signUp) intentionally sit outside the layout tree. This keeps the login experience fully isolated — no navigation drawer appears before a user is authenticated.

​
Lazy-Loading Pattern

Each route component uses a dynamic import rather than a static one: 
// ✅ Lazy-loaded — Vite splits this into a separate chunk
component: () => import(/*webpackChunkName: "DASHBOARD"*/ "../pages/users/whoWeAre/dashboardPage.vue")

// ❌ Eager — would bundle the component into the main entry chunk
// import dashboardPage from "../pages/users/whoWeAre/dashboardPage.vue"
// component: dashboardPage
At build time, Vite reads the magic comment and names the output file after the chunk name (e.g., DASHBOARD.abc123.js). The browser only downloads that chunk when the user first navigates to /dashboard, reducing initial bundle size and speeding up first-page load.

Build docs developers (and LLMs) love

Get started for freeTalk to us