Packaging Angular or Vue into one file for use on a third party site?

Question

Angular

There is a task - Create a plug-in for placement on third-party sites. To implement it, I would like to use Angular or Vue. But there is no knowledge on how to pack it all into 1 file so that by connecting 1 js file, you can draw all the necessary menus in the required place on the site.
Those. plug-in like Yandex maps.

Answer 1

For example, you can do this:
in your script, create a global object and make an initialization function that will create a vue instance and bind it to the corresponding element on the site.
In general terms, something like this:
on the site:

<script src="path_to_script"></script>
<script type="text/javascript">
   var vm;
   vm = vuecomp.init("vuecomponent", {
            // some options
   });
</script>

<div id="vuecomponent"></div>

in your script at the entry point:

import Vue from 'vue'

// ...

const vuecomp =  {
  init(elementId, options) {
            return new Vue({
              el: `#${elementId}`,
              // ...
            })
  }
}

export default vuecomp

And we collect the library using webpack for example.