Distributed Vue Example

component.umd.min.js

(function(e,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(e=typeof globalThis<"u"?globalThis:e||self,n(e.CSC0000021GBHKS1={}))})(this,function(e){"use strict";const n="",i=(t,o)=>{const c=t.__vccOpts||t;for(const[d,s]of o)c[d]=s;return c},u={data(){return{count:0}},methods:{test_event:function(t){t.preventDefault(),this.message="Event message: Test event clicked"}}},r=window.Vue.toDisplayString,p=window.Vue.createElementVNode,_=window.Vue.openBlock,l=window.Vue.createElementBlock;window.Vue.pushScopeId,window.Vue.popScopeId;const f={class:"vue_wrapper"};function a(t,o,c,d,s,w){return _(),l("div",f,[p("button",{onClick:o[0]||(o[0]=m=>s.count++)}," Count "+r(s.count),1)])}const v=i(u,[["render",a],["__scopeId","data-v-b43d7638"]]);e.CSC0000021GBHKS1=v,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});

Dynamic.vue

<template>
	<component :is="DynamicComponent" />
</template>

<script setup lang="ts">
	import { defineAsyncComponent } from 'vue';

	const props = defineProps<{
	  path: string,
	}>();

	const importExternal = async (url: string) => {
		const parts = url.split('/').reverse();

		if (parts.length === 0) return;

		const fileNameMatched = parts[0].match(/^(.*?)\.umd/);
		if (!fileNameMatched) return;
		const name = fileNameMatched[1];

		if ((window as any)[name]) return (window as any)[name];

		(window as any)[name] = new Promise((resolve, reject) => {
			const script = document.createElement('script');
			script.async = true;
			script.addEventListener('load', () => {
				const comp = (window as any)[name][name];
				// comp.data = { count: 0 };
				resolve(comp);
			});
			script.addEventListener('error', () => {
				reject(new Error(`Error loading ${url}`));
			});
			script.src = url;
			document.head.appendChild(script);
		});

		return (window as any)[name];
	};

	const DynamicComponent = defineAsyncComponent(async () => {
		return await importExternal(path);
	});
</script>

main.ts

import * as Vue from 'vue';
import App from './App.vue';
import Router from './router';

(window as any).Vue = Vue; // Externalise Vue.
const app = Vue.createApp(App).use(Router);