The Vue architecture that worked for me. (in small and large apps)

source: http://blog.stunited.org

Hi, I want to share with you the way that I’ve been working on Vue.js. Some of the practices that have worked for me, this can actually fit on a lot of frameworks (some parts), like React.js, Polymer or Angular.

1.- Components

1.1.- Make a Component, not a swiss knife
Visual components must follow some rules. A component shouldn’t communicate with the store directly or make calls to the api. If we add that to our component it becomes very non-reusable. And the whole point of components its to reuse them.

Some of the rules that I follow to develop a component:
• They must be “dummy”. They must follow the single responsibility principle. This means that your component should only to his job and thats it, it should be prepare to accept data from a parent. Example: a table must sort the data in columns and rows depending on the data passed from
it’s parent.

• They shouldn’t interact with the “outside”, directly. The only way to do this is with events.
• They should be independent. This means that they should and must work by they own. They’re not
tied to a specific architecture or forced to have a store, etc.
• They must be reusable
• They must be able to be styled…