valid-define-props.md

Pattern: Invalid defineProps compiler macro

Issue: -

Description

This rule reports defineProps compiler macros in the following cases:

• defineProps are 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 {}.

<script setup>
  /* ✓ GOOD */
  defineProps({ msg: String })
</script>

<script setup>
  /* ✓ GOOD */
  defineProps(['msg'])
</script>

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

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

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

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

<script setup>
  /* ✗ BAD */
  defineProps({ msg: String })
  defineProps({ count: Number })
</script>

<script>
  export default {
    props: { msg: String }
  }
</script>
<script setup>
  /* ✗ BAD */
  defineProps({ count: Number })
</script>

<script setup>
  /* ✗ BAD */
  defineProps()
</script>

Further Reading

• eslint-plugin-vue - valid-define-props