Why donate
API Explorer
Upgrade guide
NEW!
The quasar.config file
Convert project to CLI with Vite
Browser Compatibility
Supporting TypeScript
Directory Structure
Commands List
CSS Preprocessors
Routing
Lazy Loading - Code Splitting
Handling Assets
Boot Files
Prefetch Feature
API Proxying
Handling Vite
Handling process.env
State Management with Pinia
State Management with Vuex
Linter
Testing & Auditing
Developing Mobile Apps
Ajax Requests
Opening Dev Server To Public
Quasar CLI with Vite - @quasar/app-vite
Browser compatibility

In order to configure the browser compatibility for your app, you will need to edit the /quasar.config file:

/quasar.config file

build: {
  target: {
    browser: [ 'es2022', 'firefox115', 'chrome115', 'safari14' ],
    node: 'node20'
  }
}

Based on the Quasar Mode that you will be using (SPA/SSR/PWA/Electron/… etc) you will have client-side files (that run in the browser) and possibly Node.js running files. This is what the two keys of target Object above are for.

Also, independent of this configuration, you need to decide if you want the module preload polyfill since all the script tags will be injected as modules. By default, the polyfill is NOT included:

/quasar.config file

build: {
  polyfillModulePreload: false
}

Furthermore, based on your /postcss.config.cjs file content, your CSS will also pass through autoprefixer for which you can configure the browser levels that you are interested in:

/postcss.config.cjs

require('autoprefixer')({
  overrideBrowserslist: [
    'last 4 Chrome versions',
    'last 4 Firefox versions',
    'last 4 Edge versions',
    'last 4 Safari versions',
    'last 4 Android versions',
    'last 4 ChromeAndroid versions',
    'last 4 FirefoxAndroid versions',
    'last 4 iOS versions'
  ]
})

More info on how to specify autoprefixer browser ranges: browserslist.