Vue Router warning: /api/_mdc/highlight route not found when used with @nuxt/content and @nuxt/ui

[lukaskunhardt]

Description

When using @nuxtjs/mdc together with @nuxt/content and @nuxt/ui in Nuxt 4, the /api/_mdc/highlight API route is not properly accessible. This causes Vue Router warnings in the console and inconsistent syntax highlighting behavior.

Environment

• Node.js: 22.x
• nuxt: 4.2.2
• @nuxtjs/mdc: 0.19.1
• @nuxt/content: 3.9.0
• @nuxt/ui: 4.2.1
• vue: 3.5.25
• OS: macOS

Reproduction

1. Create a Nuxt 4 project with @nuxt/content, @nuxtjs/mdc, and @nuxt/ui
2. Use the <MDC :value="markdownString" /> component to render markdown containing code blocks
3. Run pnpm dev
4. Navigate to a page using the MDC component

nuxt.config.ts

```typescript
export default defineNuxtConfig({
modules: [
"@nuxt/eslint",
"@nuxt/ui",
"@nuxtjs/seo",
"@nuxtjs/mdc",
"@nuxt/content",
"@vueuse/nuxt",
"@nuxtjs/supabase",
],
content: {
build: {
markdown: {
highlight: {
theme: {
default: "github-light",
dark: "github-dark",
},
langs: ["json", "javascript", "typescript"],
},
},
},
},
mdc: {
highlight: {
theme: {
default: "github-light",
dark: "github-dark",
},
langs: ["json", "javascript", "typescript", "bash", "yaml"],
},
},
compatibilityDate: "2025-12-11",
});
```

Component usage

```vue

```

Expected Behavior

The /api/_mdc/highlight route should be registered and accessible, allowing the <MDC> component to fetch syntax-highlighted code from the server.

Actual Behavior

Vue Router logs warnings in the console:

```
[Vue Router warn]: No match found for location with path "/api/_mdc/highlight?code=...&lang=json&theme=..."
```

The warning shows the theme includes "light":"material-theme-lighter" which appears to come from @nuxt/ui's default MDC configuration, suggesting a configuration merge issue.

Observations

1. The route IS defined in .nuxt/types/nitro-routes.d.ts, indicating the module attempts to register it
2. The warning comes from Vue Router (not Nitro/h3), suggesting the request is being routed incorrectly
3. @nuxt/ui sets its own MDC highlight config with defu(), which may interfere with the route registration
4. Syntax highlighting works inconsistently - sometimes via the browser fallback (sessionStorage set to "browser"), sometimes not at all
5. Adding @nuxtjs/mdc explicitly to the modules array (before @nuxt/content) does not resolve the issue

Additional Context

Looking at the MDC module source, the API route should be registered when options.highlight !== false and options.highlight?.noApiRoute !== true:

```javascript
if (options.highlight?.noApiRoute !== true) {
addServerHandler({
route: "/api/_mdc/highlight",
handler: resolver.resolve("./runtime/highlighter/event-handler")
});
}
```

The route appears to be registered, but something in the request flow is causing it to go through Vue Router instead of Nitro.

Workaround

Currently, the only workaround is to rely on the browser-based fallback highlighting, which is inconsistent and requires clearing sessionStorage to reset.

[Mat4m0]

Can confirm issue

[jojugaad]

So can I ... :-(

[screeny05]

I found a workaround from this issue:

#436 (comment)

export default defineNuxtConfig({
  content: {
    build: {
      markdown: {
        highlight: {
          noApiRoute: false
        } as any
      }
    }
  }
});