Vuejs DevTools not showing panel in developer tools

UPDATE: Turns out the devTool github repo had an even better answer:

const app = new Vue(vueConfig).$mount('#app');
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app.constructor;

See here: https://github.com/vuejs/vue-devtools

Turns out it was a jest work around that was causing the problem. My jest tests weren't working with my normal vue instance so I had to mock it with the createLocalVue.

const localVue = createLocalVue();

localVue.use(VueRouter);

const router = new VueRouter();

The problem was that some tests were not liking that I had two vue instances (the one in main.js) with a router.

So I added logic to only add the router if it wasn't a test:

import Vue from 'vue';
import VueRouter from 'vue-router';

if (!process || process.env.NODE_ENV !== 'test') {
    Vue.use(VueRouter);
}

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
});

const vueConfig = {
    render: (h) => h(App),
};

// excluding for jest tests
if (!process || process.env.NODE_ENV !== 'test') {
    vueConfig.router = router;
}

new Vue(vueConfig).$mount('#app');

Unfortunately the if around the Vue.use() is what broke it:

// removing this if() fixed it and the vue dev tools panel now shows up.
if (!process || process.env.NODE_ENV !== 'test') {
    Vue.use(VueRouter);
}

Something about the way the dev tools inits needed the router to be installed. I also wonder if they use a process with "test" or something. Either way, this is resolved for me. Hope it helps someone else.

I was facing the same issue and able to solve by avoiding vue.min.js for development purpose. Use original version (vue.js) instead of the minify version.

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)

   https://stackoverflow.com/a/62446093/15265413