vue-devtools always disabled with nuxt.js

tl:dr:

  • vue.config.devtools = true in my nuxt.config.js does not work for me.
  • I ran nuxt generate --devtools, then nuxt start and opened the website in my browser. Doing so I could use the Vue-Devtools.
  • After that I now can still use the Vue-Devtools, even when running nuxt dev and no vue.config.devtools flag set in my nuxt.config.js

Full story

So enabling the devtools flag in vue.config as in the accepted answer did not work for me either.

I first tried forcing the Vue-Devtools as described here. Adding a Plugin to set the window properties as described in the link. But without luck.

Digging in the Nuxt code I noticed the --devtools flag for the generate command and wanted to see if the Vue-Devtools work at all with Nuxt.

After running nuxt generate --devtools, then serving the application with nuxt start, I finally could access the devtools.
And now, even when running nuxt dev they are still accessible. And I don't have vue.config.devtools set at all in my nuxt.config.js. Weird. But maybe that helps someone.

More context: I am running Nuxt in spa mode, with target static as I don't have a Node server in the Backend and just want to build an SPA.


As @joshua jackson stated worked for me, while devtools: true did NOT.

Version:

Nuxt.js v2.10.0

Vue v2.6.10

vue: {
  config: {
    productionTip: false,
    devtools: true
  }
}

I had to add the following to the nuxt.config.js:

vue: {
  config: {
    productionTip: false,
    devtools: true
  }
}

Now devtools shows up