---
url: /docs/guide/usage/linter/rules/vue/define-props-declaration.md
---

### What it does

Enforce consistent declaration style for `defineProps` in Vue.
This rule only works in `<script setup>` with `lang="ts"`.

### Why is this bad?

Inconsistent code style can be confusing and make code harder to
read through.

### Examples

Examples of **incorrect** code for this rule:

```vue
// "vue/define-props-declaration": ["error", "type-based"]
<script setup lang="ts">
const props = defineProps({
  kind: { type: String },
});
</script>

// "vue/define-props-declaration": ["error", "runtime"]
<script setup lang="ts">
const props = defineProps<{
  kind: string;
}>();
</script>
```

Examples of **correct** code for this rule:

```vue
// "vue/define-props-declaration": ["error", "type-based"]
<script setup lang="ts">
const props = defineProps<{
  kind: string;
}>();
</script>

// "vue/define-props-declaration": ["error", "runtime"]
<script setup lang="ts">
const props = defineProps({
  kind: { type: String },
});
</script>
```

## Configuration

This rule accepts one of the following string values:

### `"type-based"`

Enforce type-based declaration.

### `"runtime"`

Enforce runtime declaration.

## How to use

## Version

This rule was added in v1.15.0.

## References