[Vuejs]-Should I be storing all my Vue methods and data in one file?

by

3👍

Assuming that the code you shared is your main/root Vue instance, it probably is a bad practice to put all these in a single component.

Ideally, your code should have segregation of components between views and components. views are like individual pages which contain most of the business logic whereas components are reusable items like checkboxes, lists, inputs, etc..

The reasons for dividing the app into smaller views are:

  • Putting everything in a root instance will make your components less-reusable. They are depending on some sort of global state.
  • This makes modifications harder to track; overall making code less maintainable within the team.
  • Splitting into smaller views/components will allow you to use other ecosystem tools like vue-router which will further help in maintaining URLs, URL history, etc.
  • Segregation into smaller components will enable Vue.js to better track change detection producing efficient and performant view updates. UI updates become significantly faster.

In a nutshell, it is about following classical software engineering principles like SOLID, loose coupling, etc. This, in general, is not just confined to Vue.js.

👤Harshal Patil

Leave a comment