Quick Recipe: Styling Component Libraries in Vue.js

I want to try a new idea. I’ll force myself to explain a quick recipe for a problem in a short blog post. The purpose of this category is to maintain my weekly cadence at two blog posts per week. This week, I’ll explain how to style component libraries in Vue.js.

The problem Link to heading

You are using a component library to implement an application like bootstrap-vue or vuetify. You want to customize the styles of some or all components of the library without using the same CSS class selectors used by the library for the same purpose.

The solution Link to heading

We’ll wrap the component in a custom component of our own. Our wrapper adds a custom class selector that we use to style the component. Our application should instance the wrapper that contains the customizations instead of the original component. The following code example demonstrates how to customize a bootstrap-vue text input.

CustomInput instantiates bootstrap-vue’s BFormInput as its root component. It binds all attributes accepted by CustomInput to the bv component by passing the $attrs property to the v-bind directive. In this way, you don’t have to re-declare all properties defined by the original component. Likewise it passes the $listeners property to the v-on to delegate event handling to <b-form-input>.

Custom input adds a custom class selector, custom-input, and applies some border customizations to it. The advantage of using a custom class selector instead of applying more styles <b-form-input> original class selectors is the separation of concerns.

It is less likely that your styles will name conflict with other external customizations. Moreover, it is very clear which styles your custom component defined and which ones come from bootstrap.

I hope this helps!