Vue devtools won't display in Laravel Mix app

Question

I'm having trouble enabling the Vue dev tools in my fairly new Laravel app.

I saw this question but I don't want to reset my project which I believe that command does.

I'm also not able to remove the production tip

When I window.Vue.config in the console, I get the following:

{
   ...
   devtools: true
   productionTip: false
}

My reasources/assets/js/index.js reads:

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

window.Vue.config.productionTip = false
window.Vue.config.devtools = true

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

import App from './App.vue'

const app = new Vue({
  el: '#app',
  components: { App },
  template: '<App />'
});

Despite all of this, the changes aren't reflected in the actual dev tools UI

Answer 1

Instead of on the imported Vue, set those variables on the resulting app object. This works in both Vue 2 and 3 like the following:

const app = new Vue({…});  // vue 2
const app = createApp({…});  // vue 3

window.app = app;
window.app.config.productionTip = false;
window.app.config.devtools = true;