Why donate
API Explorer
Upgrade guide
NEW!
The quasar.config file
Convert to CLI with Webpack
Browser Compatibility
Supporting TypeScript
Directory Structure
Commands List
CSS Preprocessors
Routing
Lazy Loading - Code Splitting
Handling Assets
Boot Files
Prefetch Feature
API Proxying
Handling Webpack
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 Webpack - @quasar/app-webpack
Convert project to Quasar CLI with Webpack

This page will guide you on how to convert a Quasar CLI with Vite (@quasar/app-vite) project into a Quasar CLI with Webpack one (@quasar/app-webpack).

Step 1: Create a Quasar CLI with Webpack project folder:


$ yarn create quasar
# then pick "App with Quasar CLI", "Quasar v2", "Quasar App CLI with Webpack"

There are significant changes to the root files so it’s easier to generate a new project folder rather than explaining each of the many changes.

Step 2: Copy folders from original folder

From your original project folder, copy these as they are:

  • /src (with small caveat; see next steps)
  • /src-cordova
  • /src-capacitor
  • /src-electron
  • /src-pwa
  • /src-ssr (with small caveat; see next steps)
  • /src-bex Nope. Don’t!

Also move /index.html to /src/index.template.html. And make the following change:

<!-- quasar:entry-point -->

// replace with:

<!-- DO NOT touch the following DIV -->
<div id="q-app"></div>

Also, edit /src/router/index.js:

// old way
history: createHistory(process.env.VUE_ROUTER_BASE)

// new way
history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE)

Step 3: Check the new quasar.config file

There are property changes in build, devServer, and all Quasar Modes (pwa, ssr, etc). The props are detailed in the quasar.config file page. You will have to manually port your configuration to the Quasar CLI with Webpack architecture.

Step 4: Browser compatibility

A Quasar CLI with Webpack project relies on /package.json > browserslist to specify which browsers you are targetting. More info: Browser Compatibility page.

Port the /src-ssr/server.js to /src-ssr/production-export.js file. Make sure to read about the SSR Production Export first. The production-export.js is essentially default exporting the listen() method from src-ssr/server.js. All the other functionality cannot be ported over.

More info: Configuring SSR

The /src-pwa/manifest.json has no meaning for a Quasar CLI with Webpack project. You will need to use quasar.config file > manifest to declare it there. After that then delete the /src-pwa/manifest.json file.

Also check quasar.config file > pwa > metaVariables and metaVariablesFn.

More info: Configuring PWA

The BEX mode differs quite a lot. The PWA mode in a Quasar CLI with Webpack project does NOT supports PWA manifest v3 and multiple content scripts. You will have to manually port over your BEX files to the new architecture.

It’s best to $ quasar mode add bex and port your BEX.

More info: Preparation and folder structure and Configuring BEX.

Step 8: And we’re done

$ quasar dev
$ quasar build