Is overriding a global Vue component safe?

admin

Administrator
Staff member
Let's say there is a global component
Code:
BIcon.vue
available everywhere.<br>
And another component, but regular not global, called
Code:
BIconFake.vue
.

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

Code:
&lt;template&gt;
  &lt;div&gt;
   &lt;b-icon icon="plus"&gt;&lt;!-- &lt;- Here is it BIconFake component! --&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import BIcon from '~/components/BIconFake'

export default {
  components: {
    BIcon // &lt;- BIconFake component inside!
  }
}
&lt;/script&gt;

By this way, Vue.js will display
Code:
BIconFake
component instead of regular
Code:
BIcon
component.<br>
I tried to pass props, events or attributes and it works like expected.<br>
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.

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

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...

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

In fact, I searched a way to build a plugins or addons system to my Nuxt.js app, like wordpress plugins.<br>
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?