# 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|string[])[]) ... The order of top-level element names. default[ [ "script", "template" ], "style" ].
# { "order": [ [ "script", "template" ], "style" ] } (default)
<!-- ✓ GOOD -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>
<!-- ✓ GOOD -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>
<!-- ✗ BAD -->
<style>/* ... */</style>
<script>/* ... */</script>
<template>...</template>
# { "order": ["template", "script", "style"] }
<!-- ✓ GOOD -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>
<!-- ✗ BAD -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>
# { "order": ["docs", "template", "script", "style"] }
<!-- ✓ GOOD -->
<docs> documents </docs>
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>
<!-- ✗ BAD -->
<template>...</template>
<script>/* ... */</script>
<docs> documents </docs>
<style>/* ... */</style>
# 📚 Further Reading
# 🚀 Version
This rule was introduced in eslint-plugin-vue v6.1.0