JS.VUE.VALID.DEFINE.PROPS

Invalid defineProps compiler macros

This rule checks whether defineProps compiler macro is valid.

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 {}.

{'vue/valid-define-props': ['error']}

Copy

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

{'vue/valid-define-props': ['error']}

Copy

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

Copy

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

{'vue/valid-define-props': ['error']}

Copy

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

{'vue/valid-define-props': ['error']}

Copy

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

Copy

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

{'vue/valid-define-props': ['error']}

Copy

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

{'vue/valid-define-props': ['error']}

Copy

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

{'vue/valid-define-props': ['error']}

Copy

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

Nothing.