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.
