HMR on Vite based apps

Is it possible to use the HMR enabler in Vite based projects?

Useing the app itself is unreleated to the packer used.

However, the HMR support of vite works a bit different to the one of Webpack. I tried it yesterday and failed so far: Vite does not create anything in js folder that would allow the browser to know the location of the Vite/Webpack server to query for updates. You might be able to use a reverse proxy to map that in some way but I did not find a way to do so.

Honestly, Vite’s main focus is a bit different from the one used in Nextcloud, and this makes it somewhat complicated to use (in my personal experience).

Just my 50ct. If someone has it running, I am open to be corrected.

Alright, aside from HMR, which bundler and which Vue version are you Nextcloud people using yourself nowadays when developing new NC apps. IIRC I saw a post where Vite was mentioned as the recommended bundler nowadays, I guess in combination with Vue 3? Are there any plans to update the official tutorials to reflect this?

Well… about Webpack vs Vite, I had a discussion with one person from NC and the answer is not trivial. Both have their individual benefits and drawbacks. There is no hard connection between Vue and the bundler in place.

One has to understand that Vite is the new guy in the block and many people want to give it a try. This led to the effect that the Vite nextcloud configuration is much more modern and advanced than the webpack configuration provided by nextcloud.

About Vue version: Some apps have already been ported to Vue3 many (especially community) are running on Vue2. Migration is undergoing and will probably hit in the next major release I guess. It is less a question about new apps but about migration, though. The number of new apps is rather small compared to the total number of apps.


Personally as maintainer of Cookbook, I use Vue2 and consider migrate from Webpack to Vite but I am not finally decided on that. After some issues have been resolved and PRs merged, the plan is to migrate to Vue3.