Need simple official solution to add devtools for production application.

[apuatcfbd]

What problem does this feature solve?

This is really frustrating that Vue 3 doesn't have official/documented way to enable dev tools for production build. So @VueJS tell me what I do now. I'm having an issue with my app only after production build. I failed to produce this in development.

???

[dj12djdjs]

@apuatcfbd I just followed this guide recently, it worked great!

https://mokkapps.de/vue-tips/force-enable-vue-devtools-in-production-build/

[apudiu]

@apuatcfbd I just followed this guide recently, it worked great!

https://mokkapps.de/vue-tips/force-enable-vue-devtools-in-production-build/

@dj12djdjs this is a hack, not an official solution

[Azurewarth0920]

You can try this solution: https://github.com/vuejs/devtools/issues/1321

Set __VUE_PROD_DEVTOOLS__ true in the production build can enable the access to the devtool.

[chubetho]

If you use vite this is a simple solution

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    __VUE_PROD_DEVTOOLS__: true
  }
})

[patrick-cullen]

@chubetho 's solution worked for me with a few tweaks for my particular situation.

In my case, I didn't want to add devtools to production, only development. However, I was using vite build for local development rather than vite, which sets the mode to production.

Manually adding the --mode development flag to the vite build script (https://vitejs.dev/guide/env-and-mode.html#modes) and setting the above definition to be true only when the mode was development (https://vitejs.dev/config/#conditional-config) was the solution.