Why this matters
Consistency in the order of top-level tags makes SFCs easier to navigate and read. Developers know where to look for the script logic, template structure, and styles within any component file.
The top-level tags (<script>, <template>, <style>) in Single-File Components (.vue files) should be ordered consistently across the project. A common convention is <script>, then <template>, then <style>.
Consistency in the order of top-level tags makes SFCs easier to navigate and read. Developers know where to look for the script logic, template structure, and styles within any component file.
Side-by-side examples engineers can pattern-match during review.
<style>/*... */</style>
<script>/*... */</script>
<template>...</template>
<script>/*... */</script>
<template>...</template>
<style>/*... */</style>
<template>...</template>
<script>/*... */</script>
<style>/*... */</style>
<script>/*... */</script>
<template>...</template>
<style>/*... */</style>
<script>/*... */</script>
<template>...</template>
<style>/*... */</style>
<template>...</template>
<script>/*... */</script>
<style>/*... */</style>
<template>...</template>
<script>/*... */</script>
<style>/*... */</style><style>...</style>
<script>...</script>
<template>...</template><script>...</script>
<template>...</template>
<style>...</style><template>...</template>
<script>...</script>
<style>...</style>From the same buckets as this rule.
For applications, styles in a top-level `App` component and in layout components may be global, but all other components should always be scoped. This can be achieved through CSS modules, class-based strategies like BEM, or the `scoped` attribute in Single-File Components.