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
) ... ForcedefineExpose
at the end.
{ "order": ["defineProps", "defineEmits"] }
(default)
<!-- ✓ GOOD -->
<script setup>
defineProps(/* ... */)
defineEmits(/* ... */)
</script>
<!-- ✗ BAD -->
<script setup>
defineEmits(/* ... */)
defineProps(/* ... */)
</script>
<!-- ✗ BAD -->
<script setup>
const bar = ref()
defineProps(/* ... */)
defineEmits(/* ... */)
</script>
{ "order": ["defineOptions", "defineModel", "defineProps", "defineEmits", "defineSlots"] }
<!-- ✓ GOOD -->
<script setup>
defineOptions({/* ... */})
const model = defineModel()
defineProps(/* ... */)
defineEmits(/* ... */)
const slots = defineSlots()
</script>
<!-- ✗ BAD -->
<script setup>
defineEmits(/* ... */)
const slots = defineSlots()
defineProps(/* ... */)
defineOptions({/* ... */})
const model = defineModel()
</script>
<!-- ✗ BAD -->
<script setup>
const bar = ref()
defineOptions({/* ... */})
const model = defineModel()
defineProps(/* ... */)
defineEmits(/* ... */)
const slots = defineSlots()
</script>
{ "order": ["definePage", "defineModel", "defineCustom", "defineEmits", "defineSlots"] }
<!-- ✓ GOOD -->
<script setup>
definePage()
const model = defineModel()
defineCustom()
defineEmits(/* ... */)
const slots = defineSlots()
</script>
<!-- ✗ BAD -->
<script setup>
defineEmits(/* ... */)
const slots = defineSlots()
defineProps(/* ... */)
defineCustom({/* ... */})
const model = defineModel()
definePage()
</script>
{ "defineExposeLast": true }
<!-- ✓ GOOD -->
<script setup>
defineProps(/* ... */)
defineEmits(/* ... */)
const slots = defineSlots()
defineExpose({/* ... */})
</script>
<!-- ✗ BAD -->
<script setup>
defineProps(/* ... */)
defineEmits(/* ... */)
defineExpose({/* ... */})
const slots = defineSlots()
</script>
🚀 Version
This rule was introduced in eslint-plugin-vue v8.7.0