Overwrite/Extend components from imported Vue App

[SweckEUW]

Hey,

I have a Vue App that functions as a UI component for a bigger apllication. This UI is exported as a Vue app and imported into another Vue App via this code:

import App from '@/App.vue'

export function InitializeInterface(){
    let app = createApp(App});
    return app;
}

In the Vue project I import this app and I need the freedom to overwrite/Extend specific components from the imported App if needed. All Vue components in the Imported App are globaly registered. My idea is to overwrite these components. For example I have a Watermark component in the UI which I want to replace completely. I have a new Watermark Vue component in the new Vue project which should replace the old one. I do this by registering this component globaly on the imported vue app.

import WatermarkOverwrite from "@/components/WatermarkOverwrite .vue";

let app = InitializeInterface();
app.component("Watermark", WatermarkOverwrite);

This works so far but I get the following error:
[Vue warn]: withDirectives can only be used inside render functions.

No directives are working in the WatermarkOverwrite component like v-show or v-if. The rest of the component works like expected.
Anyone knows how to fix this or is this way of registering components globally even possible?

What I need is to have the possibility to overwrite any component on my imported app if needed, because in the future we may have to do special development for cleints. I dont want add props or anything similar to the components of my codebase to make the components more flexible because we may need to replace its whole functionality. If there is any other way achieving this I am totally open for that.

Thanks for your help

[LinusBorg]

These types of errors usually indicate that there's two copies of vue involved. that can happen when you use components or other code that imports Vue apis from their respective node_modules folders.

That needs to be resolved so that all code within an app refers to the same single copy of vue. How to resolve that can differ depending on your project's setup.

When using Vite, the issue can often be reolved by using the dedupe option in the consuming application

resolve: {
  dedupe: ['vue']
}

Other setups might require different solutions.

[SweckEUW]

Yes, that fixed my problem. I also use vite and that dedupe option fixed all my problems. Thank you!