DevTools Not Working in Nuxt with Storybook

[lafllamme]

Environment

When using the latest versions of Nuxt and Storybook, Vue DevTools and Nuxt DevTools do not work as expected. I encounter the following errors when running npx nuxt storybook!

Image

Reproduction

#

Describe the bug

---

DevTools Not Working in Nuxt with Storybook

Description

When using the latest versions of Nuxt and Storybook, Vue DevTools and Nuxt DevTools do not work as expected. I encounter the following errors when running npx nuxt storybook:

Errors (translated to English)

1. WebSocket Connection Error:

   Firefox cannot establish a connection to the server at ws://localhost:6006/_nuxt/. client:535:18

2. DOMException:

   Uncaught (in promise) DOMException: An invalid or illegal string was specified
      NuxtJS 5
          setupWebSocket
          fallback
          setupWebSocket
          setupWebSocket
          <anonymous>

---

Reproduction Steps

1. Initialize a new Nuxt project.
2. Add Storybook using @nuxtjs/storybook and @storybook-vue/nuxt.
3. Start Storybook using npx nuxt storybook.
4. Open the browser and check for Vue or Nuxt DevTools availability.

---

Expected Behavior

• Vue DevTools should load properly in the browser.
• Nuxt DevTools should be accessible via Shift + Alt + D.

---

What I Tried

1. Creating a Nuxt plugin to enable Vue DevTools explicitly:

   export default defineNuxtPlugin((nuxtApp) => {
    if (import.meta.env.DEV && process.client) {
      const app = nuxtApp.vueApp;
      app.config.devtools = true;
      console.log("Vue DevTools enabled");
    }
   });

   However, this did not resolve the issue.

2. Ensuring HMR configuration in nuxt.config.ts:

   export default defineNuxtConfig({
    vite: {
      server: {
        hmr: {
          protocol: 'ws',
          host: 'localhost',
          port: 24678, // Port for Nuxt DevTools
        },
      },
    },
    devtools: {
      enabled: true,
    },
   });

   This also did not work, and the WebSocket error persists.

---

Current Environment

Here’s my package.json:

{
  "dependencies": {
    "@radix-ui/colors": "^3.0.0",
    "@unocss/reset": "^0.64.0",
    "nuxt": "latest",
    "radix-vue": "^1.9.9",
    "vue": "latest",
    "vue-router": "latest"
  },
  "devDependencies": {
    "@chromatic-com/storybook": "^1.9.0",
    "@nuxtjs/storybook": "latest",
    "@storybook-vue/nuxt": "latest",
    "@storybook/addon-essentials": "8.4.2",
    "@storybook/addon-links": "8.4.2",
    "@storybook/addon-interactions": "8.4.2",
    "@storybook/addon-mdx-gfm": "8.4.2",
    "@storybook/blocks": "8.4.2",
    "@storybook/test": "8.4.2",
    "@types/node": "^18.17.5",
    "@unocss/nuxt": "^0.64.0",
    "sass-embedded": "^1.80.6",
    "storybook": "8.4.2",
    "unocss": "^0.64.0",
    "unocss-preset-radix": "^2.5.5"
  }
}

---

Additional Notes

• The issue seems to be a conflict between Storybook's WebSocket server and Nuxt DevTools.
• I suspect that Storybook might be overriding or interfering with Nuxt's WebSocket configurations (ws://localhost:6006/_nuxt/).

---

Environment Details

• Nuxt Version: Latest
• Storybook Version: 8.4.2
• Node Version: 18.17.5
• Browser: Firefox (latest)

---

Question

Why is Storybook or Nuxt setting Vue.config.devtools = false by default when running npx nuxt storybook? Is there a way to ensure both Nuxt DevTools and Storybook can coexist without these conflicts?

---

Let me know if you'd like to clarify anything else or add further details!

Additional context

No response