Support for Vite.js

[philfontaine]

Is your feature request related to a problem? Please describe. I haven't used vite.js myself, but it does seem like a killer feature. Right now, it takes me about 25 seconds to launch my dev server with quasar dev, compared to probably a couple hundred milliseconds for vite.js.

It seems like this new tool will probably become more popular than vue-cli (I do not see why it would not).

Describe the solution you'd like Either:

• Allow quasar-cli to use vite.js under the hood
• Add docs on how to use vite.js (like the current docs on how to use quasar with vue-cli).

[aislanmaia]

Thats should be killer feature for Quasar v2.

Something like this:

quasar dev -m spa --devserver=[vite|webpack]

or

quasar build -m spa --bundler=[vite|webpack]

[IlCallo]

Quasar rely on many webpack loaders, I don't think we'll be able to support Vite soon. But if anyone wants to give a try, we won't complain :) Just know it's a really hard task

[pjar]

@IlCallo Thanks for the heads up for anyone who might be pondering to commit time for this. Do you think Quasar team could prepare an overview of the reliance on webpack loaders? That could save hours of detective work.

[hawkeye64]

@pjar https://github.com/quasarframework/quasar/issues/8102

[hawkeye64]

I have been using vite quite a bit on a separate project. So far, I have around 105 pages. It takes around 11 seconds to compile those. If I kill vite and restart it, it's in the 400ms range. It's doing some caching, but it comes at a cost. Sometimes when I make a change to a source file I am debugging, the changes don't show up. Even after refreshing the browser. I mean, after refreshing the browser, I see my changes briefly, but then they revert back to the cache. And, many times, I am unable to set a breakpoint in the browser. It just won't let me. The line numbers get greyed out (disabled). So, I set a debugger statement in my souce, and it breaks in the browser. But, again, it's showing me old (cached) source so you don't exactly know which line you are on when stepping through.

This is my biggest deterrent right now. Because of the way Vite caches your build, source maps get messed up and I can't even think of the number of times I have yelled at vite for this.

In all, vite is fast, but it is still young and going through some major teething issues. I am sure Evan will get those resolved, with enough feedback. But, he's splitting his time over several high-level projects for the Vue eco-sphere, so I wouldn't expect things to be fixed sooner, than later.

[hawkeye64]

Going to put this in as a screenshot so you know it wasn't tinkered with. This is after a reboot, so vite rebuilds it's cache:

[Rackar]

Going to put this in as a screenshot so you know it wasn't tinkered with. This is after a reboot, so vite rebuilds it's cache:

I hate the cache things, too. But how about webpack cost, when vite used 32s ?

[hawkeye64]

@Rackar Stay tuned. After Quasar v2 is released, we'll be tackling Webpack 5 and also looking into how we can leverage Vite (if at all possible)

[armenr]

+1 to vite. So dope. Would make Quasar even better than it already is (and it's the best!).

[dodanex]

I subscribe. Vite.js and Quasar will be a killer combination. I was a Quasar user before Vite and Vue 3. But now I use Vite because is the fastest, simple to use, lightweight and awesome. I will use Quasar components with Vite when Quasar will suport it.

[ekoeryanto]

Ah, I just created a repo for this https://github.com/ekoeryanto/vite-quasar

I tried last weeks integrating quasar with vite ssr with no luck.

Demo: https://vite-quasar.netlify.app/

[rstoenescu]

Vite.js support is officially scheduled. https://roadmap.quasar.dev Closing this ticket in the meantime.

[ekoeryanto]

great to know that, @rstoenescu. but I am just experiment the possibility eh, dont forget cherry-pick component style import, for now i need to do this hack https://github.com/ekoeryanto/vite-quasar/commit/ce68c087cc06ac0eace92bad7f2d89b7af82dd65

vs

[yusufkandemir]

@quasar/vite-plugin⚡ got released. 🚀

There are also plans for "a new CLI for Quasar based on Vite.js instead of Webpack (will have its own life along with the current Webpack-based CLI)", it's on the roadmap.

[AlphaJuliettOmega]

@yusufkandemir do you perhaps know anything about the Vite + SSR support?

The Vite plugin is really nice but there's a note on the NPM page for it that says Quasar + Vite + SSR isn't supported, even though it seems to work locally: https://www.npmjs.com/package/@quasar/vite-plugin

edit: commented in this thread because it's most closely related to this ticket and I can't find any mention of SSR on the roadmap you linked above

[yusufkandemir]

@AlphaJuliettOmega see https://quasar.dev/start/vite-plugin

Warning! Limitation ahead:

• Are you sure that you’ve landed correctly? This page will teach you to use our Vite plugin, but it’s not the same as our full-fledged Quasar CLI with Vite under the hood.
• SSR builds with our Vite plugin are not supported (only through our Quasar CLI with Vite).

That "a new CLI for Quasar based on Vite.js instead of Webpack" mentioned in my previous comment got released(@quasar/app-vite). You can start using it by creating a new project using yarn create quasar/npm init quasar, then choose Vite when asked.

[MtDalPizzol]

Will the Vite plugin be able to SSR or this will only be possible through the CLI?

I'm using Laravel with Inertia.js, which has it's on SSR server and I'm just using the Quasar UI Components...

[TobyMosque]

Will the Vite plugin be able to SSR or this will only be possible through the CLI?

I'm using Laravel with Inertia.js, which has it's on SSR server and I'm just using the Quasar UI Components...

You would ask to the InertiaJS guys if them supports Vite + SSR.

[makroxyz]

Will the Vite plugin be able to SSR or this will only be possible through the CLI?

I'm using Laravel with Inertia.js, which has it's on SSR server and I'm just using the Quasar UI Components...

Since inertia doesn't work with vue-router... Can I ask you how do you use inertia Link in q-item or q-breadcrumbs-el?

10519 (see last comment)

[MtDalPizzol]

You would ask to the InertiaJS guys if them supports Vite + SSR.

Yes, since Vite is the default bundler for Laravel now, it works just fine with Inertia.js. By the way, Laravel starter kits like Breeze and Jetstream are already running Inertia.js with SSR like a charm.

Since inertia doesn't work with vue-router... Can I ask you how do you use inertia Link in q-item or q-breadcrumbs-el?

10519 (see last comment)

Well, what I've being doing is to simply wrap things like <q-btn /> with an Inertia.js <Link />. I know that this approach will probably have some issues depending on the component being wrapped, but it has served it's purpose for the use cases I had till now.

Another approach would be to use the as property of Inertia <Link />, which enables you to tell Inertia.js which component should be used to render the link. Like this:

<Link as="q-item" :href="url">
   Item text
</Link>

I have a starter kit project for Laravel that uses Quasar and SSR is the missing piece on that. Hope we can figure it out.

[MtDalPizzol]

BTW... Quasar is working fine with Vite and Inertia without SSR. But if you try to build with SSR, there's a bunch of problems that seams to be related with Node ESM system, like extra packages not being found and stuff like that. I assumed that this is expected, since the docs mention that SSR via the Vite plugin is not supported yet.

[mpont91]

Hey @MtDalPizzol I'm having the same issue... Trying to work with Laravel + Inertia SSR + Quasar, but same problem, Quasar SSR not working... Have you find some solution or workaround?

I created a repository showing the problem, if you have time and want to help you can do some PR solving the problem.

https://github.com/mpont91/laravel-inertia-ssr-quasar

[MtDalPizzol]

@mpont91 Still no luck. I'm waiting till the notice on the Vite Plugin docs for SSR support goes away. =/