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.

quasar.config.js is the nerve center of every Quasar CLI project. It replaces traditional Vite, Webpack, and PostCSS configuration files with a single unified export, so every build concern — from icon bundles to dev-server behavior to SSR port assignment — lives in one place. For Lex Consultoría’s Despacho Frontend, the file exports a defineConfig callback that returns a plain object organized into a handful of logical sections, each one documented below.

​
Top-level structure

// quasar.config.js
import { defineConfig } from '#q-app/wrappers'

export default defineConfig((/* ctx */) => {
  return {
    boot: ['axios'],
    css: ['app.scss'],
    extras: ['line-awesome'],
    build: { /* … */ },
    devServer: { /* … */ },
    framework: { /* … */ },
    ssr: { /* … */ },
    electron: { /* … */ },
  }
})
The ctx parameter (commented out here) exposes runtime context such as ctx.dev, ctx.prod, and ctx.mode.spa, which lets you branch config conditionally when needed.

​
Boot files

boot: ['axios'],
Boot files are thin modules that run before the Vue app mounts. They live in src/boot/ and are the correct place to install Vue plugins, configure global libraries, and attach helpers to app.config.globalProperties. Listing 'axios' here tells Quasar to execute src/boot/axios.js during startup, which creates the shared api Axios instance and registers this.$axios / this.$api on every Vue component.
Boot files are processed in array order. If you add a future authentication boot file that depends on the Axios instance being ready, place it after 'axios' in the array.

​
Global CSS

css: ['app.scss'],
app.scss is imported once at the top of the application bundle — before any component styles — making it the right home for CSS custom properties, Google Font imports, and any utility classes that must be available globally. The file resolves relative to src/css/. See the Theming page for a full breakdown of the current font imports in app.scss.

​
Extras (icon sets & fonts)

extras: [
  'line-awesome',
],
The extras array instructs @quasar/extras to bundle the selected icon sets and fonts directly into the build output. Line Awesome is the only active icon library for Despacho Frontend; Material Icons and Roboto Font are commented out. Icons from this set are referenced with the las / lab prefixes, for example name="las la-balance-scale". See the Theming page for full icon usage examples.

​
Build settings

build: {
  target: {
    browser: ['es2022', 'firefox115', 'chrome115', 'safari14'],
    node: 'node20',
  },
  vueRouterMode: 'hash',
  vitePlugins: [
    [
      'vite-plugin-checker',
      {
        eslint: {
          lintCommand: 'eslint -c ./eslint.config.js "./src*/**/*.{js,mjs,cjs,vue}"',
          useFlatConfig: true,
        },
      },
      { server: false },
    ],
  ],
},
SettingValueEffect
target.browser['es2022', 'firefox115', 'chrome115', 'safari14']Vite transpiles and polyfills output for these browser baselines.
target.node'node20'SSR and Electron builds target the Node 20 runtime.
vueRouterMode'hash'All routes use # prefix — no server-side URL rewriting required.
vitePluginsvite-plugin-checker with { server: false }ESLint surfaces build-time errors; overlay disabled during dev server.
The third element in the vitePlugins tuple — { server: false } — is the vite-plugin-checker options object. Setting server: false means ESLint runs only when you execute quasar build, not during quasar dev. To enable real-time lint feedback in the dev server, change it to { server: true }.
vueRouterMode: 'hash' works out of the box on any static host. If you switch to 'history' mode, your server must redirect all requests to index.html to avoid 404 errors on direct URL access.

​
Dev server

devServer: {
  open: true, // opens browser window automatically
},
With open: true, Quasar launches your default browser and navigates to http://localhost:9000 (the default Quasar dev port) the moment the dev server is ready. Remove this line or set it to false to suppress the automatic launch — useful in headless CI environments.

​
Framework plugins

framework: {
  config: {},
  plugins: ['Notify'],
},
Quasar ships dozens of optional JS plugins (Dialog, Loading, LocalStorage, etc.) that are not included in the bundle unless explicitly listed here. The Despacho Frontend activates Notify, which provides toast-style notifications. Using Notify inside a component: 
import { useQuasar } from 'quasar'

const $q = useQuasar()

$q.notify({
  message: 'Expediente guardado correctamente.',
  color: 'positive',
  icon: 'las la-check-circle',
  position: 'top-right',
  timeout: 3000,
})
For error feedback, pair color: 'negative' with icon: 'las la-times-circle' to stay consistent with the project’s design token palette.

​
SSR production port

ssr: {
  prodPort: 3000,
  middlewares: ['render'],
  pwa: false,
},
Although the project currently runs as an SPA, the SSR section is pre-configured with a production port of 3000. If you later switch to quasar dev --mode ssr or quasar build --mode ssr, the Node.js server will bind to port 3000 unless process.env.PORT overrides it at runtime.

​
Electron configuration

electron: {
  preloadScripts: ['electron-preload'],
  inspectPort: 5858,
  bundler: 'packager',
  builder: {
    appId: 'TuKit',
  },
},
The Electron section is present for potential desktop packaging. The appId is set to 'TuKit', which matches the productName field in package.json. The active bundler is packager (electron-packager); switch to 'builder' to use electron-builder and its appId value.

​
NPM scripts

npm run dev
# internally: quasar dev
Starts the Vite-powered dev server with Hot Module Replacement (HMR). The browser opens automatically thanks to devServer.open: true. All changes to .vue, .js, and .scss files reflect instantly without a full page reload.
npm run build
# internally: quasar build
Compiles, tree-shakes, and minifies the SPA into the dist/spa/ folder. ESLint runs during this step via vite-plugin-checker. The output targets the browsers defined in build.target.browser.
npm run lint
# internally: eslint -c ./eslint.config.js "./src*/**/*.{js,cjs,mjs,vue}"
Executes ESLint using the flat config in eslint.config.js, which composes rules from @quasar/app-vite, eslint-plugin-vue (essential preset), and Prettier’s skip-formatting config. Use this in pre-commit hooks or CI pipelines.
npm run format
# internally: prettier --write "**/*.{js,vue,scss,html,md,json}" --ignore-path .gitignore
Rewrites all eligible files in place according to .prettierrc.json (semi: false, printWidth: 100). Files listed in .gitignore are skipped.
# runs automatically after: npm install
# internally: quasar prepare
postinstall fires automatically when you run npm install. It executes quasar prepare, which regenerates the .quasar/ directory, including type definitions and internal wrappers that Quasar CLI needs to resolve #q-app/* imports.
npm run test
# internally: echo "No test specified" && exit 0
Currently a no-op that exits cleanly with code 0. Replace with your test runner invocation (e.g., Vitest, Cypress) when tests are added.

​
Engine requirements

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 or produce corrupt type definitions in .quasar/.

Environment Config

Configure the API base URL and inject runtime variables via build.env and dotenv.

Theming

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

Project Structure

How source files, boot files, and assets are organized in the repository.

Build docs developers (and LLMs) love

Get started for freeTalk to us