# 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 declarationruntimeenforces 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
# 📚 Further Reading
defineProps(opens new window)- Typescript-only-features of
defineProps(opens new window) - Guide - Typing-component-props (opens new window)
# 🚀 Version
This rule was introduced in eslint-plugin-vue v9.5.0