vue/valid-define-props Correctness
What it does
Enforce valid usage of the defineProps compiler macro in Vue.
This rule reports defineProps compiler macros in the following cases:
definePropsis referencing locally declared variables.definePropshas both a literal type and an argument. e.g.defineProps<{ /*props*/ }>({ /*props*/ })definePropshas been called multiple times.- Props are defined in both
definePropsandexport default {}. - Props are not defined in either
definePropsorexport default {}.
Why is this bad?
Misusing defineProps can lead to runtime errors, and lost type safety. Vue may still compile the code, but properties may break silently or be typed incorrectly.
Examples
Examples of incorrect code for this rule:
vue
<script setup>
const def = { msg: String };
defineProps(def);
</script>vue
<script setup lang="ts">
defineProps<{ msg?: string }>({ msg: String });
</script>vue
<script setup>
defineProps({ msg: String });
defineProps({ count: Number });
</script>vue
<script>
export default {
props: { msg: String },
};
</script>
<script setup>
defineProps({ count: Number });
</script>Examples of correct code for this rule:
vue
<script setup>
defineProps({ msg: String });
</script>vue
<script setup>
defineProps(["msg"]);
</script>vue
<script setup lang="ts">
defineProps<{ msg?: string }>();
</script>vue
<script>
export default {
props: { msg: String },
};
</script>
<script setup>
defineProps();
</script>How to use
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["vue"],
"rules": {
"vue/valid-define-props": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["vue"],
rules: {
"vue/valid-define-props": "error",
},
});bash
oxlint --deny vue/valid-define-props --vue-pluginVersion
This rule was added in v1.15.0.