Quasar CLI with Vite - @quasar/app-vite

Convert project to Quasar CLI with Vite

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

WARNING

Quasar CLI with Vite (@quasar/app-vite) is currently in BETA. Specifications may slightly change until the stable release.

1. Create a Quasar CLI with Vite project folder:

$ yarn create quasar
# or:
$ npm init quasar

# pick "App with Quasar CLI", "Quasar v2", "Quasar App CLI with Vite"

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-cordova
  • /src-capacitor
  • /src-electron
  • /src-pwa (with small caveat; see next steps)
  • /src-ssr (with small caveat; see next steps)
  • /src-bex Nope. Don’t!

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

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

// replace with:

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

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

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

3. Check the new quasar.config.js

There are property changes in build, 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 Vite architecture.

4. Browser compatibility

A Quasar CLI with Webpack project relies on /package.json > browserslist to specify which browsers you are targetting. That property no longer has any meaning. Projects managed by Quasar CLI with Vite work completely different and you might want to check the Browser Compatibility page.

  • Delete /src-ssr/directives folder (if you have it) – it no longer serves any purpose; check Vue SSR Directives page
  • Port the /src-ssr/production-export.js file to /src-ssr/server.js; Make sure to read about the SSR Webserver first

More info: Configuring SSR

  • Quasar CLI with Webpack relies on quasar.config.js > manifest to specify the manifest, but you will need to use /src-pwa/manifest.json to declare it for Quasar CLI with Vite. After declaring the manifest in /src-pwa/manifest.json, delete quasar.config.js > manifest section.
  • There were also some props in quasar.config.js that are no longer available. Most notably: metaVariables, metaVariablesFn. Simply edit /index.html and add those tags directly there.
<!-- index.html -->
<head>
  <% if (ctx.mode.pwa) { %>
    <!-- Define your custom PWA-related meta/link tags here. -->
  <% } %>
</head>

More info: PWA - Preparation

The BEX mode differs quite a lot. The PWA mode in a Quasar CLI with Vite project supports PWA manifest v3 and multiple content scripts. You will have to manually port over your BEX files to the new architecture, which should be fairly easy though.

It’s best to $ quasar mode add bex, pick your preferred PWA manifest version (v2 or v3) and port your BEX.

More info: Preparation and folder structure and Configuring BEX.

8. And we’re done

$ quasar dev
$ quasar build
查看更多？
Quasar CLI（Vite）
quasar.config.js
Quasar CLI（Vite）
浏览器兼容性
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。