vue/component-tags-order
enforce order of component top-level elements
- ⛔ This rule was removed in eslint-plugin-vue v10.0.0 and replaced by vue/block-order rule.
📖 Rule Details
This rule warns about the order of the top-level tags, such as <script>, <template> & <style>.
🔧 Options
json
{
"vue/component-tags-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 asscript[setup]andi18n: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 v6.1.0