UTabs: Numeric value 0 coerced to string due to falsy check in TabsTrigger

[Andronikos-gls]

Environment

• Operating System: Windows_NT
• Node Version: v22.17.1
• Nuxt Version: 4.0.3
• CLI Version: 3.27.0
• Nitro Version: 2.12.4
• Package Manager: pnpm@10.15.0
• Builder: -
• User Config: compatibilityDate, devtools, test, modules, dayjs, tiptap, css, app, components, icon, i18n, security, runtimeConfig
• Runtime Modules: @nuxt/eslint@1.7.1, @nuxt/scripts@0.11.10, @nuxt/test-utils@3.19.2, @nuxt/ui@3.3.2, @nuxtjs/i18n@10.0.3, @nuxtjs/tailwindcss@7.0.0-beta.0, @vueuse/nuxt@13.6.0, nuxt-security@2.3.0, dayjs-nuxt@2.1.11, nuxt-tiptap-editor@2.3.1
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.3.2

Reproduction

Use this on a page and you'll be able to see how the tabIndex value becomes a string when selecting the first tab with value 0

<template>
  <div>
    {{ tabIndex }} : {{ typeof tabIndex }} 
    <UTabs 
      v-model="tabIndex"
      :items="tabItems"
    />
  </div>
</template>

<script setup>
const tabIndex = ref(0)
const tabItems = [
  {
    accessorKey: 'firstTab',
    label: 'First Tab',
    value: 0
  },
  {
    accessorKey: 'secondTab',
    label: 'Second Tab',
    value: 1
  },
  {
    accessorKey: 'thirdTab',
    label: 'Third Tab',
    value: 2
  }
]
</script>

Description

In Nuxt UI's UTabs component, when an item's value is set to 0 (a number), the internal TabsTrigger evaluates :value="item.value || String(index)". Since 0 is falsy in JavaScript, it falls back to String(index) (e.g., '0'), causing the v-model to update as a string instead of a number, leading to unexpected type coercion after tab selection.

Potential solution:

:value="item.value ?? String(index)"

This uses the nullish coalescing operator (??), which only falls back if item.value is null or undefined (not falsy values like 0), preserving the numeric type for 0 while maintaining the intended fallback behavior for missing values.

Additional context

No response

Logs

[Andronikos-gls]

Bump