I started getting into VueJs and Vuex development and I'm looking for a "mainstream" architecture for large scale projects. I think the question doesn't depend on whether you take a ready to use UI Framework like Vuetify, Bootstrap-Vue or Buefy or write everything yourself.
So first I read about the atomic design. This seems to be a good approach because you can compose base components and reuse them in more complex structures. But let's assume you want to give your BaseButton a blue background by providing a background-color prop.
Passing the background color from the page all the way down to the button would be really nearly impossible if you think about the huge amount of components on a page. A single button would come up with multiple props. A molecule would hold m atoms with n props per atom and so on...
Another even worse approach would be to use inheritance for components. So you would have a BaseButton and a BlueBackgroundButton would extend it. Basically this would lead to a diamond of death.
Finally React comes with the approach of grouping components by their routes. You can find an example here. This might be a valid approach but would break the abstract reusability a little bit.
Of course you can make use of mixins, extensions, slots and other things to clean up your code.
Many REST API I've seen use a basic controller-service-repository architecture. NestJs would be a good example for this backend architecture.
I would like to know if there is a "nobrainer" architecture for VueJs. If you stick to the conventions you can't go wrong.
Unfortunately I don't know React or Angular, so I don't know if they are forcing a specific structure.
