if (import.meta.env.QUASAR_DEV) {
  console.log(`I'm on a development build`)
}

// import.meta.env.MODE is the <mode> in
// "quasar dev/build -m <mode>"
// (defaults to 'spa' if -m parameter is not specified)

if (import.meta.env.QUASAR_MODE === 'electron') {
  // ...
}

// alternatively, use:
if (import.meta.env.QUASAR_ELECTRON_MODE) {
  // ...
}

if (import.meta.env.QUASAR_DEV) {
  console.log('dev')
} else {
  console.log('build')
}

// running with "quasar dev" will result in:
console.log('dev')
// while running with "quasar build" will result in:
console.log('build')

if (import.meta.env.QUASAR_MODE === 'electron') {
  import('my-fancy-npm-package').then(package => {
    // notice "default" below, which is the prop with which
    // you can access what your npm imported package exports
    package.default.doSomething()
  })
}

// alternatively:
if (import.meta.env.QUASAR_ELECTRON_MODE) {
  // ...
}

<%= importMetaEnv.MY_ENV_VAR_OR_DEFINE %>
<!-- or shorthand: -->
%MY_ENV_VAR_OR_DEFINE%

<% if (importMetaEnv.MY_ENV_VAR_OR_DEFINE) { %>Wow!<% } %>

build: {
  /**
   * Define global constant replacements. Entries will be defined as globals
   * during dev and statically replaced during build.
   *
   * This gets supplied to Vite's & Rolldown's own "define" option,
   * which in turn uses Oxc's "define" feature to perform replacements.
   *
   * All non-string values are automatically JSON.stringified by Quasar CLI.
   * This ensures consistency between Vite & Rolldown builds and avoids Rolldown to fail.
   *
   * @example { __APP_VERSION__: JSON.stringify('v1.0.0') }
   * @example { 'import.meta.env.APP_VERSION': JSON.stringify('v1.0.0') }
   * @example { __API_URL__: 'window.__backend_api_url' }
   */
  define?: Record<
    string,
    string | number | boolean | undefined | null | any[] | Record<string, any>
  >;

  /**
   * Sugar for `define` option. Define global constant replacements that will
   * be automatically transformed into "define" entries with the `import.meta.env` prefix
   * and already JSON-stringified.
   *
   * @example { SOME_DEFINE: 'my-string' } will be transformed into { 'import.meta.env.SOME_DEFINE': '"my-string"' }
   * @example { VERSION: 22 } will be transformed into { 'import.meta.env.VERSION': '22' }
   */
  defineEnv?: Record<
    string,
    string | number | boolean | undefined | null | any[] | Record<string, any>
  >;
}

export default defineConfig(ctx => {
  return {
    // ...

    build: {
      // passing down to UI code from the quasar.config file
      define: {
        'import.meta.env.API': JSON.stringify(
          ctx.dev ? 'https://dev.api.com' : 'https://prod.api.com'
        ),
        'import.meta.env.VERSION': JSON.stringify(22)
      },

      // ALTERNATIVE using the sugar syntax of defineEnv:
      defineEnv: {
        API: ctx.dev ? 'https://dev.api.com' : 'https://prod.api.com',
        VERSION: 22
      }
    }
  }
})

MY_API=api.com QCLI_MY_API=api.com  quasar build

// client code:
console.log(import.meta.env.QCLI_MY_API) // "api.com"
console.log(import.meta.env.MY_API) // undefined

// backend code
console.log(import.meta.env.QCLI_MY_API) // "api.com"
console.log(import.meta.env.MY_API) // "api.com"

# we set an env variable in terminal
MY_API=api.com quasar build
MY_API=api.com quasar dev

// then we pick it up in the /quasar.config file
build: {
  defineEnv: {
    API: ctx.dev
      ? 'https://dev.' + import.meta.env.MY_API
      : 'https://prod.' + import.meta.env.MY_API
  }
}

# NOT exposed to client code, but exposed to backend;
# it does NOT start with QCLI_ prefix:
SOME_VAR=content

# this will be embedded into backend & client code,
# as it starts with QCLI_ prefix:
QCLI_SOME_VAR=content

import.meta.env.SOME_VAR // ❌ Not available in client code
import.meta.env.QCLI_SOME_VAR // ✅ Available in client code

PASSWORD="s1mpl3"

# reference PASSWORD above:
DB_PASS=$PASSWORD

# reference a variable coming from terminal;
# let's say we have SOME_VALUE defined in terminal:
MY_VAR=$SOME_VALUE

// in /quasar.config file:
build: {
  defineEnv: {
    FOO: 'hello',
  }
}

// in your app:
console.log(import.meta.env.FOO) // ✅
console.log(import.meta.env.foo) // ❌ Case sensitive
console.log(import.meta.env.F0O) // ❌ Typo in the variable name (middle o is 0(zero))
console.log(import.meta.env.BAR) // ❌ It's not defined in config

const { FOO } = import.meta.env // ❌ It doesn't allow destructuring or similar
console.log(import.meta.env.FOO) // ✅ It can only replace direct usage like this

function getEnv(name) {
  return import.meta.env[name] // ❌ It can't analyze dynamic usage
}

