Skip to content

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>
Now loading...

🔧 Options

json
  "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...

📚 Further Reading

🚀 Version

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

🔍 Implementation