Creating Extensible Common Vue Components from UI Library Components

Using UI libraries like Bootstrap and Vuetify makes it

easy to use high-quality UI components.

However, you often wonder how to customize them.

Usually, to access internal elements of a component,

you use ":deep(.class-name)", but the problem is when you need to customize the same component differently on one screen,

and apply the same style on another screen.

For example,

if you want to change the background color of the Buefy tooltip component, you can use the following:

But what if you want to change one component to black and another to orange?

You apply a new class each time. (CSS override)

What if you want to use a black tooltip on another screen?

You copy-paste the style. (Or use a module.)

To solve this problem, I structured a more scalable component as follows.

It's structured as above.

Now, use custom-tooltip.vue in the parent component.

There are various other solutions besides this method.

- Creating a custom directive to extend it

- Extending the theme using $variables

Although many parts have been omitted, when multiple logics or APIs are included in addition to styles,

I think wrapping it in a component like this might be more appropriate.

• I would appreciate it if you could let me know if you have any other good ideas.