Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

JS defineProps() does not mark props as required #4876

Copy link
Copy link
@phil294

Description

@phil294
Issue body actions

Vue - Official extension or vue-tsc version

2.1.6

VSCode version

1.93.1

Vue version

3.5.8

TypeScript version

5.5.4

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (6) arm64 unknown
    Memory: 16.18 GB / 22.27 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
  Browsers:
    Brave Browser: 128.1.69.168

package.json dependencies

"dependencies": {
    "vue": "^3.4.29"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "vite": "^5.3.1"
  }

Steps to reproduce

JS (not TS) defineProps with a required prop:

<script setup>
defineProps({
  msg: {
    type: String,
    required: true
  }
})
</script>

In another component, import this component and use it in the template.

What is expected?

The prop cannot be omitted.

What is actually happening?

The prop is falsely marked as optional.

This image is from the repro repo:

image

When you define the component globally via components.d.ts, the typing becomes more obvious:

image

There's no error for the missing required_prop on the left. When I add lang="ts" to the script tag on the right, the error appears.

Link to minimal reproduction

https://github.com/phil294/vue-bug-repo

Any additional comments?

When you define props as

<script>
export default {
  props:{
    msg: {
      type: String,
      required: true
    }
  },
  setup() {
  }
}
</script>

nothing works at all. This was already reported in #4074 and is allegedly because of #3690 (which to me it doesn't seem like it but idk) which is labelled as a "minor" bug. In my opinion this isn't minor as arguably the main point of Volar, IntelliSense in Vue templates, is pretty much unusable if you're not using TS :-S

Metadata

Metadata

Assignees

No one assigned

    Labels

    good reproduction ✨This issue provides a good reproduction, we will be able to investigate it firstThis issue provides a good reproduction, we will be able to investigate it first

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.