Vue.js devtools not showing

I experienced this, too, both for Chrome and Firefox.

The unfortunate solution for Chrome was updating it to the latest version (today, that is 83.0.4103.106, 64bit on Windows).

For Firefox (77.0.1, 64bit) I disabled all other extensions, loaded the page without Firefox Devtools open, then hit F12 and the Vue tab popped up.

In general, disabling any other extensions (think of "Ad Block Plus" or "I don't care about cookies" for example) might help.

[EDIT]: Adding another case I experienced, when the Vue tab does not show up in Chrome's Devtools:

1. load the page without Devtools open
2. press the Vue Devtools button in the extensions area (might say "Vue.js not detected", but don't let that bother you). In some setups, this step is crucial.
3. only then open Devtools by hitting F12. Vue tab should appear (check to the very right of all tabs, you can drag it to the left)

Well another reason why Vuejs devtools might not be showing is because you ran npm run production or npm run dev so in that case the extension will detect Vuejs but won't show in devtools.

So you'll have to either run npm run dev or npm run watch.

Close devtools, reload page and open devtools

What I found out is I had to do Ctrl+C to quit current process, then run "php artisan serve" again, then Vue tool shows up in Chrome