Component Files

Checks if all components has their own files.   
👉 https://vuejs.org/style-guide/rules-strongly-recommended.html#component-files

❓ Why it's good to follow this rule?

• Maintainability: This helps you to more quickly find a component when you need to edit it or review how to use it.

😱 Examples of code for which this rule will throw a warning

WARNING

The following code defines multiple components within a single file. This is against the rule that states each component should be in its own file to maintain clarity and separation of concerns.

<script setup>
app.component('TodoList', {
  // ...
})

app.component('TodoItem', {
  // ...
})
</script>

🤩 How to fix it?

TIP

Refactor the code by creating separate files for each component to adhere to best practices. Here’s how to organize them:

<!-- components/TodoList.vue -->
<script setup>
// TodoList component logic
</script>

<!-- components/TodoItem.vue -->
<script setup>
// TodoItem component logic
</script>