Devtools: In dev mode getting "Devtools inspection is not available because it's in production mode or explicitly disabled by the author"

[terion-name]

Environment

Nuxt project info:

---

• Operating System: Darwin
• Node Version: v16.12.0
• Nuxt Version: 3.0.0-27307420.6a25d3e
• Package Manager: yarn@1.22.4
• Bundler: Vite
• User Config: buildModules, dev, build, intlify, publicRuntimeConfig
• Runtime Modules: -
• Build Modules: @intlify/nuxt3@0.1.9

---

Reproduction

n/a

Describe the bug

Starting nuxt with yarn dev or yarn dev --devtools, with or without dev: true in config, in any case getting from vue devtools:

Nuxt.js + Vue.js is detected on this page.
Devtools inspection is not available because it's in production mode or explicitly disabled by the author.

Additional context

No response

Logs

No response

[danielroe]

Would you provide a reproduction? 🙏

[terion-name]

@danielroe What reproduction? It is default behavior of default setup of framework. Just open any project on nuxt3 and click vue devtools chrome extension 5 дек. 2021 г., 14:25 +0200, Daniel Roe ***@***.***>, писал:

…

Would you provide a reproduction? 🙏 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[danielroe]

@terion-name It shouldn't be the default behaviour. I would guess you're using an old version of the Vue Devtools. Try installing the version with Vue 3 support: https://github.com/vuejs/devtools/releases

[terion-name]

@danielroe 5.3.4, it's latest on chrome store (not beta channel)

One thing that I use it in brave browser, not chrome itself. But it is chromium based and all extensions work fine there. But I'll double check chrome itself

[danielroe]

You need the beta version of the devtools for Vue 3 support.

[terion-name]

Yeap, in chrome it is the same

[terion-name]

You need the beta version of the devtools for Vue 3 support.

Aaaa, that's the trick. Thank you, I'll try. It's just not mentioned anywhere

[terion-name]

@danielroe yes, beta works, thank you. It would be great if this had been written somewhere)

[casualmatt]

Hello,
I still have the same issue with both beta and stable version.

Any advice what could be?

EDIT;
i'm using Nuxt3

[T-Zahil]

Same here

[ATLANT-Z]

Same

[reilnuud]

same

[tbb2]

same here, using esm-browser version

[krthr]

Same

[tobiasdiez]

It is also not working for me (nuxt3 rc). The vue extension checks window.__VUE_DEVTOOLS_GLOBAL_HOOK__ which for me yields

{
  "devtoolsVersion": "6.0",
  "Vue": null,
  "_buffer": [],
  "store": null,
  "initialState": null,
  "storeModules": null,
  "flushStoreModules": null,
  "apps": []
}

For the devtools extension to work, both vue and apps have to be present.
Edit: Sometimes apps is correctly present, but Vue is still null.

Can this please be reopened?

[DamianGlowala]

@danielroe shall we reopen? Having the same issue. Fresh Nuxt RC3 project without devtools working. Are they working for you locally?

[danielroe]

@DamianGlowala I can't reproduce this. I think it's more likely a browser issue or a Vue devtools issue rather than a problem with nuxt. Would you test in a fresh Chrome browser profile and ensure you're installing https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?

If you reproduce it, then may I suggest creating a new issue either here or upstream at https://github.com/vuejs/devtools. Feel free to tag me in it and I'll have a look.

[mlpierce22]

Not sure if this will help anybody, but I my issue was the build.transpile option. I need this for prod builds, not development, so I just changed it to the following and it seems to work for now:

  build: {
    transpile: process.env.NODE_ENV === "development" ? [] : ["element-plus"],
  },

After playing around a little while, I think that this is either an uncaught error or a race condition of some kind because it's very finicky. I found that I can reproduce it consistently by putting an incorrect css path into the nuxt config (devtools not found, and no errors thrown except file not found at runtime).

Using devtools v6.1.4
Repro: https://stackblitz.com/edit/github-b6sebj?file=nuxt.config.ts&view=editor

[steel89ita]

After playing around a little while, I think that this is either an uncaught error or a race condition of some kind because it's very finicky. I found that I can reproduce it consistently by putting an incorrect css path into the nuxt config (devtools not found, and no errors thrown except file not found at runtime).

The last part fixed my issue.
In my case the problem was that I defined a css file in the nuxt.config.ts, but was not present in the assets directory.
Adding the file back solved the issue and now the Vue tab is showing as expected.

Running Nuxt3-rc4

[upepo-mwindaji]

If you are experiencing this issue on a cloud VM dev environment (e.g. Codespace), try updating your vite config as per nuxt/nuxt#14367

[millievn]

https://stackblitz.com/edit/github-b6sebj?file=nuxt.config.ts&view=editor

sorry but vue devtool is still not working.
nuxt 3.0.0-rc.8
vue-devtool 6.2.1

[danielroe]

Please see #2284 (comment).