Skip to main content

Documentation Index

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

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

Ecommerce Delivery uses Vue Router 4, configured through Quasar’s route() wrapper in src/router/index.js. Routes are defined in a separate src/router/routes.js file and split into two groups: standalone public pages that render with no layout shell, and authenticated pages nested under MainLayout which provides the persistent navigation drawer and header. A global beforeEach guard handles session-level route protection.

​
Router mode

The router operates in hash mode, set explicitly in quasar.config.js: 
// quasar.config.js (build section)
build: {
  vueRouterMode: "hash",
}
All URLs use the # hash prefix (e.g. https://yourapp.com/#/posts). This means no server-side rewrite rules are required — any static file host or CDN can serve the app without additional configuration. The router selection logic in src/router/index.js also supports history mode and SSR memory history, but hash mode is the deployed default: 
// src/router/index.js
const createHistory = process.env.SERVER
  ? createMemoryHistory
  : process.env.VUE_ROUTER_MODE === "history"
    ? createWebHistory
    : createWebHashHistory;

​
Route groups

Routes are divided into two structural groups based on whether they require the authenticated layout shell.

​
Standalone routes (no layout)

These pages render directly without MainLayout. They are used for authentication flows where the nav sidebar would be inappropriate:
  • /login — sign in
  • /registro — sign up
  • /security-code — post-signup email verification
  • /new-password-confirm — password reset confirmation
  • /auth-page — OAuth redirect target
  • /change-password — forgot password / recovery

​
MainLayout children (authenticated)

All of the following are nested children of the root / route which loads layouts/MainLayout. They inherit the header and navigation drawer:
  • /posts — product catalog
  • /miembros — admin member list
  • /sales — admin sales report
  • /camisetas/:typeShirt — products filtered by shirt type
  • /client-id — client profile
  • /formulario-page — user form
  • /Store — product store (alias for MainStore)
  • /shoppingcar — shopping cart
  • /shoppingList — order history
  • /notifications — notification feed
  • /update-password-width-token — token-based password reset
/update-password-width-token is defined as a child of MainLayout in routes.js even though it is a password-reset flow. If your backend redirects to this URL before a user is logged in, ensure the navigation guard (described below) permits access without a session.

​
Full route table

PathNameComponentNotes
/loginloginpages/login/SignInPublic
/registroregistropages/login/signUpPublic
/security-codesecurity-codepages/security/secureCodePost-signup verification
/new-password-confirmnew-password-confirmpages/login/confirmeNewPasswordPassword reset
/auth-pageauth-pagepages/login/authPageAuth redirect target
/change-passwordchange-passwordpages/login/recoveryPasswordForgot password
/update-password-width-tokenupdate-password-width-tokenpages/login/updatePass/updatePasswordWithTokenToken-based reset (MainLayout child)
/postspostspages/store/MainStoreProduct catalog
/miembrosmiembrospages/Members/MembersPageAdmin: member list
/salessalespages/sales/salesPageAdmin: sales report
/camisetas/:typeShirtCamisetasPagepages/Camisetas/CamisetasPageProducts filtered by shirt type
/client-idclient-idpages/Perfil/Cliente/ClientIdClient profile
/formulario-pageformulario-pagepages/Perfil/Formularios/FormularioPageUser form
/StoreStorepages/store/MainStoreProduct store (MainLayout child alias)
/shoppingcarShoppingcarpages/shoppingCar/CarShopping cart
/shoppingListShoppinglistpages/shopping/ShoppingListOrder history
/notificationsnotificationspages/notifications/NotificationsNotification feed
/:catchAll(.*)*—pages/shared/ErrorNotFound404 fallback
Route protection is implemented at two levels: a global beforeEach guard in the router, and per-component validateUser() calls before API requests.

​
Global beforeEach guard

src/router/index.js registers a beforeEach hook that checks for a stored user object on every navigation: 
// src/router/index.js
Router.beforeEach((to, from, next) => {
  let user = null

  try {
    const rawUser = localStorage.getItem("user")
    user = rawUser ? JSON.parse(rawUser) : null
  } catch (e) {
    user = null
  }

  const rutasPublicas = [
    "login",
    "registro",
    "security-code",
    "auth-page",
    "change-password",
    "new-password-confirm"
  ]
  const esRutaPublica = rutasPublicas.includes(to.name)

  if (!esRutaPublica && !user) {
    next({ name: "login" })
  } else {
    next()
  }
})
If the destination route is not in the rutasPublicas allowlist and no user object exists in localStorage, the guard redirects to login. This provides a baseline layer of protection even before any component mounts.

​
Per-component role validation

Inside each protected component’s setup(), validateUser() from src/tools/User.js is called before any API request to verify the user has the required role: 
import { validateUser } from 'src/tools/User'
import { useRouter } from 'vue-router'

// Inside setup():
const router = useRouter()
const sessionUser = validateUser({ rol: [1, 3] })
if (!sessionUser) {
  router.push({ path: '/login' })
  return
}
This secondary check ensures that even if a user somehow navigates to a route with a stale or guest token, they cannot load sensitive data.

​
Lazy loading

Every route uses a dynamic import() with a /* webpackChunkName */ magic comment so Webpack splits the bundle into named async chunks: 
// src/router/routes.js (examples)
{
  path: "/login",
  name: "login",
  component: () =>
    import(/* webpackChunkName: "LOGIN" */ "pages/login/SignIn"),
},
{
  path: "sales",
  name: "sales",
  component: () =>
    import(/* webpackChunkName: "EVENTOS" */ "pages/sales/salesPage"),
},
{
  path: '/camisetas/:typeShirt',
  name: 'CamisetasPage',
  component: () => import('pages/Camisetas/CamisetasPage.vue'),
},
Each chunk is only downloaded when the user first navigates to that route, keeping the initial bundle small.

​
Adding new routes

To add a new page to the app: create the page component under src/pages/, then add an entry in src/router/routes.js. If the page should display inside the authenticated nav shell, nest it as a child of the MainLayout route (the path: "/" entry). If it is a standalone public page, add it at the top level alongside /login.
// Adding a new authenticated page — nest under the MainLayout children array
{
  path: "/",
  component: () => import("layouts/MainLayout"),
  children: [
    // ... existing children ...
    {
      path: "my-new-page",
      name: "my-new-page",
      component: () =>
        import(/* webpackChunkName: "MY-NEW-PAGE" */ "pages/MyNewPage.vue"),
    },
  ],
},

Build docs developers (and LLMs) love

Get started for freeTalk to us