[Vue warn] toRefs() expects a reactive object but received a plain one - <UNavigationMenu />

[StirStudios]

Environment

  System:
    OS: macOS 15.5
    CPU: (14) arm64 Apple M3 Max
    Memory: 555.83 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.11.0 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.9.2 - /opt/homebrew/bin/npm
    pnpm: 9.12.3 - /opt/homebrew/bin/pnpm
    Watchman: 2025.04.28.00 - /opt/homebrew/bin/watchman
  npmPackages:
    nuxt: ^3.17.3 => 3.17.4 

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.17.4

Reproduction

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

Description

When using the UNavigationMenu component from Nuxt UI 3 in a fresh Nuxt 3 app, the following warning appears in the browser console:

> [Vue warn] toRefs() expects a reactive object but received a plain one.

This occurs even when rendering the component barebones:

pages/index.vue:

<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'

const items = ref<NavigationMenuItem[]>([
  {
    label: 'Guide',
    icon: 'i-lucide-book-open',
    to: '/getting-started',
    children: [
      {
        label: 'Introduction',
        description: 'Fully styled and customizable components for Nuxt.',
        icon: 'i-lucide-house'
      },
      {
        label: 'Installation',
        description: 'Learn how to install and configure Nuxt UI in your application.',
        icon: 'i-lucide-cloud-download'
      },
      {
        label: 'Icons',
        icon: 'i-lucide-smile',
        description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
      },
      {
        label: 'Colors',
        icon: 'i-lucide-swatch-book',
        description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
      },
      {
        label: 'Theme',
        icon: 'i-lucide-cog',
        description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
      }
    ]
  },
  {
    label: 'Composables',
    icon: 'i-lucide-database',
    to: '/composables',
    children: [
      {
        label: 'defineShortcuts',
        icon: 'i-lucide-file-text',
        description: 'Define shortcuts for your application.',
        to: '/composables/define-shortcuts'
      },
      {
        label: 'useOverlay',
        icon: 'i-lucide-file-text',
        description: 'Display a modal/slideover within your application.',
        to: '/composables/use-overlay'
      },
      {
        label: 'useToast',
        icon: 'i-lucide-file-text',
        description: 'Display a toast within your application.',
        to: '/composables/use-toast'
      }
    ]
  },
  {
    label: 'Components',
    icon: 'i-lucide-box',
    to: '/components',
    active: true,
    children: [
      {
        label: 'Link',
        icon: 'i-lucide-file-text',
        description: 'Use NuxtLink with superpowers.',
        to: '/components/link'
      },
      {
        label: 'Modal',
        icon: 'i-lucide-file-text',
        description: 'Display a modal within your application.',
        to: '/components/modal'
      },
      {
        label: 'NavigationMenu',
        icon: 'i-lucide-file-text',
        description: 'Display a list of links.',
        to: '/components/navigation-menu'
      },
      {
        label: 'Pagination',
        icon: 'i-lucide-file-text',
        description: 'Display a list of pages.',
        to: '/components/pagination'
      },
      {
        label: 'Popover',
        icon: 'i-lucide-file-text',
        description: 'Display a non-modal dialog that floats around a trigger element.',
        to: '/components/popover'
      },
      {
        label: 'Progress',
        icon: 'i-lucide-file-text',
        description: 'Show a horizontal bar to indicate task progression.',
        to: '/components/progress'
      }
    ]
  },
  {
    label: 'GitHub',
    icon: 'i-simple-icons-github',
    badge: '3.8k',
    to: 'https://github.com/nuxt/ui',
    target: '_blank'
  },
  {
    label: 'Help',
    icon: 'i-lucide-circle-help',
    disabled: true
  }
])
</script>
<template>
  <UNavigationMenu :items="items" class="w-full justify-center" />
</template>

Minimal Reproduction
Repro created using Nuxt 3 + Nuxt UI 3 starter structure.

package.json:

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "lint": "eslint .",
    "lint:fix": "eslint --fix ."
  },
  "dependencies": {
    "@iconify-json/lucide": "^1.2.44",
    "@iconify-json/simple-icons": "^1.2.35",
    "@nuxt/ui": "^3.1.1",
    "nuxt": "^3.17.3"
  },
  "devDependencies": {
    "@nuxt/eslint": "^1.4.1",
    "eslint": "^9.27.0",
    "typescript": "^5.8.3"
  }
}

Notes
• Reproduces consistently in local dev.
• Does not reproduce on Codesandbox with the Nuxt UI 3 starter (possibly due to different runtime setup).
• No functional issues observed so far, but the warning pollutes the console.
• This warning has only recently started appearing in the console logs, despite no code changes to this component on our end — possibly introduced in a recent dependency update.

[benjamincanac]

This is an upstream issue introduced in [email protected]: unovue/reka-ui#1962.

[StirStudios]

Yup looks like it to me!

[theflyingape]

Yikes, that reka-ui release was fairly significant to get rolled into Nuxt UI so quickly... why didn't it stay pinned to 2.2.1:

$ grep reka package*
package-lock.json:        "reka-ui": "^2.2.1",
package-lock.json:    "node_modules/reka-ui": {
package-lock.json:      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.3.0.tgz",
package-lock.json:    "node_modules/reka-ui/node_modules/@vueuse/core": {
package-lock.json:    "node_modules/reka-ui/node_modules/@vueuse/metadata": {
package-lock.json:    "node_modules/reka-ui/node_modules/@vueuse/shared": {
package-lock.json:        "reka-ui": "^2.0.0",
package-lock.json:        "reka-ui": "^2.0.0",

The issue mentioned here has been marked closed last week, but is not available.

[benjamincanac]

@theflyingape What do you mean so quickly? It was updated there: https://github.com/nuxt/ui/pull/4234/files but hasn't been released yet. You can set the resolution in your own app to 2.2.1.

[theflyingape]

I see, so Nuxt UI project upstream dependencies like this one (which I never heard of until yesterday) that are packaged & deployed is the end user / customer's responsibility. I am grateful that its open source community opened this ticket and the response to its root cause was identified and reported "so quickly" -- thank you

I am not trolling. This Nuxt / Nuxt UI stack gave me pause to choose, because of dependency depth. But, overall documentation and ticket / resolution activity was enough assurances to move forward. And I stage all our development changes, including regular OS & package updates, with app regression testing before deploying out to the team.

I imagine folks got the same level of shock when this issue broke stuff immediately, before even getting to a "hero page", etc. It begs the feedback we are having now -- please accept this for what it is.

Onward.

[benjamincanac]

No actually I think you make a good point, the reka-ui dependency should be pinned as it's the core foundation of many components: 22b917a