Configuring quasar.conf.js     

Quasar Starter Kit makes use of some awesome tools under the cover, like Webpack. Fortunately, the complexity of configuring the underlying tools is managed by Quasar CLI which does the heavy lifting for you. As a result, you don’t even need to know Webpack in order to use Quasar.

So what can you configure through /quasar.conf.js?

You’ll notice that changing any of these settings does not require you to manually reload the dev server. Quasar detects if the changes can be injected through Hot Module Reload and in case it can’t, it will reload the dev server for you. You won’t lose your development flow as you will just sit back while Quasar CLI quickly takes care of it.

/quasar.conf.js is run by the Quasar CLI build system, so this code runs under Node directly, not in the context of your app. So you can require modules like ‘fs’, ‘path’, ‘webpack’ and so on. Make sure the ES6 features that you want to write this file with are supported by the installed version of your Node (which should be >= 8.9.0).


You’ll notice that /quasar.conf.js exports a function that takes a ctx (context) parameter and returns an Object. This allows you to dynamically change your website/app config based on this context:

module.exports = function (ctx) {

// Example output on console:
dev: true,
prod: false,
theme: { mat: true },
themeName: 'mat',
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"

What this means is that, as an example, you can load a font when building with Quasar Material theme, and pick another one for Quasar iOS theme.

module.exports = function (ctx) {
extras: [
? 'roboto-font' // we're building with Material theme
: null // we're not building with Material theme, so it's iOS theme

Or you can use a global CSS file for SPA mode and another one for Cordova mode while avoiding loading any such file for the other modes.

module.exports = function (ctx) {
css: [ ? 'app-spa.styl' : null, // looks for /src/css/app-spa.styl
ctx.mode.cordova ? 'app-cordova.styl' : null // looks for /src/css/app-cordova.styl

Or you can configure the dev server to run on port 8000 for SPA mode, on port 9000 for PWA mode or on port 9090 for the other modes:

module.exports = function (ctx) {
devServer: {
? 8000
: (ctx.mode.pwa ? 9000 : 9090)

The possibilities are endless.

Options to Configure

Let’s take each option one by one:

cssArrayGlobal CSS/Stylus/… files from /src/css/, except for themes files which are included by default. Example: [‘app.styl’] (referring /src/css/app.styl)
extrasArrayWhat to import from quasar-extras package. Example: [‘material-icons’, ‘roboto-font’, ‘ionicons’]
supportIEBooleanAdd support for IE11+.
frameworkObject/StringWhat Quasar components/directives/plugins to import, what Quasar I18n language pack to use, what icon set to use for Quasar components. Example: { components: [‘QBtn’, ‘QIcon’], directives: [‘TouchSwipe’], plugins: [‘Notify’], iconSet: ‘fontawesome’, i18n: ‘de’ }. Note that for iconSet to work, you also need to tell Quasar to embed that icon pack through extras prop.
animationsObject/StringWhat CSS animations to import. Example: [‘bounceInLeft’, ‘bounceOutRight’]
devServerObjectDev server options. Some properties are overwritten based on the Quasar mode you’re using in order to ensure a correct config.
buildObjectBuild configuration options. See section below.
cordovaObjectCordova specific config.
pwaObjectPWA specific config.
electronObjectElectron specific config.

DevServer Property

Take a look at full list of options. Some are overwritten by Quasar CLI based on “quasar dev” parameters and Quasar mode in order to ensure a correct setup.

Most used properties are:

portNumberPort of dev server
hostStringLocal IP/Host to use for dev server
openBooleanOpen up browser pointing to dev server address automatically. Applies to SPA and PWA modes.

Build Property

extendWebpack(cfg)FunctionExtend Webpack config generated by Quasar CLI.
publicPathStringPublic path of your app. By default, it uses the root. 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.
vueRouterModeStringSets Vue Router mode: ‘hash’ or ‘history’. Pick wisely. History mode requires configuration on your deployment web server too.
useNotifierBooleanUse native OS notification to tell dev/build outcome or when your code has linting issues while developing. Useful if you’re not keeping an eye on the terminal console. Some OSes might not support this though.
htmlFilenameStringDefault is ‘index.html’.
productNameStringDefault value is taken from package.json > productName field.
distDirStringFolder where Quasar CLI should generate the distributables. Relative path to project root directory. Default is ‘dist/{ctx.modeName}-{ctx.themeName}’. Applies to all Modes except for Cordova (which is forced to src-cordova/www).
devtoolStringSource map strategy to use.
envObjectAdd properties to process.env that you can use in your website/app JS code. Each property needs to be JSON encoded. Example: { SOMETHING: JSON.stringify(‘someValue’) }.
gzipBooleanGzip the distributables. Useful when the web server with which you are serving the content does not have gzip.
scopeHoistingBooleanDefault: true. Use Webpack scope hoisting for slightly better runtime performance.
analyzeBoolean/ObjectShow analysis of build bundle with webpack-bundle-analyzer. If using as Object, it represents the webpack-bundle-analyzer config Object.
vueCompilerBoolean(Quasar v0.15.7+) Include vue runtime + compiler version, instead of default Vue runtime-only

The following properties of build are automatically configured by Quasar CLI depending on dev/build commands and Quasar mode. But if you like to override some (make sure you know what you are doing), you can do so:

extractCSSBooleanExtract CSS from Vue files
sourceMapBooleanUse source maps
minifyBooleanMinify code (html, js, css)
webpackManifestBooleanImproves caching strategy. Use a webpack manifest file to avoid cache bust on vendor chunk changing hash on each build.

If, for example, you run “quasar build –debug”, sourceMap and extractCSS will be set to “true” regardless of what you configure.

Example setting env for dev/build

build: {
? { // so on dev we'll have
API: JSON.stringify('')
: { // and on build (production):
API: JSON.stringify('')

Then in your website/app you can access process.env.API and it’s gonna point to one of those two links above, based on dev or production build type.

You can even go one step further. Supply it with values taken from the quasar dev/build env variables:

# we set an env variable in terminal
$ quasar build

# then we pick it up in /quasar.conf.js
build: {
? { // so on dev we'll have
API: JSON.stringify('https://dev.'+ process.env.MY_API)
: { // and on build (production):
API: JSON.stringify('https://prod.'+ process.env.MY_API)

Extending Webpack Config Object

This is achieved through build > extendWebpack() Function. Example adding a Webpack loader.

// quasar.conf.js

build: {
extendWebpack (cfg) {
// we make in-place changes
test: /\.json$/,
loader: 'json-loader'

// no need to return anything