Hot Reload doesn't work when creating project with TypeScript support (Class based)

Hot reload does not work when you create new project with quasar create with TypeScript support. Tried creating a new project without TypeScript and hot reload work out-of-the-box as expected.

To Reproduce Steps to reproduce the behavior:

1. quasar create test-quasar-ts
2. quasar dev
3. Edit index.vue and save
4. Observe the change in browser - nothing changes

Expected behavior Hot reload should work and reflect changes on the fly

Platform (please complete the following information): Quasar Version: 1.2.1 @quasar/app Version: 2.0.4

Quasar mode:

• [ X ] SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

Tested on:

• [ X ] SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

OS: Windows_NT(10.0.18363) - win32/x64 Node: 14.17.0 NPM: 7.7.6 Yarn: 1.21.1 Browsers: Chrome Version 92.0.4515.159 (Official Build) (64-bit) iOS: Android: Electron:

Additional context It works fine when I do quasar create but not selecting TypeScript support.

[rstoenescu]

Seems that my PR has been merged and the vue-loader team has released a new version. So upgraded to the new vue-loader in “@quasar/app” v3.1.9 – highly recommended for those using the Class API.

Enjoy!

[dickerpulli]

I can confirm that issue. I also have created a new quasar app with typescript and class based. Hot reload does not work in browser. The console (quasar dev) is fine, it recompiles, but the browser doesn’t recognize.

Changes in the created Index.vue are not reloaded. Do the same change on an composition api based created app works well.

Maybe related to this? https://github.com/vuejs/vue-class-component/issues/521