Default values are not loaded in the v-model

[Rednas83]

Environment

• Operating System: Windows_NT
• Node Version: v22.14.0
• Nuxt Version: 3.16.2
• CLI Version: 3.24.0
• Nitro Version: 2.11.8
• Package Manager: [email protected]
• Builder: -
• User Config: modules, css, build, supabase, content, pinia, devtools, debug, routeRules, future, compatibilityDate, eslint
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected], @vueuse/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @pinia/[email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.1.0

Reproduction

<template>
  <div class="flex">
    <UForm :state="state" class="w-1/2 p-4">
      <UFormField v-for="(item, index) in items" :key="index" :label="index" :name="index">
        <UColorPicker v-if="index == 'color'" v-model="state[index]" :default-value="item" />
        <USlider v-if="index == 'range' && typeof item == 'number'" v-model="state[index]" :default-value="item" />
        <UInput v-if="typeof state[index] == 'boolean'" :type="index" :value="index" :checked="item" />
        <UInput v-else :type="index" v-model="state[index]" :default-value="item" />
      </UFormField>
    </UForm>
    <pre class="w-1/2 bg-gray-200 p-4 leading-14"> {{ state }} </pre>
  </div>
</template>

<script lang="ts" setup>
const state = ref({}) // ISSUE: Default values are not loaded in the v-model
const items = {
  number: 50,
  reset: true, // ISSUE: UInput is not supporting boolean values for v-model
  submit: true, // ISSUE: UInput is not supporting boolean values for v-model
  search: "search",
  date: "2025-04-25",
  text: "text",
  color: "#ccffcc",
  button: true, // ISSUE: UInput is not supporting boolean values for v-model
  checkbox: false, // ISSUE: UInput is not supporting boolean values for v-model
  "datetime-local": "2025-04-25T10:49:31",
  email: "[email protected]",
  file: "",
  hidden: "hidden",
  image: "image.svg",
  month: "2025-04",
  password: "topsecret",
  radio: true, // ISSUE: UInput is not supporting boolean values for v-model
  range: 50, // Default value is displayed but not loaded in the v-model
  tel: "0612345678",
  time: "10:49:31",
  url: "www.chatgpt.com",
  week: "2025-W16"
}
// const state = reactive(items) // Workaround for default-value
</script>

Description

I made a small comparison between UInput and other components like UColorPicker and USlider and I stumbled on a couple of issues.

• default-value is not displayed except for range and USlider
• default-value is never initialized in the v-model
• Booleans are not supported in the v-model and I was therefore not able to make them reactive.

Workaround is to load the default value via the state, but that requires an additional step and is therefore not ideal for dynamic forms
const state = reactive(items)

Workaround for working with booleans, but I am not sure how to apply the v-model yet🤔
<UInput v-if="typeof state[index] == 'boolean'" :type="index" :value="index" :checked="item" />

Additional context

Default values via default-value

Default value via state

Logs