import { defineConfig } from '#q-app/wrappers'

export default defineConfig((ctx) => { // can be async too
  console.log(ctx)

  // Example output on console:
  /*
  {
    dev: true,
    prod: false,
    mode: { spa: true },
    modeName: 'spa',
    target: {},
    targetName: undefined,
    arch: {},
    archName: undefined,
    debug: undefined
  }
  */

  // context gets generated based on the parameters
  // with which you run "quasar dev" or "quasar build"

  return {
    // ... your config
  }
})

{
  extras: [
    ctx.mode.pwa // we're adding only if working on a PWA
      ? 'roboto-font'
      : null
  ]
}

{
  css: [
    ctx.mode.spa ? 'app-spa.sass' : null, // looks for /src/css/app-spa.sass
    ctx.mode.cordova ? 'app-cordova.sass' : null  // looks for /src/css/app-cordova.sass
  ]
}

{
  devServer: {
    port: ctx.mode.spa
      ? 8000
      : (ctx.mode.pwa ? 9000 : 9090)
  }
}

import { defineConfig } from '#q-app/wrappers'

export default async defineConfig((ctx) => {
  const data = await someAsyncFunction()
  return {
    // ... use "data"
  }
})

// or:
export default defineConfig((ctx) => {
  return new Promise(resolve => {
    // some async work then:
    // resolve() with the quasar config
    resolve({
      //
    })
  })
})

import { defineConfig } from '#q-app/wrappers'

export default defineConfig((ctx) => {
  /* configuration options */
})

/**

 * Global CSS/Stylus/SCSS/SASS/... files from `/src/css/`,

 * except for theme files, which are included by default.
 */
css?: string[];

{
  css: [
    'app.sass', // referring to /src/css/app.sass
    '~some-library/style.css' // referring to node_modules/some-library/style.css
  ]
}

/** Boot files to load. Order is important. */
boot?: QuasarBootConfiguration;

interface BootConfigurationItem {
  path: string;
  server?: false;
  client?: false;
}

type QuasarBootConfiguration = (string | BootConfigurationItem)[];

/** Enable the preFetch feature. */
preFetch?: boolean;

/**

 * What to import from [@quasar/extras](https://github.com/quasarframework/quasar/tree/dev/extras) package.

 * @example ['material-icons', 'roboto-font', 'ionicons-v4']
 */
extras?: (QuasarIconSets | QuasarFonts)[];

/**

 * What Quasar language pack to use, what Quasar icon

 * set to use for Quasar components, etc.
 */
framework?: {
  /**

   * @see - QuasarConfOptions tab in API cards throughout the docs
   */
  config?: SerializableConfiguration<QuasarUIConfiguration>;
  /**

   * One of the Quasar IconSets

   *    * @see https://v2.quasar.dev/options/quasar-icon-sets

   *    * @example 'material-icons'
   */
  iconSet?: QuasarIconSets;
  /**

   * One of the Quasar language packs

   *    * @see https://v2.quasar.dev/options/quasar-language-packs

   *    * @example 'en-US'

   * @example 'es'
   */
  lang?: QuasarLanguageCodes;
  /**

   * Quasar CSS addons have breakpoint aware versions of flex and spacing classes

   *    * @see https://v2.quasar.dev/layout/grid/introduction-to-flexbox#flex-addons

   * @see https://v2.quasar.dev/style/spacing#flex-addons
   */
  cssAddon?: boolean;

  /**

   * Auto import - how to detect components in your vue files

   *   "kebab": q-carousel q-page

   *   "pascal": QCarousel QPage

   *   "combined": q-carousel QPage

   *    * @default 'kebab'
   */
  autoImportComponentCase?: "kebab" | "pascal" | "combined";
  /**

   * Auto import - which file extensions should be interpreted as referring to Vue SFC?

   *    * @default ['vue']
   */
  autoImportVueExtensions?: string[];
  /**

   * Auto import - which file extensions should be interpreted as referring to script files?

   *    * @default ['js', 'jsx', 'ts', 'tsx']
   */
  autoImportScriptExtensions?: string[];
  /**

   * Treeshake Quasar's UI on dev too?

   * Recommended to leave this as false for performance reasons.

   *    * @default false
   */
  devTreeshaking?: boolean;

  /**

   * Quasar will auto import components based on your usage.

   * But, in case you have a special case, you can manually specify Quasar components to be available everywhere.

   *    * An example case would be having custom component definitions with plain string templates, inside .js or .ts files,

   * in which you are using Quasar components (e.g. q-avatar).

   *    * Another example would be that dynamically rendering components depending on an API response or similar (e.g. in a CMS),

   * something like `<component :is="dynamicName">` where `dynamicName` is a string that matches a Quasar component name.

   *    * @example ['QAvatar', 'QChip']
   */
  components?: (keyof QuasarComponents)[];
  /**

   * Quasar will auto import directives based on your usage.

   * But, in case you have a special case, you can manually specify Quasar directives to be available everywhere.

   *    * An example case would be having custom component definitions with plain string templates, inside .js or .ts files,

   * in which you are using Quasar directives (e.g. v-intersection).

   *    * @example ['Intersection', 'Mutation']
   */
  directives?: (keyof QuasarDirectives)[];
  /**

   * Quasar plugins to be installed. Specify the ones you are using in your app.

   *    * @example ['Notify', 'Loading', 'Meta', 'AppFullscreen']
   */
  plugins?: (keyof QuasarPlugins)[];
}

