# 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...

# 🔧 Options

Nothing.

# 🚀 Version

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

# 🔍 Implementation

Last Updated: 5/11/2022, 11:50:07 PM