Skip to content

vue/define-macros-order

enforce order of compiler macros (defineProps, defineEmits, etc.)

  • 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.
  • 💡 Some problems reported by this rule are manually fixable by editor suggestions.

📖 Rule Details

This rule reports compiler macros (like defineProps or defineEmits but also custom ones) when they are not the first statements in <script setup> (after any potential import statements or type definitions) or when they are not in the correct order.

🔧 Options

json
{
  "vue/define-macros-order": ["error", {
    "order": ["defineProps", "defineEmits"],
    "defineExposeLast": false
  }]
}
  • order (string[]) ... The order in which the macros should appear. The default is ["defineProps", "defineEmits"].
  • defineExposeLast (boolean) ... Force defineExpose at the end.

{ "order": ["defineProps", "defineEmits"] } (default)

<!-- ✓ GOOD --> <script setup> defineProps(/* ... */) defineEmits(/* ... */) </script>
Now loading...
<!-- ✗ BAD --> <script setup> defineEmits(/* ... */) defineProps(/* ... */) </script>
Now loading...
<!-- ✗ BAD --> <script setup> const bar = ref() defineProps(/* ... */) defineEmits(/* ... */) </script>
Now loading...

{ "order": ["defineOptions", "defineModel", "defineProps", "defineEmits", "defineSlots"] }

<!-- ✓ GOOD --> <script setup> defineOptions({/* ... */}) const model = defineModel() defineProps(/* ... */) defineEmits(/* ... */) const slots = defineSlots() </script>
Now loading...
<!-- ✗ BAD --> <script setup> defineEmits(/* ... */) const slots = defineSlots() defineProps(/* ... */) defineOptions({/* ... */}) const model = defineModel() </script>
Now loading...
<!-- ✗ BAD --> <script setup> const bar = ref() defineOptions({/* ... */}) const model = defineModel() defineProps(/* ... */) defineEmits(/* ... */) const slots = defineSlots() </script>
Now loading...

{ "order": ["definePage", "defineModel", "defineCustom", "defineEmits", "defineSlots"] }

<!-- ✓ GOOD --> <script setup> definePage() const model = defineModel() defineCustom() defineEmits(/* ... */) const slots = defineSlots() </script>
Now loading...
<!-- ✗ BAD --> <script setup> defineEmits(/* ... */) const slots = defineSlots() defineProps(/* ... */) defineCustom({/* ... */}) const model = defineModel() definePage() </script>
Now loading...

{ "defineExposeLast": true }

<!-- ✓ GOOD --> <script setup> defineProps(/* ... */) defineEmits(/* ... */) const slots = defineSlots() defineExpose({/* ... */}) </script>
Now loading...
<!-- ✗ BAD --> <script setup> defineProps(/* ... */) defineEmits(/* ... */) defineExpose({/* ... */}) const slots = defineSlots() </script>
Now loading...

🚀 Version

This rule was introduced in eslint-plugin-vue v8.7.0

🔍 Implementation