/**

 * What Quasar CSS animations to import.

 * @example [ 'bounceInLeft', 'bounceOutRight' ]

 * */
animations?: QuasarAnimationsConfiguration | 'all';

import { ServerOptions as ViteServerOptions } from "vite";
import { Options as OpenOptions } from "open";
type DevServerOptions = Omit<ViteServerOptions, "open" | "https"> & {
  open?: Omit<OpenOptions, "wait"> | boolean;
  https?: ViteServerOptions["https"] | boolean;
};

/**

 * Vite "server" options.

 * Some properties are overwritten based on the Quasar mode you're using in order

 * to ensure a correct config.

 * Note: if you're proxying the development server (i.e. using a cloud IDE),

 * set the `public` setting to your public application URL.
 */
devServer?: DevServerOptions;

// opens Google Chrome
devServer: {
  open: {
    app: { name: 'google chrome' }
  }
}

// opens Firefox
devServer: {
  open: {
    app: { name: 'firefox' }
  }
}

// opens Google Chrome and automatically deals with cross-platform issues:
import open from 'open'

devServer: {
  open: {
    app: { name: open.apps.chrome }
  }
}

devServer: {
  vueDevtools: true
}

/** Build configuration options. */
build?: QuasarBuildConfiguration;

import { Plugin, UserConfig as ViteUserConfig } from "vite";
import { Options as VuePluginOptions } from "@vitejs/plugin-vue"

interface InvokeParams {
  isClient: boolean;
  isServer: boolean;
}

interface BuildTargetOptions {
  /**

   * @default ['es2022', 'firefox115', 'chrome115', 'safari14']
   */
  browser?: string[];
  /**

   * @example 'node20'
   */
  node?: string;
}

interface PluginEntryRunOptions {
  server?: boolean;
  client?: boolean;
}

type PluginEntry =
  | [pluginName: string, options?: any, runOptions?: PluginEntryRunOptions]
  | [pluginFactory: (options?: any) => Plugin, options?: any, runOptions?: PluginEntryRunOptions]
  | Plugin
  | null
  | undefined
  | false;

