Vue Warn - non-props attributes in dev mode

[tiagobrilhante]

🔧 Console Warnings

hook.js:608 [Vue warn]: Extraneous non-props attributes (default-open) were passed to component but could not be automatically inherited because component renders fragment or text or teleport root nodes.
  at <UNavigationMenu items= [{…}] class="w-full mb-4" default-open=""  ... > 
  at <AppSidebar is-open=true > 
  at <Default ref=Ref< undefined > > 
  at <AsyncComponentWrapper ref=Ref< undefined > > 
  at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default"  ... > 
  at <NuxtLayout > 
  at <ToastProvider swipe-direction="right" duration=5000 > 
  at <Toaster key=0 > 
  at <TooltipProvider > 
  at <ConfigProvider use-id=fn<use-id> dir=undefined locale=undefined > 
  at <App > 
  at <App key=4 > 
  at <NuxtRoot>

defaul-open appears in:

   <UNavigationMenu
        :items="projectItems"
        class="w-full mb-4"
        default-open
        orientation="vertical"
      />

Inside AppSidebar.vue

[tiagobrilhante]

My Solution

Remove the default-open attribute from all UNavigationMenu components:

1. Already configuring defaultOpen correctly in the formatProjectItem() function:

const baseItem: NavigationMenuItem = {
  label: project.name,
  to: `/projects/${project.id}`,
  active: isCurrent,
  defaultOpen: isCurrent, // ← Here's the correct configuration
}

2. The UNavigationMenu from Nuxt UI uses the defaultOpen property of the items, not a default-open attribute on the component.
   The attribute default-open is not a valid prop of the UNavigationMenu component, which is why Vue is warning that it cannot be automatically inherited.

After making this change, the console warnings disappear and the menu opening behavior should continue working correctly, as it's already controlled through the defaultOpen property in the project items.