vue/define-props-declaration Style

What it does

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

Examples

Examples of incorrect code for this rule:

// "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/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>

Options

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

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

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny vue/define-props-declaration --vue-plugin

Config (.oxlintrc.json)

{
  "plugins": ["vue"],
  "rules": {
    "vue/define-props-declaration": "error"
  }
}

References

• Rule Source