define-props-declaration.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/define-props-declaration	enforce declaration style of `defineProps`	v9.5.0

vue/define-props-declaration

enforce declaration style of defineProps

📖 Rule Details

This rule enforces defineProps typing style which you should use type-based or runtime declaration.

This rule only works in setup script and lang="ts".

<script setup lang="ts">
/* ✓ GOOD */
const props = defineProps<{
  kind: string,
  options: { title: string }
}>()

/* ✗ BAD */
const props = defineProps({
  kind: { type: String },
  options: { type: Object as PropType<{ title: string }> }
})
</script>

🔧 Options

  "vue/define-props-declaration": ["error", "type-based" | "runtime"]

• type-based (default) enforces type-based declaration
• runtime enforces runtime declaration

"runtime"

<script setup lang="ts">
/* ✓ GOOD */
const props = defineProps({
  kind: { type: String },
  options: { type: Object as PropType<{ title: string }> }
})

/* ✗ BAD */
const props = defineProps<{
  kind: string,
  options: { title: string }
}>()
</script>

👫 Related Rules

• vue/define-emits-declaration
• vue/valid-define-props

📚 Further Reading

• defineProps
• Typescript-only-features of defineProps
• Guide - Typing-component-props

🚀 Version

This rule was introduced in eslint-plugin-vue v9.5.0

🔍 Implementation

• Rule source
• Test source