3

I am new to Vue and I experiment with Vue 3 Composition API, which I created demo app and it works fine.

I installed Vue.js Devtools in Chrome, but when I open my site I can do nothing with it; it has a gray/disabled look and when I click on it, I get tooltip "Vue.js not detected", and in my Developer Tools I don't see any tab regarding Vue or whatsoever.

EDIT: I run some localhost app like "http://localhost:8998/#/home"

EDIT2: Which one? IDK, I just googled it and chose the one at the top with the best user rating, I add a capture enter image description here

Dalibor
  • 1,430
  • 18
  • 42
  • Can you add some more details? How you created/initialise the app etc. – Daniel_Knights Nov 21 '20 at 18:27
  • Also, did you install the [latest Vue Devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg)? There's a new version for Vue 3 – Daniel_Knights Nov 21 '20 at 18:27
  • https://stackoverflow.com/questions/62059776/vue-js-devtools-not-showing What helps for me is closing all devtools, closing localhost tab with Vue app, disabling the Vue devtools addon, enabling it again, then opening localhost and F12 to see if vue devtools tab is there. This happens both on Vue2 and the Vue3 beta devtools –  Nov 21 '20 at 18:34
  • @ArturTagisow I just tried step by step what you wrote. Nope, still gray icon, still nothing in my developer tools regarding vue. – Dalibor Nov 21 '20 at 18:53
  • Hmm can you see the fixes in https://github.com/vuejs/vue-devtools/issues/620 ? This is a very common problem. –  Nov 21 '20 at 18:58
  • 1
    For Vue 3 you need to install the version 6 beta of the Devtools. Links: https://v3.vuejs.org/guide/installation.html#vue-devtools – skirtle Nov 21 '20 at 19:50
  • @skirtle IDK what you mean (I just googled Chrome devtools 6 and nothing), I have the latest version of Chrome. – Dalibor Nov 24 '20 at 10:32
  • 1
    You need version 6 of the Vue Devtools, not Chrome Devtools. The link I provided should guide you to the relevant download. From the picture in your question it seems you have the wrong one. You need the one at the top, with the orange `beta` logo. You may also need to disable the other copy of the Devtools (this is explained on the download page). – skirtle Nov 24 '20 at 10:39
  • 1
    Thank you. I tried installed that beta, but the result is the same. I disabled other 2 extensions I use (all others were disabled before in the past) "Clear cache" and "Moesif Origin & CORS Changer" however, the results are same. I open the page running Vue solution, and open developer tools, icon is gray and says "Vue.js not detected". I tried closing devtools, closing tab, closing browser, etc. – Dalibor Nov 27 '20 at 10:32

3 Answers3

1

credit: skirtle

Vue 2 and Vue 3 have separate versions of the devtools. Make sure you’re using the version that’s compatible with Vue 3. Currently that’d be 6.0.0 beta 3.

You’ll also need to use a dev build of Vue for the devtools to be able to interact with it. It won’t work with a production build of Vue.

krishna
  • 101
  • 1
  • 11
0

I also had problems with the plugin for Vue3. Recently a new version came out and now everything is working. Below is the link to the working version: https://devtools.vuejs.org/guide/installation.html

bialka104b
  • 23
  • 7
-2

Have you tried npm run dev? Your Vue application needs to be in development mode in order for the Vue dev tools tab to display.

Jonathon
  • 312
  • 2
  • 10