UNavigationMenu lacks built-in support for localized routes (i18n)

[al1maher]

Environment

• Operating System: Windows_NT
• Node Version: v22.12.0
• Nuxt Version: 3.17.4
• CLI Version: 3.25.1
• Nitro Version: 2.11.12
• Package Manager: npm@10.9.0
• User Config: compatibilityDate, devtools, ssr, future, app, css, modules, build, vite, eslint, i18n, runtimeConfig, experimental, imports
• Runtime Modules: @nuxt/eslint@1.4.1, @nuxt/test-utils@3.19.1, @nuxt/ui@3.2.0, @nuxtjs/i18n@9.5.5

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.2.0

Reproduction

https://codesandbox.io/p/devbox/nuxt-ui3-n3sxks

Description

The UNavigationMenu component doesn't have built-in support for generating localized routes when using @nuxtjs/i18n. When using locale prefixes (e.g., /en/dashboard, /ar/dashboard), the navigation items don't automatically adapt to the current locale.

Expected behavior:

The component should automatically handle locale prefixes when @nuxtjs/i18n is configured, similar to how works with localePath().

Proposed solution:

Auto-detect @nuxtjs/i18n configuration
Apply localePath() internally to to props
Add optional localized prop for explicit control
Maintain backward compatibility

This would eliminate boilerplate code and improve DX for internationalized applications using Nuxt UI navigation components.

Additional context

Current Workaround Required:

<script setup>
const { locale } = useI18n()

// Manual helper function needed
const getLocalizedRoute = (path) => {
  if (locale.value === 'ar') {
    return `/example/ar${path}`
  }
  return `/example${path}`
}

const sidebarItems = computed(() => [
  [{
    label: 'Dashboard',
    icon: 'i-lucide-home',
    to: getLocalizedRoute('/dashboard/'), // Manual localization
  }]
])
</script>

Logs

[HugoRCD]

@al1maher Indeed, it would improve DX, but in this case there are a lot of options on the @nuxtjs/i18n module, and I think that managing this well would add a level of complexity to the component that isn't necessarily relevant in many cases, and it's not something that's really complicated for the user to manage.🤔 That's my opinion but I'm open to discussion 😁

[al1maher]

@al1maher Indeed, it would improve DX, but in this case there are a lot of options on the @nuxtjs/i18n module, and I think that managing this well would add a level of complexity to the component that isn't necessarily relevant in many cases, and it's not something that's really complicated for the user to manage.🤔 That's my opinion but I'm open to discussion 😁

I fully agree with you in many points. I took a look at the component itself and indeed it would increase the complexity. That said, I believe there's a middle ground. Even without full integration, we could at least provide some level of i18n awareness to the user. And in general, I think this is an area where NuxtUI needs to improve in, making it more inclusive, especially for non-latin users.

I already tried to add my two cents to this, e.g. in #4251