I configured debug mode in config/config.php.
And I use npm run dev when compiling client code.
When trying to open Vue DevTools in Chrome brother I get:
**Vue.js is detected on this page.**
Devtools inspection is not available because it's in production mode or explicitly disabled by the author.
I tried with a Vue project outside of Nextcloud and I can open Vue DevTools and access all components including Pinia.
Is there any other required configuration on top server debug mode and npm run dev to allow using Vue DevTools for Nextcloud App?
I’m usinge Vue 3, with @nextcloud/vue@9.0.0-alpha.7
Hey @denisosteo,
yeah, there is one thing needed called hmr_enabler. This is an app that should be installed only on restricted instances (as it opens security related stuff, just as a warning).
The Vue dev tools need to establish some code changes in the web site. This is by default restrivted by the NC core. The HMR enabler loosens these restrictions. Currently, there should be a error on the browser logs visible.
I think this should do it. At least I had it running locally recently. So it is doable.
Chris
As I forgot:
The app is located here. You cannot install through the app store. It might be marked incompatible with your NC server but should work on it nevertheless.
When using Vue3, Nextcloud switches from webpack to vite. So maybe the hmr_enabler won’t work as it seems to be related to webpack.
No, HMR Enabler relaxes CSP so that the browser allows the interception by the Vue dev tools at all. This is not about Vue2/3 or the bundler involved.
However, there is the problem, that we pack and Vite have significantly different approaches how HMR are handled. Webpack creates a stub JS file that does the HMR. Vite enforces you to redirect the query to the Vite server at first. I think I have seen somewhere a how-to to integrate Vite with a dev environment. I am abroad so I can hardly search
Chris
Thanks Christian. This HMR concept is quite new for me but I will search on internet how to integrate vite in dev environment.
At the moment I have to load code with lots of console.log() to trace problems on client. Not really efficient.
1 Like