# vue/valid-define-props

enforce valid defineProps compiler macro

⚙️ This rule is included in all of "plugin:vue/vue3-essential", "plugin:vue/essential", "plugin:vue/vue3-strongly-recommended", "plugin:vue/strongly-recommended", "plugin:vue/vue3-recommended" and "plugin:vue/recommended".

This rule checks whether defineProps compiler macro is valid.

# 📖 Rule Details

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>

Now loading...

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

Now loading...

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

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

Now loading...

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

Now loading...

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

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

Now loading...

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

Now loading...

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

Now loading...

Nothing.

This rule was introduced in eslint-plugin-vue v7.13.0