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.

The Despacho Frontend communicates with its backend through Axios, which is initialized once at startup by the src/boot/axios.js boot file. Understanding where the API base URL lives — and how to change it per environment — is essential before deploying to staging or production. This page explains the current setup, its known inconsistency, and two patterns for proper environment-based configuration.

​
How the Axios boot file works

Quasar executes src/boot/axios.js before the Vue app mounts. The file creates a single shared Axios instance and registers it on Vue’s global properties so every component can use this.$api (Options API) or import { api } directly (Composition API). 
// src/boot/axios.js
import { defineBoot } from '#q-app/wrappers'
import axios from 'axios'

// Be careful when using SSR for cross-request state pollution
// due to creating a singleton instance here;
// If any client changes this (global) instance, it might be a
// good idea to move this instance creation inside of the
// "export default () => {}" function below (which runs individually
// for each client)
const api = axios.create({ baseURL: 'https://api.example.com' })

export default defineBoot(({ app }) => {
  // for use inside Vue files (Options API) through this.$axios and this.$api
  app.config.globalProperties.$axios = axios
  app.config.globalProperties.$api = api
})

export { api }
The exported api instance is the recommended way to make requests in Composition API components: 
import { api } from 'src/boot/axios'

const response = await api.get('/expedientes')

​
Current base URL mismatch

Action required before any deployment. The baseURL in src/boot/axios.js is set to 'https://api.example.com' — a placeholder that does not point to a real server. Meanwhile, component-level fetch() calls in files such as signInComponent.vue, startComponent.vue, and dashboardPage.vue use http://localhost:2101 directly (hardcoded). This means the shared api instance is effectively unused in those components. Before deploying, you must reconcile these two approaches by adopting a single, environment-driven base URL. Follow the steps in the next section to fix this cleanly.

​
Changing the base URL

​
Option 1 — Edit the boot file directly

The simplest approach for a single-environment setup is to update the baseURL string in src/boot/axios.js, and replace the hardcoded fetch('http://localhost:2101/...') calls in components with api.get('...'): 
// src/boot/axios.js
const api = axios.create({ baseURL: 'http://localhost:2101' })
This works but requires a manual edit for every deployment target (local, staging, production), which is error-prone. Quasar can inject environment variables at build time using the build.env key in quasar.config.js. Combined with dotenv (already a runtime dependency), this gives you a clean, per-environment configuration without touching source files. Step 1 — Add build.env to quasar.config.js: 
// quasar.config.js
import { defineConfig } from '#q-app/wrappers'
import 'dotenv/config'

export default defineConfig(() => {
  return {
    build: {
      env: {
        API_URL: process.env.API_URL || 'http://localhost:2101',
      },
      // … rest of build config
    },
  }
})
Step 2 — Update src/boot/axios.js to consume the variable: 
const api = axios.create({ baseURL: process.env.API_URL })
Step 3 — Replace hardcoded fetch calls in components: Any component that currently calls fetch('http://localhost:2101/...') directly should be updated to use the shared api instance instead: 
// Before (hardcoded)
const res = await fetch('http://localhost:2101/auth/login', { method: 'POST', ... })

// After (uses boot-file instance driven by API_URL)
import { api } from 'src/boot/axios'
const res = await api.post('/auth/login', payload)
Step 4 — Create a .env file in the project root: 
# .env  (never commit secrets — add .env to .gitignore)
API_URL=http://localhost:2101
Values in build.env are statically replaced by Vite at bundle time (similar to define in vite.config.js), so process.env.API_URL becomes an inline string in the production bundle.

​
No .env file exists yet

The project does not currently include a .env or .env.example file. There are no pre-defined environment variables in the repository. The build.env pattern described above is how you create environment variable support from scratch — the only requirement is that dotenv is imported in quasar.config.js and a .env file is added to the project root. The dotenv package is already installed as a production dependency ("dotenv": "^17.2.0" in package.json), so no additional installation is needed.

​
Environment files per deployment target

Create one .env file per environment and load the right one in your CI/CD pipeline by setting the API_URL variable in the environment before running quasar build. 
API_URL=http://localhost:2101
To load a specific file during build, pass the variable inline or source the file before running Quasar: 
# Linux / macOS — inline variable
API_URL=https://api.staging.lexconsultoria.mx quasar build

# Or using a .env file with dotenv-cli
npx dotenv -e .env.staging -- quasar build

​
The dotenv dependency

dotenv is already listed as a production dependency in package.json ("dotenv": "^17.2.0"). To activate it inside quasar.config.js, import it at the top of the file before reading process.env: 
import 'dotenv/config'
// process.env.* values from .env are now available
dotenv only reads from .env in the project root by default. Use dotenv.config({ path: '.env.staging' }) if you need to load a non-default file programmatically inside quasar.config.js.

​
Node version requirements

The project’s package.json declares the following engine constraints:
RuntimeRequired version
Node.js^28 || ^26 || ^24 || ^22 || ^20 || ^18
npm>= 6.13.4
Yarn>= 1.21.1
Node versions below 18 are not supported. Using an unsupported version may cause quasar prepare to fail silently.

​
Summary of environment configuration touchpoints

FilePurpose
src/boot/axios.jsCreates the shared Axios instance; set baseURL here
quasar.config.js → build.envInjects env variables as build-time constants
.envLocal variable overrides; create this file — never commit secrets
package.json → enginesEnforces Node/npm/Yarn version constraints

Quasar Config

Full reference for quasar.config.js including boot, build, and dev server settings.

API Integration

How components call the backend, authentication headers, and response handling patterns.

Theming

SCSS design tokens, color palette, and Line Awesome icon usage.

Build docs developers (and LLMs) love

Get started for freeTalk to us