JS.VUE.COMPONENT.TAGS.ORDER

Rule Details

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

Options

{
  "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 as script[setup] and i18n:not([locale=en]).

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

{'vue/component-tags-order': ['error']}

<!-- GOOD -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

{'vue/component-tags-order': ['error']}

<!-- GOOD -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>

{'vue/component-tags-order': ['error']}

<!-- BAD -->
<style>/* ... */</style>
<script>/* ... */</script>
<template>...</template>

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

{'vue/component-tags-order': ['error', { 'order': ['template', 'script', 'style'] }]}

<!-- GOOD -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>

{'vue/component-tags-order': ['error', { 'order': ['template', 'script', 'style'] }]}

<!-- BAD -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

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

{'vue/component-tags-order': ['error', { 'order': ['docs', 'template', 'script', 'style'] }]}

<!-- GOOD -->
<docs> documentation </docs>
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>

{'vue/component-tags-order': ['error', { 'order': ['docs', 'template', 'script', 'style'] }]}

<!-- BAD -->
<template>...</template>
<script>/* ... */</script>
<docs> documentation </docs>
<style>/* ... */</style>

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

{'vue/component-tags-order': ['error', { 'order': ['template', 'script:not([setup])', 'script[setup]'] }]}

<!-- GOOD -->
<template>...</template>
<script>/* ... */</script>
<script setup>/* ... */</script>

{'vue/component-tags-order': ['error', { 'order': ['template', 'script:not([setup])', 'script[setup]'] }]}

<!-- BAD -->
<template>...</template>
<script setup>/* ... */</script>
<script>/* ... */</script>

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

{'vue/component-tags-order': ['error', { 'order': ['template', 'style:not([scoped])', 'style[scoped]'] }]}

<!-- GOOD -->
<template>...</template>
<style>/* ... */</style>
<style scoped>/* ... */</style>

{'vue/component-tags-order': ['error', { 'order': ['template', 'style:not([scoped])', 'style[scoped]'] }]}

<!-- BAD -->
<template>...</template>
<style scoped>/* ... */</style>
<style>/* ... */</style>

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

{'vue/component-tags-order': ['error', { 'order': ['template', 'i18n:not([locale=en])', 'i18n[locale=en]'] }]}

<!-- GOOD -->
<template>...</template>
<i18n locale="ja">/* ... */</i18n>
<i18n locale="en">/* ... */</i18n>

{'vue/component-tags-order': ['error', { 'order': ['template', 'i18n:not([locale=en])', 'i18n[locale=en]'] }]}

<!-- BAD -->
<template>...</template>
<i18n locale="en">/* ... */</i18n>
<i18n locale="ja">/* ... */</i18n>

Further Reading

• Style guide - Single-file component top-level element order (https://vuejs.org/style-guide/rules-recommended.html#single-file-component-top-level-element-order)