console.log(import.meta.env) // ❌ It will output {}

/**
 * Add types (that are not auto-magically added by Quasar CLI already)
 * for your custom variables to avoid TypeScript errors, like dynamic
 * process.env variables or definitions in dotenv files configured ONLY
 * for the /quasar.config file itself.
 *
 * @example
 * interface ImportMetaEnv {
 *   readonly MY_VAR: string;
 *   readonly MY_OTHER_VAR: string;
 * }
 */
interface ImportMetaEnv {}

build: {
  env: {
    /**
     * Ignore auto-infering and declaring type for these variables;
     * Variables can come from process.env (terminal variables) or
     * dotenv files or quasar.config > build > define/defineEnv.
     *
     * Use the full variable name as transformed in the code.
     * @example 'all' to ignore all variables
     * @example ['import.meta.env.OTHER_VAR', '__SOME_VAR__'] to ignore specific variables.
     * @default []
     */
    ignoreType: ['import.meta.env.MY_SPECIAL_VAR']
  }
}

.env        # loaded in all cases
.env.local  # loaded in dev only, ignored by git

# Database Configuration
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=super_secret_password
DB_PORT=5432

# API Keys
STRIPE_API_KEY=sk_test_123456789
NODE_ENV=development

# NOT exposed to client code, but exposed to backend;
# it does NOT start with QCLI_ prefix:
SOME_VAR=content

# this will be embedded into backend & client code,
# as it starts with QCLI_ prefix:
QCLI_SOME_VAR=content

import.meta.env.SOME_VAR // ❌ Not available in client code
import.meta.env.QCLI_SOME_VAR // ✅ Available in client code

DB_HOST=
DB_USER=
DB_PASSWORD=
DB_PORT=
STRIPE_API_KEY=
NODE_ENV=

build: {
  env: {
    /**
     * For security reasons, only variables with this prefix from the env files
     * and Node.js process.env will be exposed to the code shipped to the client.
     * The client app code includes Electron main & preload scripts, as they get
     * shipped to the client side as well.
     *
     * Such variables exposed to the client app code should not contain sensitive
     * information such as API keys.
     *
     * Avoid setting it to 'QUASAR_' so it won't conflict with
     * Quasar's own environment variables.
     *
     * Setting it to an empty string will default to
     * the default value (QCLI_).
     *
     * @default 'QCLI_'
     */
    clientPrefix?: string | string[];
    /**
     * Setting this prefix will filter out env files variables and Node.js process.env
     * variables that are exposed to the backend code (like the SSR server-side).
     *
     * Avoid setting it to 'QUASAR_' so it won't conflict with
     * Quasar's own environment variables.
     *
     * @default ''
     */
    backendPrefix?: string | string[];
    /**
     * Folder where Quasar CLI should look for .env* files.
     * Can be an absolute path or a relative path to project root directory.
     *
     * @default appPaths.appDir
     */
    folder?: string | string[];
    /**
     * Additional .env* files to be loaded.
     * Each entry can be an absolute path or a relative path to
     * quasar.config > build > folder.
     *
     * @example ['.env.somefile', '../.env.someotherfile']
     */
    file?: string | string[];
    /**
     * Filter the env files variables & Node.js process.env variables
     * that are exposed to the app code. This does not affects props
     * assigned directly to the quasar.config > build > define prop.
     */
    filter?: (
      env: Record<string, string>,
      type: "client" | "backend"
    ) => Record<string, string>;

    /**
     * Ignore auto-infering and declaring type for these variables;
     * Variables can come from process.env (terminal variables) or
     * dotenv files or quasar.config > build > define/defineEnv.
     *
     * Use the full variable name as transformed in the code.
     * @example 'all' to ignore all variables
     * @example ['import.meta.env.OTHER_VAR', '__SOME_VAR__'] to ignore specific variables.
     */
    ignoreType?: "all" | string[];
  }
}

build: {
  env: {
    filter (
      originalEnv,
      type // "client" | "backend"
    ) {
      const newEnv = {}
      for (const key in originalEnv) {
        if (/* ...decide if it goes in or not... */) {
          newEnv[ key ] = originalEnv[ key ]
        }
      }

      // remember to return your processed env
      return newEnv
    }
  }
}

"quasarCli": {
  "quasarConfEnv": {
    /**
     * Setting this prefix will filter out env files variables and Node.js process.env
     * variables that are exposed.
     *
     * Avoid setting it to 'QUASAR_' so it won't conflict with
     * Quasar's own environment variables.
     *
     * @default ''
     */
    "prefix": "",
    /**
     * Folder where Quasar CLI should look for .env* files.
     * Can be an absolute path or a relative path to project root directory.
     *
     * @default root project file dir
     */
    "folder": "."
    /**
     * Additional .env* files to be loaded.
     * Each entry can be an absolute path or a relative path to
     * quasar.config > build > folder.
     *
     * @example ['.env.somefile', '../.env.someotherfile']
     */
    "file": []
  }
}

import { defineConfig } from '#q-app'

export default defineConfig(ctx => {
  return {
    build: {
      filenameBasedRouting: import.meta.env.MY_BOOL // inferred as boolean already
    }
  }
})