How to install devtools?

[Barbapapazes]

Hello,

I run this command inside my project on Windows:

npx nuxi@latest devtools enable

The cli update my nuxt.config.ts and install the devtool but then, nothing. It's not enable and I don't understand why.

[Barbapapazes]

I'm using nuxt3.3.2

[lihbr]

Hey there, thanks for contributing! Can you try running it with nuxt@^3.4.0? It should just be a matter of having devtools: true in your Nuxt config after that.

[Barbapapazes]

Yep, I try but it doesn't work. Nothing. With the previous install process (in the .nuxtrc file), it was working well.

[lihbr]

Hmm, could you provide your package.json details and npx nuxi info output then so we can try to understand what's wrong here? 🙂

[Barbapapazes]

Yep, here some infos. When adding @nuxt/devtools to the modules section in nuxt.config.ts, it works.

package.json

{
  "version": "1.1.0",
  "private": true,
  "packageManager": "pnpm@8.3.1",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "prepare": "nuxt prepare",
    "lint": "eslint --cache ."
  },
  "dependencies": {
    "@classement-des-associations/website-theme": "^0.10.4",
    "@nuxtjs/eslint-config-typescript": "^12.0.0",
    "@parcel/watcher": "^2.1.0",
    "@vueuse/components": "^9.13.0",
    "@vueuse/core": "^9.13.0",
    "@vueuse/nuxt": "^9.13.0",
    "eslint": "^8.39.0",
    "nuxt": "^3.4.2",
    "nuxt-clarity-analytics": "^0.0.2",
    "three": "^0.149.0",
    "typescript": "^4.9.5"
  },
  "devDependencies": {
    "@nuxt/devtools": "^0.4.2"
  }
}

npx nuxi info

------------------------------
- Operating System: Windows_NT
- Node Version:     v18.12.1
- Nuxt Version:     3.4.2
- Nitro Version:    2.3.3
- Package Manager:  pnpm@8.3.1
- Builder:          vite
- User Config:      extends, devtools, modules, runtimeConfig, content, app, nitro, routeRules
- Runtime Modules:  @vueuse/nuxt@9.13.0, nuxt-clarity-analytics@0.0.2
- Build Modules:    -
------------------------------

[lihbr]

Hmm, thanks for sharing those details! Indeed, this looks odd :thinking:

Will attempt to reproduce

[Barbapapazes]

Do you want the project in order to try to reproduce?

https://github.com/Classement-des-Associations/le-classement.fr

[danielkellyio]

same here on a Mac with Nuxt ^3.4.2 and fresh project with npx nuxi init

[lihbr]

OK, I'm not able to reproduce, unfortunately, but thanks for providing your project @Barbapapazes!

Could you try in a guest browser session by any chance? (could be an extension failing the iframe, not sure)

[Barbapapazes]

@lihbr, have you removed '@nuxt/devtools' from the modules array in order to reproduce? Even with a guest browser, I'm not able to run the devtools. 😕

[lihbr]

My bad, ok will try again

[lihbr]

Alright, I'm confused, devtools still showing up on my side after I removed it from modules array 🤔

Tried on Windows with Node 16.20.0 and 18.16.0 (cleared .nuxt/.cache between each attempt just in case)

I'm running out of ideas, could you try perhaps clearing anything devtool related from your ~/.nuxtrc in your home directory?

[Barbapapazes]

Here my .nuxtrc

modules.0=C:/Users/esoubiran/AppData/Roaming/npm/node_modules/@nuxt/devtools/module.cjs
devtoolsGlobal.projects.0=C:\Users\esoubiran\dev\aneoconsulting\armonik-docs-theme
devtoolsGlobal.projects.1=C:\Users\esoubiran\dev\Classement-des-Associations\le-classement.fr

After removing it, Devtools is working fine! 🚀

@danielkellyio could you try this solution?

[Barbapapazes]

Thanks for the idea of removing this file @lihbr, maybe we could add a warning in the documentation?

[Barbapapazes]

Currently, we can read about the previous installation method in the documentation

[lihbr]

I think this might more be a bug of the migration that happened with Nuxt 3.4, will investigate

cc @antfu

[zcqno1]

Error: Unable to update Nuxt config file automatically after npx nuxi@latest devtools enable

when manually set devtools: { enabled: true }, nuxt prompts to install the @nuxt/devtools