Is overriding a global Vue component safe?

Question

Let's say there is a global component BIcon.vue available everywhere.
And another component, but regular not global, called BIconFake.vue.

We can override BIcon.vue by BIconFake.vue like that:

<template>
  <div>
   <b-icon icon="plus"><!-- <- Here is it BIconFake component! -->
  </div>
</template>

<script>
import BIcon from '~/components/BIconFake'

export default {
  components: {
    BIcon // <- BIconFake component inside!
  }
}
</script>

By this way, Vue.js will display BIconFake component instead of regular BIcon component.
I tried to pass props, events or attributes and it works like expected.
Vue.js is awesome... and big. Really, I don't know everything about it, and I don't want to see side effects or unexpected behavior when doing this override.

So, I want to know if it's safe to do that? Does it make a mess in Vue.js instance? What about memory?

we can override component with pure vue.js. Also, I made this example for Buefy, but we can do that with any UI frameworks like Quasar, Vuetify...

Thinking globaly, Is it good to override components of UI frameworks? What about security, scalability and maintenability?

In fact, I searched a way to build a plugins or addons system to my Nuxt.js app, like wordpress plugins.
Is it a good architecture to start building my app by overriding vue component? Is there another way to build app addons for vue, by using npm or webpack?

Answer 1

If you are going to wrap existing components like that then you should keep in mind the Liskov substitution principle. <b-icon-fake> can likely be used in place of <b-icon> provided that it:

• accepts the same props
• emits the same events
• exposes the same public methods (if it is used with a ref)
• behaves in the same way

Most of those points probably do not apply for a simple <b-icon> component.

Also keep in mind the template of your wrapped component now includes an extra <div> around it. This can interfere with styling and things like that.

You can eliminate the additional memory overhead by using a functional component instead, but you will need to write the render function manually to preserve the behavior of the wrapped component. But honestly I wouldn't worry too much about memory usage unless you have determined it to be an issue (after profiling your app).

In terms of whether it is "good" to do this or not, I can't say. There are advantages and disadvantages. In my opinion, wrapping components is fine as long as you are the only consumer of the wrapper component and doing so doesn't affect any existing usage of the wrapped component outside of your code.