Load async components remotely

[lchrennew]

I want to create a kind of plugins mechanism which will keep a plugin-registry.
The registry will contain the entrances of user interfaces(vue components) maintained by 3rd parties on remote web server.
The user interfaces will be loaded remotely for the end users.

That's the idea to render the remote interfaces:

// remote loader
<template>
<component :is="remoteComponent" v-bind="$props"/>
</template>
<script>
....
props: ['url'],
computed: {
    remoteComponent(){
        return defineAsyncComponent(()=>import(this.url))
    }
}
....
</script>

To use it, e.g.:

<remote-loader url="http://..../helloworld.vue"/>

[nguyenvanduocit]

If you use Webpack, you can check out Module Federation.

[lchrennew]

I use Vite.

[lchrennew]

I made a way to do this:

1. RemoteComponent.vue

<template>
  <component :is="component"/>
</template>
<script>
import { defineAsyncComponent } from 'vue/dist/vue.esm-bundler.js' // NOTICE: I uses bundler here.

const js = 'http://.../xxx.js'
const tpl = 'http://.../xxx.vue'

const loadJsModule = async (jsUrl) => {
    const component = await import(/* @vite-ignore */jsUrl) // NOTICE: add @vite-ignore to prevent warnings
    return component.default 
}

const loadPlainText = async (url) => {
    const api = getApi(resolveUrl(url))
    const response = await fetch(url)
    return await response.text()
}

export default {
  name: 'RemoteComponent',
  computed: {
    component() {
      return defineAsyncComponent(async () => await this.getPluginComponent())
    }
  },
  methods: {
    async getPluginComponent() {
      return { ...await loadJsModule(js), template: await loadPlainText(tpl) }
    }
  }
}
</script>

2. remote template, the file's url is e.g.: http://localhost:4242/tpl.vue

<p>hello {{name}}</p>

3. remote js component, the file's url is e.g.: http://localhost:4242/component.js

export default {
    name: 'RemoteHelloWorld',
    data(){
        return { name: 'world' }
    }
}