lazy load vue components from another server

[lampewebdev]

We have a big app, and we want to load some parts of the app after the page has rendered.
We would like to use 'defineAsyncComponent' but the problem is that the component is on another server.

So what we basically want is:

  components: {
    asyncComp: await defineAsyncComponent(
      () => import("http://devcrate.local/product/components/Subcomponent.vue")
    ),
  },

This is right now not working with vite and vite-ssr-plugin.

Any Idea how to we can do this?

[Sazzels]

I struggle with the same problem, we want to load external created components into our application at runtime.

Edit:

so i have build a vite lib and created a simple webserver in express serving this file my-lib.umd.js

my-lib.umd.js

(function(e,t){typeof exports=="object"&&typeof module<"u"?module.exports=t(require("vue")):typeof define=="function"&&define.amd?define(["vue"],t):(e=typeof globalThis<"u"?globalThis:e||self,e.MyLib=t(e.Vue))})(this,function(e){"use strict";const t=(n,o)=>{const c=n.__vccOpts||n;for(const[d,f]of o)c[d]=f;return c},i={},s=[e.createElementVNode("h1",null,"Test!",-1)];function r(n,o){return e.openBlock(),e.createElementBlock("div",null,s)}return t(i,[["render",r]])});

the i created a fresh vue 3 application and tried loading that library.

<template>
  <div>
    <component :is="dynamicComponent"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicComponent: null,
    };
  },
  async created() {
    const module = await import(`http://localhost:8200/Test/my-lib.umd.js`);
    this.dynamicComponent = module;
  },
};
</script>

ERROR  Failed to compile with 1 error                                                                                                                                         21:23:33

error  in external "http://localhost:8200/Test/my-lib.umd.js"

The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script

ERROR in external "http://localhost:8200/Test/my-lib.umd.js"
The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script
 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=script&lang=js 8:25-75
 @ ./src/App.vue?vue&type=script&lang=js 1:0-189 1:0-189 1:190-368 1:190-368
 @ ./src/App.vue 2:0-54 3:0-49 3:0-49 6:49-55
 @ ./src/main.js 2:0-28 3:10-13

webpack compiled with 1 error

[eatcodeplay]

did you find a solution to this? i'm considering doing something similar and would be grateful for any tips i could receive. 🤗

[Sazzels]

Unfortunately, no, I'm not pursuing the topic any further. It seems to be beyond my capabilities 🤯, we still have the requirement but I'm going to look into other things before I get back to it.

[Sazzels]

@eatcodeplay maybe related, someone posted a new approach there. annlumia/vue3-distributed-component#1