This page will guide you on how to convert a Quasar CLI with Webpack (
@quasar/app-vite) project into a Quasar CLI with Webpack one (
1. Create a Quasar CLI with Webpack project folder:
$ yarn create quasar # or: $ npm init quasar # 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.
2. Copy folders from original folder
From your original project folder, copy these as they are:
- /src (with small caveat; see next steps)
- /src-ssr (with small caveat; see next steps)
/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>
// Change: history: createHistory(process.env.VUE_ROUTER_BASE) // Into: history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE)
3. Check the new quasar.config.js
There are property changes in
devServer, and all Quasar Modes (pwa, ssr, etc). The props are detailed in quasar.config.js page. You will have to manually port your configuration to the Quasar CLI with Webpack architecture.
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.
5. SSR related
/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
6. PWA related
/src-pwa/manifest.json has no meaning for a Quasar CLI with Webpack project. You will need to use
quasar.config.js > manifest to declare it there. After that then delete the
quasar.config.js > pwa >
More info: Configuring PWA
7. BEX related
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.
8. And we’re done
$ quasar dev $ quasar build