pageClass	sidebarDepth	title	description	since
rule-details	0	vue/valid-define-props	enforce valid `defineProps` compiler macro	v7.13.0

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>

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

Nothing.

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