How to remove global component completely in Vue?

Question

I have a component called button-widget and it is registered globally.

Vue.component('button-widget', {
    template: `<button>My Button</button>`
})

Now, how can I delete this component permanently?

I am not talking about v-if or $destroy() -- I just want to completely remove this component in such a way that it was never defined so that for example, I get this warning: Unknown custom element: <button-widget> - did you register the component correctly? For recursive components, make sure to provide the "name" option. Unknown custom element: <button-widget> - did you register the component correctly? For recursive components, make sure to provide the "name" option. .

Answer 1

There is no public API to do this.

The correct solution is not to register it globally in the first place and instead just use it on a per-component basis by adding it to the components option of each component you want to use it in.

Otherwise you can unregister it like this:

delete Vue.options.components['button-widget']