[Vuejs]-Vue ES Module and Browser Conflcits

You might try to download the browser version of vue js of the website you are working on. try to plug the downloaded file in your project instead of your bundled version

OR

Just look at the browser version of used vue and try to run your app with the same vue version (in package.json), then this might produce the error your have on your common environment.

You could do this for every dependency until you find and acceptable compromise that work in case you succeed reproducing and fix errors.

This is due to the fact that the browser is loading another version/instance of vuejs in the same javascript context.

What you can try, is injecting your app through an iframe or using web component

Injecting your app as an iframe / web component could be a good starting point as another answer pointed out. Here is a simple sandbox example that demonstrates this for you – https://codepen.io/ajobi/project/editor/AKyVLd

There are two "apps" loaded in the same context and as you will see in the example the vue scripts override each other. That does not happen anymore with the third app that is injected via iframe.

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

<div id="appOne">
  <h2>Vue version (app one): {{ Vue.version }}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

<div id="appTwo">
  <h2>Vue version (app two): {{ Vue.version }}</h2>
</div>

I think your bundled code should not conflict with the outside page, but it’s hard to tell why (or if) that happens without some minimal reproducable example.