Skip to content

Type of v-model prop in NavigationMenu (type multiple) in Nuxt UI is string, but should be string[] #5392

@leonardschoyen-at-dfo

Description

@leonardschoyen-at-dfo

Environment

  • Operating System: Windows_NT
  • Node Version: v22.18.0
  • Nuxt Version: 4.1.3
  • CLI Version: 3.29.3
  • Nitro Version: 2.12.6
  • Package Manager: npm@11.6.2
  • Builder: -
  • User Config: ssr, colorMode, app, nitro, hooks, vite, typescript, runtimeConfig, icon, oidc, modules, compatibilityDate, css, postcss, ui
  • Runtime Modules: @nuxt/ui@4.0.1, @nuxt/icon@1.15.0, @nuxtjs/color-mode@3.5.2, @pinia/nuxt@0.11.1, nuxt-oidc-auth@1.0.0-beta.5
  • Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

4.1.0

Reproduction

The type of the model of Accordian, and therefore also NavigationMenu, doesn't depend on if the type is single or multiple, but it should.

Description

The values that comes out of NavigationMenu with type multiple thru the v-model prop is a proxy of a string array, but the type of the v-model is string | undefined (like if it had type single). When trying to change which menu items are open programmatically by maniuplating the string array proxy that comes out, it will spit out numerous errors complaining about the type, but it will work.

Additional context

No response

Logs

Sidebar.vue?t=1762431439519:315 
 [Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected String with value "", got Array  
  at <NavigationMenuRoot orientation="vertical" delayDuration=0 unmountOnHide=true  ... > 
  at <UNavigationMenu popover="" tooltip="" orientation="vertical"  ... > 
  at <Sidebar links= 
(6) [{…}, {…}, {…}, {…}, {…}, {…}]
 > 
  at <PeriodClosing ref=Ref< 
Proxy(Object) {__v_skip: true}
 > > 
  at <AsyncComponentWrapper ref=Ref< 
Proxy(Object) {__v_skip: true}
 > > 
  at <LayoutLoader key="period-closing" layoutProps= 
{ref: RefImpl}
 name="period-closing" > 
  at <NuxtLayoutProvider layoutProps= 
{ref: RefImpl}
 key="period-closing" name="period-closing"  ... > 
  at <NuxtLayout > 
  at <ToastProvider swipe-direction="right" duration=7000 > 
  at <Toaster key=0 duration=7000 > 
  at <TooltipProvider > 
  at <ConfigProvider use-id=fn<use-id> dir=undefined locale=undefined > 
  at <App toaster= 
{duration: 7000}
 > 
  at <App key=4 > 
  at <NuxtRoot>
Promise.then		
(anonymous)	@	Sidebar.vue?t=1762431439519:315
(anonymous)	@	client:66
(anonymous)	@	client:218
(anonymous)	@	client:196
queueUpdate	@	client:196
await in queueUpdate		
(anonymous)	@	client:839
handleMessage	@	client:838
await in handleMessage		
(anonymous)	@	client:458
dequeue	@	client:480
(anonymous)	@	client:472
enqueue	@	client:466
(anonymous)	@	client:458
onMessage	@	client:305
(anonymous)	@	client:413

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingtriageAwaiting initial review and prioritizationv4#4488

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions