Note

This is a documentation for version 7.0.0-alpha.0.
To check version 6.2.2 go here. To check previous releases go here.

# vue/component-tags-order

enforce order of component top-level elements

  • ⚙️ This rule is included in "plugin:vue/vue3-recommended" and "plugin:vue/recommended".

# 📖 Rule Details

This rule warns about the order of the <script>, <template> & <style> tags.

# 🔧 Options

{
  "vue/component-tags-order": ["error", {
    "order": ["script", "template", "style"]
  }]
}
  • order (string[]) ... The order of top-level element names. default ["script", "template", "style"].

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

<!-- ✓ GOOD --> <script>/* ... */</script> <template>...</template> <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...

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

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

# 📚 Further reading

# 🔍 Implementation

Last Updated: 3/14/2020, 9:09:30 AM