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

@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.

from framework.

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

from framework.

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

from framework.

Would you provide a reproduction? 🙏

from framework.

from framework.

@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

from framework.

@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

from framework.

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

from framework.

Yeap, in chrome it is the same

from framework.

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

from framework.

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

from framework.

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

Any advice what could be?

EDIT;
i'm using Nuxt3

from framework.

Same here

from framework.

Same

from framework.

same

from framework.

same here, using esm-browser version

from framework.

Same

from framework.

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?

from framework.

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

from framework.

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

from framework.

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

from framework.

Please see #2284 (comment).

from framework.