vue/valid-define-props Correctness

🚧 An auto-fix is still under development.

What it does

This rule checks whether defineProps compiler macro is valid.

This rule reports defineProps compiler macros in the following cases:

• defineProps is referencing locally declared variables.
• defineProps has both a literal type and an argument. e.g. defineProps<{ /*props*/ }>({ /*props*/ })
• defineProps has been called multiple times.
• Props are defined in both defineProps and export default {}.
• Props are not defined in either defineProps or export 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:

<script setup>
const def = { msg: String };
defineProps(def);
</script>

<script setup lang="ts">
defineProps<{ msg?: string }>({ msg: String });
</script>

<script setup>
defineProps({ msg: String });
defineProps({ count: Number });
</script>

<script>
export default {
  props: { msg: String },
};
</script>
<script setup>
defineProps({ count: Number });
</script>

Examples of correct code for this rule:

<script setup>
defineProps({ msg: String });
</script>

<script setup>
defineProps(["msg"]);
</script>

<script setup lang="ts">
defineProps<{ msg?: string }>();
</script>

<script>
export default {
  props: { msg: String },
};
</script>
<script setup>
defineProps();
</script>

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny vue/valid-define-props --vue-plugin

Config (.oxlintrc.json)

{
  "plugins": ["vue"],
  "rules": {
    "vue/valid-define-props": "error"
  }
}

References

• Rule Source