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.