fix: latest DevTools are not working in new Nuxt projects

[fabiiomiiguel]

🐛 The bug

I have created a fresh nuxt project using the npm create nuxt and I noticed that the devtools are not working, it seems that the requests are blocked.

🛠️ To reproduce

https://stackblitz.com/edit/nuxt-starter-786pxkrt

🌈 Expected behavior

Downgrading devtools to version 2.1.3 appears to fix the issue.

https://stackblitz.com/edit/nuxt-starter-iut7ccee

ℹ️ Additional context

No response

[piscis]

probably duplicate of #871 downgrading to nuxt/devtools 2.5.0 should fix the problem until there is a fix

[fabiiomiiguel]

Not exactly, since I tested every version until it started working again.
It appears that it didn’t work properly between versions 2.2.0 and 2.6.0.

PS: I can confirm that creating a plugin to fix the styles makes it work again.

export default defineNuxtPlugin(() => {
  if (import.meta.dev) {
    const fixDevToolsStyle = () => {
      const devtools = document.querySelector('nuxt-devtools-frame') as HTMLElement;

      if (devtools) {
        devtools.style.position = 'absolute';
        devtools.style.left = '8px';
        devtools.style.top = '50%';
      } else {
        requestAnimationFrame(fixDevToolsStyle);
      }
    };

    if (document.readyState === 'complete') {
      fixDevToolsStyle();
    } else {
      window.addEventListener('load', fixDevToolsStyle);
    }
  }
});