Nuxt DevTools causes 404 error on custom HTTPS domain

[chrisnoden]

Environment

• Nuxt: 4.2.2
• Node: v22.x
• OS: macOS
• Custom domain: https://custom.domain.local:3000 (local HTTPS with self-signed certificate)

Reproduction

Setup

npx nuxi init devtools-https-bug
cd devtools-https-bug
npm install

Generate local certificates

# Using mkcert (recommended)
mkcert -install
mkcert custom.domain.local

Configure nuxt.config.ts

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  devServer: {
    https: {
      key: './custom.domain.local-key.pem',
      cert: './custom.domain.local.pem',
    },
  },
})

Add hosts entry

# Add to /etc/hosts (macOS/Linux) or C:\Windows\System32\drivers\etc\hosts (Windows)
127.0.0.1 custom.domain.local

Development Server

Start the development server:

npm run dev

Open https://custom.domain.local:3000 in the browser.

Describe the bug

When running the Nuxt dev server on a custom HTTPS domain (not localhost), DevTools causes repeated 404 errors in the terminal and a cross-origin error in the browser console.

Terminal error:

ERROR  [request error] [unhandled] [GET] https://custom.domain.local:3000/_nuxt/

ℹ Error: 
 ⁃ at createError (node_modules/@nuxt/cli/dist/dev-KB30iboK.mjs:54:14)
 ⁃ at NuxtDevServer.toNodeHandle (node_modules/@nuxt/cli/dist/dev-KB30iboK.mjs:264:18)

[CAUSE]
{
  status: 404,
}

Browser console error:

SecurityError: Failed to read a named property '__NUXT_DEVTOOLS_VIEW__' from 'Window': Blocked a frame with origin "https://custom.domain.local:3000" from accessing a cross-origin frame.
    at client.js?v=81bfbde2:136:13

Additional context

Expected behavior

DevTools should work without errors on custom HTTPS domains.

Actual behavior

• Terminal shows repeated /_nuxt/ 404 errors from NuxtDevServer.toNodeHandle
• Browser console shows cross-origin SecurityError for __NUXT_DEVTOOLS_VIEW__
• DevTools panel fails to load properly

Workaround

Disabling DevTools eliminates the errors:

devtools: { enabled: false },

Additional context

• Works fine on https://localhost:3000
• The issue appears to be DevTools probing /_nuxt/ (bare path with trailing slash) which returns 404
• May be related to the fix in fix(vite): prevent 404 for existent dev server handlers under _nuxt/ paths in development nuxt#31646, but that fix doesn't seem to cover this case

Logs

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🔗 Related PRs

nuxt/nuxt#31543 - fix(vite): return 404 for non-existent _nuxt/ paths in development [merged]
nuxt/nuxt#31646 - fix(vite): prevent 404 for existent dev server handlers under _nuxt/ paths in development [merged]
nuxt/nuxt#33359 - feat(nuxt): display youch error page w/ user error page in dev [merged]
nuxt/nuxt#33670 - fix(vite): respect vite proxy in dev middleware [merged]

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!