vuejs / language-tools

⚡ High-performance Vue language tooling based-on Volar.js
https://marketplace.visualstudio.com/items?itemName=Vue.volar
MIT License
5.81k stars 394 forks source link

defineModel with {required: true} shows as error #4917

Closed Mik-pe closed 4 days ago

Mik-pe commented 5 days ago

Vue - Official extension or vue-tsc version

2.1.6

VSCode version

Version: 1.94.1 Commit: e10f2369d0d9614a452462f2e01cdc4aa9486296 Date: 2024-10-05T05:44:32.189Z Electron: 30.5.1 ElectronBuildId: 10262041 Chromium: 124.0.6367.243 Node.js: 20.16.0 V8: 12.4.254.20-electron.0 OS: Linux x64 6.8.0-1011-oem

Vue version

3.5.11

TypeScript version

5.6.2

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i7-13700H
    Memory: 14.29 GB / 30.93 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 18.19.1 - /usr/bin/node
    npm: 9.2.0 - /usr/bin/npm
  Browsers:
    Chrome: 129.0.6668.100

package.json dependencies

No response

Steps to reproduce

Defining a BaseFoo component as:

<template>
  <input v-model="modelValue">
</template>

<script setup lang="ts">
const modelValue = defineModel({ required: true });
</script>

and using it through my BaseFooTest parent:

<template>
  <BaseFoo
    v-model="foo"
  />
</template>

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

const foo = ref('foo');
</script>

What is expected?

The type for v-model in BaseFooTest can be bound without type errors

What is actually happening?

There are type errors in BaseFooTest image

Removing the {required: true} in BaseFoo makes the error go away, using only: const modelValue = defineModel();

Link to minimal reproduction

No response

Any additional comments?

I found that setting a v-model name: const modelValue = defineModel('value', {required:true}); also hides the error

KazariEX commented 5 days ago

What does your tsconfig.json look like?

Mik-pe commented 5 days ago

What does your tsconfig.json look like?

I noticed that my tsconfig.json referenced an older vueCompilerOptions

"vueCompilerOptions": {
    "target": 2.7
},

Changing this to "auto" or 3.5 makes this function as intended, thanks!