Configure environment variables and Quasar build options

All runtime configuration for Ecommerce Delivery is driven by the prod.env file in the repository root, which is loaded at build time by @quasar/quasar-app-extension-dotenv and injected into the bundle via require('dotenv').config().parsed inside quasar.config.js. No environment variables need to be set in the shell — everything is read from that single file. Build options, dev-server settings, enabled plugins, and icon packs are all declared in quasar.config.js and documented below.

Environment variables

API_SERVER

string

required

Base URL of the backend REST API, e.g. https://api.example.com. This value is used as the baseURL for the Axios api instance in src/boot/axios.js and is therefore prepended to every this.$api request made throughout the application.

PORT

number

Port number the Quasar Webpack dev server binds to. Defaults to 8080 when left empty or omitted. Corresponds to devServer.port in quasar.config.js.

PLATFROM

string

Deployment platform identifier. Note the intentional spelling — the key in prod.env is PLATFROM (not PLATFORM). Changing the spelling will break the variable lookup.

API_KEY

string

required

Firebase project API key. Read by src/firebase/init.js as process.env.API_KEY.

AUTH_DOMAIN

string

required

Firebase Auth domain, e.g. your-project.firebaseapp.com.

PROJECT_ID

string

required

Firebase project ID, e.g. your-project-id.

STORAGE_BUCKET

string

required

Firebase Cloud Storage bucket, e.g. your-project-id.appspot.com.

MESSAGING_SENDER_ID

string

required

Firebase Cloud Messaging sender ID (a numeric string).

APP_ID

string

required

Firebase app ID, e.g. 1:123456789:web:abc123.

MEASUREMENT_ID

string

Firebase Analytics measurement ID, e.g. G-XXXXXXXXXX. Required only if you use Firebase Analytics.

Never commit prod.env to version control. It contains your Firebase API keys, the backend API base URL, and any other secrets loaded at build time. Add prod.env to .gitignore immediately after creating it. Leaked Firebase credentials can be used to send unauthorised push notifications and access your Firebase project resources.

quasar.config.js options

Boot files

boot: ['axios']

The axios boot file (src/boot/axios.js) runs before the Vue app mounts. It creates an Axios instance with baseURL set to API_SERVER and registers it as app.config.globalProperties.$api and app.config.globalProperties.$axios, making both available as this.$api and this.$axios in every Vue Options API component.

Routing mode

build: {
  vueRouterMode: 'hash',
}

