vue/define-props-declaration

enforce declaration style of defineProps

• 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

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

Now loading...

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

Now loading...

👫 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