When beginning in Vue it may seem easier to create self-contained components, use them in views and call it a day. But Vue components can be much more powerful.
Let’s consider an example where you have to create two views - Account and User.
Typically, you create an
Account.vue view -
You will repeat the same for Users. Accounts and Users have their distinct set of fields, and one may not find any significant commonality, right?
Well, the answer may be more sophisticated than that.
We reuse elements whenever we build UI.
- a specific layout that comprises of toolbar, footer, header and such
- toolbar that shows the title element
- button that enables query, creation of new record, or simple navigates to a specific view
- set of fields arranged in a certain way depending on the form factor
Even assuming that your framework does not support layouts out of the box, you should still consider each of those components of the UI to be created separately when possible. The objective is always to create components and assemble them like Legos to create the final UI.
Ideally you should have created all components required for the application in the initial days, and thereon just reuse those components for next set of features.
Let’s review with the same
We will first take the layout out of the component.
Use a standard panel to show toolbar, title of the toolbar and may be a few important buttons that belong in the toolbar.
Now, we finally change the
Account.vue component -
Instead of one big, monolithic
Account.vue. we now have the component comprised of -
- toolbar + title + standard buttons in a panel
- account list and associated components
You can reuse the layout and the panel in
User.vue and other views. The same opportunities can be found with the components to be used within
The big advantage of building with components is the easier scalability of the resulting application. Also -
- UI elements are standardized and easier to maintain. E.g. all toolbars within a data component may have the same colour and font
- Changes are easier - modify one
Panelcomponent instead of changing a title + toolbar changes in 151 components
- Application code remains readable even for the complex of the UIs