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

⚙️ 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.

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

order ((string|string[])[]) ... The order of top-level element names. default [ [ "script", "template" ], "style" ].

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

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

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

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

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

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

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