- Published on
Vue - Components and Styling
In this article, components and styling best practices will be explained.
Components Best Practices
Collocate things as close as possible to where it's being used
Keep components, functions, styles, state, etc. as close as possible to the component where it's being used. Use the Vue Single File Components (SFC).
Stay consistent
Keep your code style consistent. e.g If you name your components by using PascalCase, do it everywhere. If you create components as arrow functions, do it everywhere. For javascript-specific code, we enforce this clean code javascript.
Limit the number of props a component is accepting as input
If your component accepts a lot of props you might consider splitting it into multiple components or use composition via children or slots. Component basic and composition example.
Abstract shared components into a component library
For larger projects, it is a good idea to build abstractions around all the shared components. It makes the application more consistent and easier to maintain. Identify repetitions before creating the components to avoid wrong abstractions.
Component Library Example Code
It is a good idea to wrap 3rd party components as well in order to adapt them to the application's needs. It might be easier to make the underlying changes in the future without affecting the application's functionality.
3rd Party Component Example Code
Component Libraries
Every project requires some UI components such as modals, tabs, sidebars, menus, etc. Instead of building those from scratch, you might want to use some of the existing, battle-tested component libraries.
To speed up the development, we recommend using a fully-featured component library. So if it is required, you just have to override the component's styling instead of building it from scratch.
Some of these libraries are :
Buefy
Buefy is a user interface component library made on top of Vue.js and Bulma; two fresh, but well-known, frameworks. It has two core principles: 1. keep stuff simple and 2. be lightweight.
Buefy is the javascript layer for the Bulma interface, since it doesn't require for it to be a sophisticated Single-Page Application. It has the entire Bulma's core built-in. You can use any feature from Bulma, plus all the components Buefy offers.
Vuetify Developed exactly according to Material Design specification with every component meticulously crafted to be modular, responsive, and performant.
BootstrapVue Provides one of the most comprehensive implementations of the Bootstrap v4 component and grid system available for Vue.js v2.6, complete with extensive and automated WAI-ARIA accessibility markup.
Storybook
Not mandatory but it's a nice-to-have implementation to bring the project's development to the next level.
Storybook is a great tool for developing and testing components in isolation. Think of it as a catalog of all the components your application is using. Very useful for developing and discoverability of components.
- Author
- Label
- Author
- Name
- Gingsir Pradipta
