Prefer each component to be in its own file JS-0680

Whenever a build system is available to concatenate files, each component should be in its own file. This helps you to more quickly find a component when you need to edit it or review how to use it.

This should be done when the proper build system is available as recommended by the community as these build system concatenates the files.

Bad Practice

app.component('TodoList', {
  // ...
})

app.component('TodoItem', {
  // ...
})

Recommended

components/
|- TodoList.js
|- TodoItem.js

components/
|- TodoList.vue
|- TodoItem.vue

<script>
export default {
  name: 'my-component'
}
</script>

References

• Vue3 Styleguide