Quasar and Vite - Frontend Application Development at Light Speed

This week notes the accomplishment of a major milestone in Quasar's roadmap. The integration of Vite as a driver of the Quasar CLI, and as a much better alternative to the slower and more complicated Webpack based CLI.

Quick Introduction Video

Why Vite?

If you haven't heard about Vite yet and why it is so good, Vite has the following main selling points:

(from the Vite docs)

A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).

A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

In other words, the main goal Evan You (creator of Vue) had for creating Vite (pronounced like veet) was to majorly improve the developer experience. He saw that the current process of bundling and then loading the application into the browser and developing with Hot-Module-Replacement (HMR) could be improved upon with the new ES Module resolution system available in all browsers.

That is the TLDR version. If you'd like, you can also read the much more technical reasons.

Bottom line, the avoidance of the bundling or packing step for the initial build, also during HMR, saves a ton of time, even with the smallest of projects (see below). But, this advantage is especially noticeable, once your project gets even remotely bigger.

Initial Loading of a new Quasar project with Webpack

Initial Loading of a new Quasar project with Vite

Ok. The difference with an initial project isn't so predominant, but it is there. Think about this though. Once your project starts growing, the Vite-based CLI's performance in building your app stays about the same or will only slow a little for the initial startup. The Webpack performance will degrade much worse as your project size grows. In other words, what you see here as the initial startup speed is about what you'll have for any size project. On top of that, any updates from HMR will be instantaneous with Vite. With Webpack, this performance also degrades with the size of your project.

It was clear to the team instantly, when Vite came out, that Quasar would need to integrate it. So, it wasn't a matter of "If", but rather "When?". It was just a matter of time, dev availability with Razvan and our prerogatives for it to happen. Our first major goal was to get Quasar onto Vue 3. That happened last year. All the while, Vite was getting better and more stable. And this year, Quasar now has a Vite based CLI.

How cool is that? 🤩

Getting Started

If you'd like to just get started with Vite in a new project, all you have to do is run...

$ yarn create quasar
# or:
$ npm init quasar

Note: The command quasar create is no longer usable for a Quasar project with the new CLI (>1.3.0).

NOTE2: the Vite CLI was still in BETA at the time this article was published. So, it is not production ready, if it is still in beta or RC status!!!

While running the command above, the creation process will pose question to you for the project creation. Answer the questions as best you can. Hit enter for the defaults (except for the Vite CLI), if you are uncertain what to answer. Once the creation process is done, navigate to the newly created project folder and run...

$ quasar dev

And off you go.. with Lightning fast development at your fingertips!!!

Migration

Maybe you have a Quasar project and wish to move it to the new Vite CLI. If that is the case, then let's get you up to.....Vite, with the official migration guide.

Roughly, the migration guide takes you through the following steps:

Create a new project with the newest version of the (global) Quasar CLI
Copy specific folders into the new project from your old project, also doing some small edits on specific files.
Update the quasar.config.js file notice it's changes from quasar-conf.js) with the new settings, should you need them.
Update package.json to remove the browserlist entry (if you want). It is no longer valid and not needed, at least for Vite.
Delete a folder for SSR and move another.
For PWA, you'll need to move your manifest to quasar.config.js
If you are using BEX mode, you'll also need to port over your manifest files manually.

So, not too much work necessary to get a much better DX.

Again, more details can be found in the migration guide.

That's it!

Let us know in the comments about what you think! Is Vite with Quasar awesome or what?

Keep in touch with Quasar news.

Quasar on Twitter
Quasar on Facebook
Quasar on Discord
Quasar on Github

Top comments (7)

Roland Doda • Mar 15 '22

Hi Scott thanks for the article.

I am seeing the docs on "Convert project to Quasar CLI with Vite" and in the second step it says:

However, I do have a Vue 3 project created a while ago with Quasar CLI and I don't have the other folders (/src-cordova, /src-capacitor etc) except the /src and this is a bit confusing for me because I want the app to be build for mobile as well.

Can you expland on this please?
Should I create a /src-cordova or src-capacitor on the Vite version folder structure?

Scott Molinari • Mar 15 '22 • Edited

No. You only copy over those folders, if you had been using those modes in Quasar. If you haven't used any of those modes, you don't need to worry about the folders. You just don't have any.

Roland Doda • Mar 16 '22

Yeah I figured it out. I started converting the app to CLI with Vite and the most notable issues are:

require cannot be used. I used require for images like <img :src="require('./my-image.png')" />
importing components should have .vue extenstion. That was really tedious to fix since my IDE automatically import components as import MyComp from 'MyComp' but with Vite is required to have the .vue extension so import MyComp from 'MyComp.vue'