I have a widget written in Vue.js v2 which gets installed on 3rd party websites. It is something similar to those chat widgets which you come across on many websites.

It is created with vue-cli and is bundled into a single JS file. This allows 3rd party websites to install the widget via a single script tag pointing to the JS file, for example:

<script async src="https://www.example.com/js/widget.js"></script>

Here is the section of my vue.config.js which bundles the app into a single JS file:

  configureWebpack: {
    output: {
      filename: "js/widget.js",
    },
    optimization: {
      splitChunks: false,
    },
  },
  css: {
    extract: false,
  },

Everything works correctly when installed on regular HTML websites or single page apps. The issue I'm noticing is when a 3rd party adds my widget onto a website which already has Vue.js added via a script tag, for example:

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        ...
    })
</script>

So the 3rd party website is simply adding Vue to a single html page to do something. But on those pages, my widget breaks.

The error I get is:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'mutate')

I don't believe the exact error message is the important part. The underlying issue lies in installing a widget written in Vue onto an html page which also happens to have Vue added via a script tag.

Is it possible to have both on the same page? I don't have any control over where the widget is installed.