nullable v-model

[valh1996]

Vue - Official extension

2.1.10

VSCode version

1.95.3

Vue version

^3.5.13

TypeScript version

^5.6.3

System Info

System:
    OS: macOS 14.6.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 644.78 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Yarn: 1.22.22 - ~/Library/pnpm/yarn
    npm: 10.9.0 - ~/Library/Application Support/Herd/config/nvm/versions/node/v22.11.0/bin/npm
    pnpm: 9.4.0 - /opt/homebrew/bin/pnpm
    bun: 1.0.26 - ~/.bun/bin/bun
  Browsers:
    Chrome: 131.0.6778.109
    Safari: 17.6

package.json dependencies

No response

Steps to reproduce

Following PR #4648, the bug seems to persist.
I'm using nuxt/ui where modeValue are nullable but null is not included in the type definition.

What is expected?

For the following type :

modelValue: {
  type: PropType<string | number | null>;
  default: string;
};

The TS definition should be string | number | undefined | null

What is actually happening?

null is not included in the type definition string | number | undefined

For nuxt/ui :

Cannot assign type 'string | null' to type 'string | number | undefined'.
Cannot assign type 'null' to type 'string | number | undefined'

Link to minimal reproduction

No response

Any additional comments?

No response

[valh1996]

Btw, I notice that PR #4648 fix usage with script setup, while nuxt/ui uses defineComponent

[KazariEX]

What is the minimum use case like?

[valh1996]

What is the minimum use case like?

TestComponent.vue

<template>
  <div>{{ modelValue }}</div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

export default defineComponent({
  props: {
    modelValue: {
      type: [String, Number] as PropType<string | number | null>,
      default: ''
    }
  }
})
</script>

<template>
  <test-component v-model="value" /> <!-- here null is not accepted -->
</template>

<script setup lang="ts">
import { ref } from 'vue'
import TestComponent from './TestComponent.vue'

const value = ref(null)
</script>

[KazariEX]

I cannot reproduce it. Have you bumped all deps to the latest version?

[valh1996]

@KazariEX So maybe my minimal use case is wrong.

I have this problem in particular with @nuxt/ui 2.x, I tried to make the minimum reproduction based on the structure of their components. Let's take UInput as an example:

[KazariEX]

After investigation, it was found that the issue is with @nuxt/ui, which set strictNullCheck to false in TSConfig, causing the null that should have existed to be erased from the type when compiling the component.

[valh1996]

Oh, I wouldn't have thought! Good catch! Thank you very much! I'll take a look at what we can do.