Enabling Vue Devtools via Vue.config out of dev mode

[Juanpam]

Describe the feature

Environment

Operating System: MacOSX Monterrey 12.4
Node Version: v16.16.0
Nuxt Version: 3.6.2
Nitro Version: 2.2.28
Package Manager: npm@8.11.0
Builder: vite

In Nuxt 2, I was able to easily enable Vue devtools using the following config in nuxt.config.js:

export default {
  vue: {
    config: {
      productionTip: true,
      devtools: true
    }
  }
}

This configuration will lead to the following Vue.config:

Vue.config.productionTip // true
Vue.config.devtools // true
Vue.config.performance // true

I've not found a way of doing this same thing in Nuxt 3. I used to be able to enable Vue Devtools in Vercel this way, but so far devtools only work while running npm run dev.

I've already tried modifying vite configuration and add { vite : { vue: { isProduction: false }}} to no avail.

I've tried workarounds found in other issues such as:

• Devtools: In dev mode getting "Devtools inspection is not available because it's in production mode or explicitly disabled by the author" framework#2284
• Vue Devtools not working with starter on Github codespace #14367
• Vue devtools not working. #14453

However, these do not seem to be working as expected.

I'm a developer myself, but not familiar enough with Nuxt internals to implement it myself (at least not without some guidance 😅)

Any alternatives to manually specify the Vue.config object via nuxt.config.ts or other method?

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide.
• Check existing discussions and issues.

[danielroe]

You enable vue devtools in production like this:

export default defineNuxtConfig({
  vite: {
    define: {
      __VUE_PROD_DEVTOOLS__: true
    }
  }
})

following these instructions: https://github.com/vuejs/core/blob/507f3e7a16c98398a661c150ce89d36b1441f6cc/packages/vue/README.md?plain=1#L34-L47.

[Juanpam]

@danielroe The define property doesn't seem to be available to be used on the nuxt.config.ts file. It is missing from it's type definition and therefore doesn't allow me to add it to it.

Please, re open the issue, as I think this would require modifying the types of it.

[danielroe]

It works fine for me. Did you try the code I pasted?

[Juanpam]

@danielroe I had to update Nuxt to version 3.6 and it now matches the types. However, now I get a new error about the this.$store property in some components still using Options API:

ERROR(vue-tsc) Object is of type 'unknown'. for the this.$store property in a component.

I added Vuex as a plugin as stated here: https://stackoverflow.com/questions/74564225/how-to-install-vuex-in-fresh-nuxt-3-project

It used to work before the upgrade, but now it seems tsc is having a hard time figuring out the types on its own.

[Juanpam]

@danielroe Ok, I was able to set up Vuex properly using the following code in the plugin:

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(store)
  return {
    provide: {
      store: store,
    },
  }
})

I had to change a couple components name as well but everything seems to be working now as expected. Only left weird behaviour I see is that when running on dev mode, the output of the console displays the red ERROR banner but then it says there are no found errors 😟.

Any way of setting up a more verbose mode to check there are in fact no errors?