interface QuasarBuildConfiguration {
  /**

   * @example

   * {

   *   browser: ['es2022', 'firefox115', 'chrome115', 'safari14'],

   *   node: 'node20'

   * }
   */
  target?: BuildTargetOptions;
  /**

   * Extend Vite config generated by Quasar CLI.

   *    * You can either return overrides or directly modify the config object.

   *    * @example

   * ```js

   * // return overrides

   * extendViteConf: (config) => ({

   *   optimizeDeps: {

   *     include: ['some-package']

   *   }

   * })

   * ```

   *    * @example

   * ```js

   * // directly modify the config object

   * import { mergeConfig } from 'vite'

   * // ...

   * extendViteConf(config) {

   *   config.optimizeDeps = mergeConfig(config.optimizeDeps, {

   *     include: ['some-package']

   *   }, false)

   * }

   * ```
   */
  extendViteConf?: (
    config: ViteUserConfig,
    invokeParams: InvokeParams
  ) => ViteUserConfig | void;
  /**

   * Options to supply to @vitejs/plugin-vue

   *    * @see https://v2.quasar.dev/quasar-cli-vite/handling-vite#vite-vue-plugin-options
   */
  viteVuePluginOptions?: VuePluginOptions;
  /**

   * Vite plugins

   *    * @see https://v2.quasar.dev/quasar-cli-vite/handling-vite#adding-vite-plugins

   *    * @example

   * // ESM

   * import { somePlugin } from 'some-plugin'

   * // ...

   * [

   *   [ 'some-plugin', { ...pluginOptions... } ],

   *    *   // disable running on client or server threads (set server/client to false):

   *   [ 'some-plugin', { ...pluginOptions... }, { server: true, client: true } ],

   *    *   [ somePlugin, { ...pluginOptions... } ],

   *    *   // disable running on client or server threads (set server/client to false):

   *   [ somePlugin, { ...pluginOptions... }, { server: true, client: true } ],

   *    *   somePlugin({ ...pluginOptions... })

   * ]

   *    * @example

   * // CJS

   * [

   *   [ 'some-plugin', { ...pluginOptions... } ],

   *    *   // disable running on client or server threads (set server/client to false):

   *   [ 'some-plugin', { ...pluginOptions... }, { server: true, client: true } ],

   *    *   [ require('some-plugin'), { ...pluginOptions... } ],

   *    *   // disable running on client or server threads (set server/client to false):

   *   [ require('some-plugin'), { ...pluginOptions... }, { server: true, client: true } ],

   *    *   require('some-plugin')({ ...pluginOptions... })

   * ]
   */
  vitePlugins?: PluginEntry[];
  /**

   * @see https://v2.quasar.dev/quasar-cli-vite/handling-vite#folder-aliases

   *    * @example

   * {

   *   // import { ... } from 'locales/...'

   *   locales: path.join(__dirname, 'src/locales')

   * }
   */
  alias?: { [key: string]: string };
  /**

   * Configuration for TypeScript integration.
   */
  typescript?: {
    /**

     * Once your codebase is fully using TypeScript and all team members are comfortable with it,

     * you can set this to `true` to enforce stricter type checking.

     * It is recommended to set this to `true` and use stricter typescript-eslint rules.

     *      * It will set the following TypeScript options:

     * - "strict": true

     * - "allowUnreachableCode": false

     * - "allowUnusedLabels": false

     * - "noImplicitOverride": true

     * - "exactOptionalPropertyTypes": true

     * - "noUncheckedIndexedAccess": true

     *      * @see https://ts.nodejs.cn/docs/handbook/migrating-from-javascript.html#getting-stricter-checks
     */
    strict?: boolean;

    /**

     * Extend the generated `.quasar/tsconfig.json` file.

     *      * If you don't have dynamic logic, you can directly modify your `tsconfig.json` file instead.
     */
    extendTsConfig?: (tsConfig: TSConfig) => void;

    /**

     * Generate a shim file for `*.vue` files to process them as plain Vue component instances.

     *      * Vue Language Tools VS Code extension can analyze `*.vue` files in a better way, without the shim file.

     * So, you can disable the shim file generation and let the extension handle the types.

     *      * However, some tools like ESLint can't work with `*.vue` files without the shim file.

     * So, if your tooling is not properly working, enable this option.
     */
    vueShim?: boolean;
  };
  /**

   * Public path of your app.

   * Use it when your public path is something else,

   * like _“<protocol>://<domain>/some/nested/folder”_ – in this case,

   * it means the distributables are in _“some/nested/folder”_ on your webserver.

   *    * @default '/'
   */
  publicPath?: string;
  /**

   * Sets [Vue Router mode](https://router.vuejs.org/guide/essentials/history-mode.html).

   * History mode requires configuration on your deployment web server too.

   *    * @default 'hash'
   */
  vueRouterMode?: "hash" | "history";
  /**

   * Sets Vue Router base.

   * Should not need to configure this, unless absolutely needed.
   */
  vueRouterBase?: string;
  /**

   * Automatically open remote Vue Devtools when running in development mode.
   */
  vueDevtools?: boolean;
  /**

   * Should the Vue Options API be available? If all your components only use Composition API

   * it would make sense performance-wise to disable Vue Options API for a compile speedup.

   *    * @default true
   */
  vueOptionsAPI?: boolean;
  /**

   * Do you want to analyze the production bundles?

   * Generates and opens an HTML report.

   *    * @default false
   */
  analyze?: boolean;
  /**

   * Folder where Quasar CLI should generate the distributables.

   * Relative path to project root directory.

   *    * @default 'dist/{ctx.modeName}' For all modes except Cordova.

   * @default 'src-cordova/www' For Cordova mode.
   */
  distDir?: string;

  /**

   * Add properties to `process.env` that you can use in your website/app JS code.

   *    * @see https://v2.quasar.dev/quasar-cli-vite/handling-process-env

   *    * @example { SOMETHING: 'someValue' }
   */
  env?: { [index: string]: string | boolean | undefined | null };
  /**

   * Defines constants that get replaced in your app.

   * Unlike `env`, you will need to use JSON.stringify() on the values yourself except for booleans.

   * Also, these will not be prefixed with `process.env.`.

   *    * @example { SOMETHING: JSON.stringify('someValue') } -> console.log(SOMETHING) // console.log('someValue')
   */
  rawDefine?: { [index: string]: string | boolean | undefined | null };
  /**

   * Folder where Quasar CLI should look for .env* files.

   * Can be an absolute path or a relative path to project root directory.

   *    * @default project root directory
   */
  envFolder?: string;
  /**

   * Additional .env* files to be loaded.

   * Each entry can be an absolute path or a relative path to quasar.config > build > envFolder.

   *    * @example ['.env.somefile', '../.env.someotherfile']
   */
  envFiles?: string[];

