component-tags-order.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/component-tags-order	enforce order of component top-level elements

vue/component-tags-order

enforce order of component top-level elements

📖 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>

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

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

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

• Style guide - Single-file component top-level element order

🔍 Implementation

• Rule source
• Test source