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.
vue
<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:
vue
<!-- components/TodoList.vue -->
<script setup>
// TodoList component logic
</script>
vue
<!-- components/TodoItem.vue -->
<script setup>
// TodoItem component logic
</script>