Vue validates prop values at runtime in development mode, but only when each prop includes a type declaration. Without one, Vue cannot check incoming values, type mismatches go undetected, and the component’s expected interface is unclear to consumers.
Array-style prop definitions carry no type information at all. Object-style definitions without a type property also silently opt out
of runtime validation. In both cases, passing a value of the wrong type produces no warning.
To fix the issue, add a type to each prop: either as a shorthand (status: String) or inside a full options object (status: {
type: String }). In <script setup> components, use a TypeScript generic on defineProps instead.
<script>
export default {
props: ['status', 'items'] // Noncompliant: array-style props declare no types
}
</script>
<script>
export default {
props: {
status: String,
items: Array
}
}
</script>
<script setup lang="ts">
const props = defineProps({
status: {}, // Noncompliant: object-style prop without a type property
items: {} // Noncompliant: object-style prop without a type property
});
</script>
<script setup lang="ts">
const props = defineProps<{
status: string;
items: string[];
}>();
</script>