  /**

   * Build production assets with or without the hash part in filenames.

   * Example: "454d87bd" in "assets/index.454d87bd.js"

   *    * When used, please be careful how you configure your web server cache strategy as

   * files will not change name so your client might get 304 (Not Modified) even when

   * it's not the case.

   *    * Will not change anything if your Vite config already touches the

   * build.rollupOptions.output.entryFileNames/chunkFileNames/assetFileNames props.

   *    * Gets applied to production builds only.

   *    * Useful especially for (but not restricted to) PWA. If set to false then updating the

   * PWA will force to re-download all assets again, regardless if they were changed or

   * not (due to how Rollup works through Vite).

   *    * @default true
   */
  useFilenameHashes?: boolean;

  /**

   * whether to inject module preload polyfill.

   * @default false
   */
  polyfillModulePreload?: boolean;
  /**

   * Ignores the public folder.

   * @default false
   */
  ignorePublicFolder?: boolean;

  /**

   * Prepare external services before `$ quasar dev` command runs

   * like starting some backend or any other service that the app relies on.

   * Can use async/await or directly return a Promise.
   */
  beforeDev?: (params: QuasarHookParams) => void;
  /**

   * Run hook after Quasar dev server is started (`$ quasar dev`).

   * At this point, the dev server has been started and is available should you wish to do something with it.

   * Can use async/await or directly return a Promise.
   */
  afterDev?: (params: QuasarHookParams) => void;
  /**

   * Run hook before Quasar builds app for production (`$ quasar build`).

   * At this point, the distributables folder hasn’t been created yet.

   * Can use async/await or directly return a Promise.
   */
  beforeBuild?: (params: QuasarHookParams) => void;
  /**

   * Run hook after Quasar built app for production (`$ quasar build`).

   * At this point, the distributables folder has been created and is available

   *  should you wish to do something with it.

   * Can use async/await or directly return a Promise.
   */
  afterBuild?: (params: QuasarHookParams) => void;
  /**

   * Run hook if publishing was requested (`$ quasar build -P`),

   *  after Quasar built app for production and the afterBuild hook (if specified) was executed.

   * Can use async/await or directly return a Promise.

   * `opts` is Object of form `{arg, distDir}`,

   * where “arg” is the argument supplied (if any) to -P parameter.
   */
  onPublish?: (ops: { arg: string; distDir: string }) => void;

  /**

   * Set to `false` to disable minification, or specify the minifier to use.

   * Available options are 'terser' or 'esbuild'.

   * If set to anything but boolean false then it also applies to CSS.

   * For production only.

   * @default 'esbuild'
   */
  minify?: boolean | 'terser' | 'esbuild';
  /**

   * Minification options for html-minifier-terser.

   *    * @see https://github.com/terser/html-minifier-terser?tab=readme-ov-file#options-quick-reference for complete list of options

   *    * @default

   *  {

   *    removeComments: true,

   *    collapseWhitespace: true,

   *    removeAttributeQuotes: true,

   *    collapseBooleanAttributes: true,

   *    removeScriptTypeAttributes: true

   *  }
   */
  htmlMinifyOptions?: HtmlMinifierOptions;
  /**

   * If `true`, a separate sourcemap file will be created. If 'inline', the

   * sourcemap will be appended to the resulting output file as data URI.

   * 'hidden' works like `true` except that the corresponding sourcemap

   * comments in the bundled files are suppressed.

   * @default false
   */
  sourcemap?: boolean | 'inline' | 'hidden';
}

/**

 * Use this property to change the default names of some files of your website/app if you have to.

 * All paths must be relative to the root folder of your project.

 *  * @default

 * {

 *  rootComponent: 'src/App.vue',

 *  router: 'src/router/index',

 *  store: 'src/stores/index',

 *  pwaRegisterServiceWorker: 'src-pwa/register-service-worker',

 *  pwaServiceWorker: 'src-pwa/custom-service-worker',

 *  pwaManifestFile: 'src-pwa/manifest.json',

 *  electronMain: 'src-electron/electron-main',

 *  bexManifestFile: 'src-bex/manifest.json'

 * }
 */
sourceFiles?: {
  rootComponent?: string;
  router?: string;
  store?: string;
  pwaRegisterServiceWorker?: string;
  pwaServiceWorker?: string;
  pwaManifestFile?: string;
  electronMain?: string;
  bexManifestFile?: string;
}

/** Add variables that you can use in /index.html. */
htmlVariables?: Record<string, any>;

import { defineConfig } from '#q-app/wrappers'

export default defineConfig((ctx) => {
  return {
    htmlVariables: {
      myVar: 'some-content'
    }
  }
})

<%= myVar %>
<% if (myVar) { %>something<% } %>

htmlVariables: {
  title: 'test name',
  some: {
    prop: 'my-prop'
  }
}

<%= title %>
<%= some.prop %>
<% if (some.prop) { %><%= title %><% } %>