CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Nino Filiu
Nino Filiu

Reputation: 18523

Disable the Vue Devtool extension tip

I love Vue in almost every aspect but this is logged whenever I start my Vue app:

Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools

I like to have a minimal development experience and I don't need this Vue extension. I'd like to disable this tip that I find annoying. How can I proceed?

What I've already tried

Looking at Vue's source code, the tip is logged by:

if (inBrowser) {
  setTimeout(function () {
    if (config.devtools) {
      if (devtools) {
        devtools.emit('init', Vue);
      } else if (
        true
      ) {
        console[console.info ? 'info' : 'log'](
          'Download the Vue Devtools extension for a better development experience:\n' +
          'https://github.com/vuejs/vue-devtools'
        );
      }
    }
    if ( true &&
      config.productionTip !== false &&
      typeof console !== 'undefined'
    ) {
      console[console.info ? 'info' : 'log'](
        "You are running Vue in development mode.\n" +
        "Make sure to turn on production mode when deploying for production.\n" +
        "See more tips at https://vuejs.org/guide/deployment.html"
      );
    }
  }, 0);
}

Contrary to the similar development mode warning that can be turned off by Vue.config.productionTip = false before new Vue({...}), there doesn't seems to be a config-based escape to prevent the tip to be logged. I therefore have the following options, which don't completely satisfy me:

Upvotes: 20

Views: 23910

Answers (4)

Ulvy Romy
Ulvy Romy

Reputation: 1

Remove vueDevTools() in vite.config.ts

Upvotes: 0

Andrew Kin Fat Choi
Andrew Kin Fat Choi

Reputation: 446

We MUST BE PUT this code at the end of "Vue javascript"

Vue.config.devtools = false;

Example

let demo = new Vue({
  data: {},
  < Some code ...... >
});

Vue.config.devtools = false;

p.s. Put this code "Vue.config.devtools = false;" at the program header will be did not work.

Upvotes: 2

kinghat
kinghat

Reputation: 589

in chrome if you right click one of the messages and choose to hide it will toss it up in your filter so dont get messages from vue.runtime.esm.js anymore:

enter image description here

Upvotes: 3

Hammerbot
Hammerbot

Reputation: 16354

From the source code you provided, have you tried the following before new Vue({...})?

Vue.config.devtools = false

Upvotes: 44

Related Questions