Enable devtools in production

[HoboDev]

Version

6.0.0-beta.2

Vue: 3.x

Browser and OS info

Firefox 81

Steps to reproduce

Insert the lines from the readme

// Before you create app
Vue.config.devtools = process.env.NODE_ENV === 'development'

// After you create app
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app.constructor

// then had to add in ./store.js as well.
Vue.config.devtools = process.env.NODE_ENV === 'development'

What is expected?

For the example lines to work.

What is actually happening?

I'm getting the following errors:

Error	TypeScript	Cannot find name 'Vue'.	8:1

or 

Module '"../node_modules/vue/dist/vue"' has no exported member 'Vue'. 
on import { Vue } from 'vue

or

Property 'config' does not exist on type 'typeof import
on import Vue from 'vue'

or

a blank page if I do this:
// @ts-ignore
Vue.config.devtools = true

---
This is my main.ts:

import { createApp } from 'vue'
import App from './App.vue'
import Harlem from '@harlem/core'

Vue.config.devtools = true

// Before you create app
Vue.config.devtools = process.env.NODE_ENV === 'development'

createApp(App)
  .use(Harlem)
  .mount('#app')

// satisfy ts:
declare global {
    interface Window { __VUE_DEVTOOLS_GLOBAL_HOOK__: any; }
}

// After you create app
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = App.constructor

Sorry but I'm either too uneducated or the documentation is lacking essential bits of information. Please help me out.

[HoboDev]

This one fixed it for me

// main.ts
import App from '@/App.vue';
import { devtools } from '@/devtools';
import router from '@/router';

createApp(App).use(devtools).use(router).mount('#app');

// devtools.ts
import { App, Plugin } from 'vue';

// my own addition to satisfy ts
declare global {
    interface Window { __VUE_DEVTOOLS_GLOBAL_HOOK__: any }
}

const devtools: Plugin = {
	install(app: App) {
		if (process.env.NODE_ENV === 'development' && window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
			window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app;
		}
	},
};

export { devtools };

Originally posted by @xSorc in https://github.com/vuejs/vue-devtools/issues/1244#issuecomment-690915714

[HoboDev]

I want to leave this one open so hopefully the documentation could be updated accordingly helping others to avoid the pain

[haoqunjiang]

If you have two versions of Vue.js DevTools installed simultaneously, then such errors may occur.

[Akryum]

You can use the __FEATURE_PROD_DEVTOOLS__=true flag when building your application. Maybe this should be documented somewhere? @vuejs/docs

[Ulrich-Mbouna]

Hi, i'm using Laravel 7 + vue 3 application, but in production , i already have vue devtools visible , and it containt user data, how can i disable it. Thanks

[noook]

Building with Vite.js, I run this command:

 __FEATURE_PROD_DEVTOOLS__=true yarn build

In addition with this comment, it doesn't work, it's detected but doesn't show in devtools

[Akryum]

The flag is now __VUE_PROD_DEVTOOLS__

[mrleblanc101]

How would Tree-shaking work for a Vue 2 app using Nuxt. Can I simply remove the __VUE_PROD_DEVTOOLS__ check ? Note that my Devtools plugin is currently directly inside my app and not a separate package and I want to make sure not to ship this code in production if Devtools are not enabled.

Tree-shaking for production By default, Vue 3 doesn't include the devtools-related code in production. It uses the VUE_PROD_DEVTOOLS environment variable as a compile flag to force enable this code

if (process.env.NODE_ENV === 'development' || __VUE_PROD_DEVTOOLS__) {
  setupDevtools(app)
}

[Akryum]

This only applies to Vue 3.

[kimmy-wang]

The flag is now __VUE_PROD_DEVTOOLS__

It doesn't work for me.

docs

repo

1. yarn install
2. yarn build
3. node server
4. open http://127.0.0.1:3000/mobile in your browser

[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
  }
})