Environment

• Operating System: Windows_NT
• Node Version: v24.2.0
• Nuxt Version: 3.17.7
• CLI Version: 3.25.1
• Nitro Version: 2.11.13
• Package Manager: [email protected]
• Builder: -
• User Config: future, experimental, css, modules, nitro, i18n, imports, runtimeConfig, icon, compatibilityDate
• Runtime Modules: @nuxtjs/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @nuxt/[email protected], @vueuse/[email protected], @artmizu/[email protected], @nuxtjs/[email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.2.0

Reproduction

The issue is really straight-forward, example code:

<script lang="ts" setup>
const value = ref("");
const items = ["Item 1", "Item 2", "Item 3"];
</script>

<template>
  <div class="space-y-4">
    <UFormField label="USelectMenu">
      <USelectMenu v-model="value" placeholder="Placeholder" :items />
    </UFormField>
    <UFormField label="USelect">
      <USelect v-model="value" placeholder="Placeholder" :items />
    </UFormField>
  </div>
</template>

Description

If the model-value is an empty string, the USelectMenu placeholder doesn't show. This behavior is different than the USelect component, where the placeholder is shown without having to use undefined as the v-model's value.

Additional context

I know I could use undefined for the value here, however in my real code the v-model is bound to a non-optional value, so if I were to initialize it as undefined, TypeScript would freak out. Also, because these components are really similar, these behaviors shouldn't differ in my opinion.

Logs