eslint-plugin-vue

Appearance

vue/block-order ​

enforce order of component top-level elements

  • ⚙️ This rule is included in all of "plugin:vue/recommended", *.configs["flat/recommended"], "plugin:vue/vue2-recommended" and *.configs["flat/vue2-recommended"].
  • 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 Rule Details ​

This rule warns about the order of the top-level tags, such as <script>, <template> & <style>.

🔧 Options ​

json
{
  "vue/block-order": ["error", {
    "order": [ [ "script", "template" ], "style" ]
  }]
}
  • order ((string|string[])[]) ... The order of top-level element names. default [ [ "script", "template" ], "style" ]. May also be CSS selectors, such as script[setup] and i18n:not([locale=en]).

{ "order": [ [ "script", "template" ], "style" ] } (default) ​

<!-- ✓ GOOD --> <script>/* ... */</script> <template>...</template> <style>/* ... */</style>
Now loading...
<!-- ✓ GOOD --> <template>...</template> <script>/* ... */</script> <style>/* ... */</style>
Now loading...
<!-- ✗ BAD --> <style>/* ... */</style> <script>/* ... */</script> <template>...</template>
Now loading...

{ "order": ["template", "script", "style"] } ​

<!-- ✓ GOOD --> <template>...</template> <script>/* ... */</script> <style>/* ... */</style>
Now loading...
<!-- ✗ BAD --> <script>/* ... */</script> <template>...</template> <style>/* ... */</style>
Now loading...

{ "order": ["docs", "template", "script", "style"] } ​

<!-- ✓ GOOD --> <docs> documentation </docs> <template>...</template> <script>/* ... */</script> <style>/* ... */</style>
Now loading...
<!-- ✗ BAD --> <template>...</template> <script>/* ... */</script> <docs> documentation </docs> <style>/* ... */</style>
Now loading...

{ 'order': ['template', 'script:not([setup])', 'script[setup]'] } ​

<!-- ✓ GOOD --> <template>...</template> <script>/* ... */</script> <script setup>/* ... */</script>
Now loading...
<!-- ✗ BAD --> <template>...</template> <script setup>/* ... */</script> <script>/* ... */</script>
Now loading...

{ 'order': ['template', 'style:not([scoped])', 'style[scoped]'] } ​

<!-- ✓ GOOD --> <template>...</template> <style>/* ... */</style> <style scoped>/* ... */</style>
Now loading...
<!-- ✗ BAD --> <template>...</template> <style scoped>/* ... */</style> <style>/* ... */</style>
Now loading...

{ 'order': ['template', 'i18n:not([locale=en])', 'i18n[locale=en]'] } ​

<!-- ✓ GOOD --> <template>...</template> <i18n locale="ja">/* ... */</i18n> <i18n locale="en">/* ... */</i18n>
Now loading...
<!-- ✗ BAD --> <template>...</template> <i18n locale="en">/* ... */</i18n> <i18n locale="ja">/* ... */</i18n>
Now loading...

📚 Further Reading ​

🚀 Version ​

This rule was introduced in eslint-plugin-vue v9.16.0

🔍 Implementation ​