Vue Router is configured in hash mode. All routes use the URL hash (e.g. http://localhost:8080/#/store), so no server-side rewrite rules are needed for deep-link navigation. Switch to 'history' only if your hosting environment supports catch-all redirects.

Dev server

devServer: {
  server: { type: 'http' },
  port: 8080,
  open: true,
}

The dev server runs over plain HTTP on port 8080 and opens the default browser automatically on startup. Override the port by setting PORT in prod.env.

Quasar plugins

framework: {
  plugins: ['Notify', 'Dialog'],
}

Two Quasar plugins are enabled globally:

Plugin	Purpose
`Notify`	Toast-style push notifications surfaced via `this.$q.notify()`. Used throughout the application to confirm actions and surface API errors.
`Dialog`	Programmatic modal dialogs via `this.$q.dialog()`. Used in checkout confirmation flows and destructive action prompts.

Icon packs and fonts

extras: [
  'material-icons',
  'line-awesome',
  'roboto-font',
]

All three asset packs are loaded from @quasar/extras:

Extra	Description
`material-icons`	Google Material Icons — used for standard UI controls throughout the app.
`line-awesome`	Line Awesome icon set — used for decorative and category icons in the store and navigation.
`roboto-font`	Roboto web font — the primary typeface for all Quasar components.

Axios boot configuration

The src/boot/axios.js file configures the HTTP client and exposes it as two global Vue properties:

src/boot/axios.js

import { boot } from 'quasar/wrappers'
import axios from 'axios'

// Singleton Axios instance scoped to the backend API
const api = axios.create({ baseURL: 'https://api.example.com' })

export default boot(({ app }) => {
  // this.$axios — the raw Axios library (useful for one-off requests or custom instances)
  app.config.globalProperties.$axios = axios

  // this.$api — pre-configured instance with baseURL pointing to API_SERVER
  app.config.globalProperties.$api = api
})

export { api }

this.$axios — the raw Axios constructor. Use it when you need a custom Axios instance with different defaults (e.g. a separate base URL or interceptor chain).
this.$api — the shared instance pre-configured with the backend’s baseURL. This is the standard way to make authenticated API calls. It is also exported as a named export for use in Vuex actions and composables that cannot access this.

In development, replace the placeholder baseURL value with the actual API_SERVER value from prod.env — the quasar.config.js build step injects process.env.API_SERVER into the bundle.

Firebase configuration

src/firebase/init.js initialises the Firebase compat SDK and exports a messaging instance used by src/NotificationsManager.vue for FCM token registration and foreground message handling:

src/firebase/init.js

import firebase from 'firebase/compat/app'
import 'firebase/compat/messaging'

const firebaseConfig = {
  apiKey:            process.env.API_KEY,
  authDomain:        process.env.AUTH_DOMAIN,
  projectId:         process.env.PROJECT_ID,
  storageBucket:     process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGING_SENDER_ID,
  appId:             process.env.APP_ID,
  measurementId:     process.env.MEASUREMENT_ID,
}

firebase.initializeApp(firebaseConfig)

const messaging = firebase.messaging()

export { firebase, messaging }

All seven config values are pulled from process.env at runtime, meaning they must be present in prod.env before the Webpack build. The compat API (firebase/compat/app) is used deliberately — the modular SDK’s initializeApp is not used here to avoid double-initialisation issues in the Quasar boot lifecycle. The exported messaging object supports:

messaging.getToken({ vapidKey }) — requests an FCM registration token to send to the backend.
messaging.onMessage(handler) — registers a callback for push messages received while the app tab is in the foreground.

Client-side utility functions

The src/tools/ directory contains shared helper modules used across views and components.

Form validation — `src/tools/ValidateForm.js`

validateRequire checks that a set of required fields on a data object are non-null and non-empty before a form is submitted or an API call is made:

import { validateRequire } from 'src/tools/ValidateForm'

const result = validateRequire(formData, ['name', 'email', 'address'])
// result.status — true if all fields pass, false if any field fails
// result.fails  — array of { message, data } for each failing field

Call validateRequire before every this.$api POST/PUT to avoid sending incomplete payloads to the server. The Notify plugin is typically used to surface result.fails messages to the user when result.status is false.

URL auto-linking — `src/tools/Functions.js`

searchLinksinText scans a plain-text string for HTTP/HTTPS URLs and replaces each one with a clickable <a> tag:

import { searchLinksinText } from 'src/tools/Functions'

const html = searchLinksinText('Check out https://example.com for details.')
// → 'Check out <a href="https://example.com" target="_blank">https://example.com</a> for details.'

Use this helper when rendering user-generated content — product descriptions, order notes, or chat messages — where raw URLs should be made clickable without requiring the author to write HTML.

Get Started

Authentication

Core Features

Architecture

Configure environment variables and Quasar build options

Environment variables

quasar.config.js options

Boot files

Routing mode

Dev server

Quasar plugins

Icon packs and fonts

Axios boot configuration

Firebase configuration

Client-side utility functions

Form validation — `src/tools/ValidateForm.js`

URL auto-linking — `src/tools/Functions.js`

Build docs developers (and LLMs) love

Get Started

Authentication

Core Features

Architecture

Documentation Index

​Environment variables

​quasar.config.js options

​Boot files

​Routing mode

​Dev server

​Quasar plugins

​Icon packs and fonts

​Axios boot configuration

​Firebase configuration

​Client-side utility functions

​Form validation — src/tools/ValidateForm.js

​URL auto-linking — src/tools/Functions.js

Build docs developers (and LLMs) love

Environment variables

quasar.config.js options

Boot files

Routing mode

Dev server

Quasar plugins

Icon packs and fonts

Axios boot configuration

Firebase configuration

Client-side utility functions

Form validation — `src/tools/ValidateForm.js`

URL auto-linking — `src/tools/Functions.js`