Quasar/app-vite doesn't support latest @vue/devtools

[veitbjarsch]

What happened?

When upgrading @vue/devtools to the latest version (v7.0.10) I can't start the dev mode anymore.

Reason: quasar/app-vite tries to run the bin.js file, which isn't present anymore in the latest version of @vue/devtools. The code that tries to execute the file can be found here: https://github.com/quasarframework/quasar/blob/492b31bfd1b98e0831eb4eda72dc947fcb205725/app-vite/lib/cmd/dev.js#L96-L105

What did you expect to happen?

Quasar should work with the latest version of vue devtools.

Reproduction URL

https://github.com/quasarframework/quasar/blob/492b31bfd1b98e0831eb4eda72dc947fcb205725/app-vite/lib/cmd/dev.js#L96-L105

How to reproduce?

1. Install latest @vue/devtoold (v7.0.10)
2. Try to run quasar dev --devtools -m cordova -T android
3. Run will fail

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Cordova Mode

Platforms/Browsers

Android

Quasar info output

Operating System - Windows_NT(10.0.22621) - win32/x64
NodeJs - 20.10.0

Global packages
  NPM - 10.2.3
  yarn - Not installed
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - 12.0.0 (cordova-lib@12.0.1)

Important local packages
  quasar - 2.14.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.7.2 -- Quasar Framework App CLI with Vite
  @quasar/extras - Not installed
  eslint-plugin-quasar - Not installed
  vue - 3.3.4 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.5
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.16 -- Native-ESM powered web dev build tool
  eslint - 8.56.0 -- An AST-based pattern checker for JavaScript.
  electron - 28.1.4 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

App • Booting up remote Vue Devtools...

 App • ⚠️  Command name was not available. Please run again.

Additional context

No response

[rstoenescu]

Looks like the @vue/devtools/cli.mjs file imports a non-existent path (import('@vue/devtools-electron/cli').

Until I can figure out how we can go around it (and also report the issue to the Vue Devtools team), please install @vue/devtools v6.

[rstoenescu]

Found a good workaround.

For those reading these lines, please upgrade to latest q/app-vite (v1.7.3 at current time) or q/app-webpack (3.12.3 at current time). I've just released them.

[fprijate]

it doesn't work with @quasar/app-vite": ^2.0.0-beta.5", again.

[anilkumarthakur60]

install the plugin as dev dependency

npm add -D vite-plugin-vue-devtools

import vueDevTools from 'vite-plugin-vue-devtools';

//inside build key of configuration  enable extendViteConf and add the following line of code
build: {
extendViteConf(viteConf) {
        viteConf.plugins = viteConf.plugins || [];
        viteConf.plugins.push(vueDevTools());
      },
}

[Yoduh]

install the plugin as dev dependency

npm add -D vite-plugin-vue-devtools

import vueDevTools from 'vite-plugin-vue-devtools';

//inside build key of configuration  enable extendViteConf and add the following line of code
build: {
extendViteConf(viteConf) {
        viteConf.plugins = viteConf.plugins || [];
        viteConf.plugins.push(vueDevTools());
      },
}

Does this break hot reloading for anyone else?

Edit: Works better for me (i.e. does not break hot reloading) when added to quasar.config.js like so:

build: {
    vitePlugins: [
        ['vite-plugin-vue-devtools']
    ]
}