Linked Questions

Popular Questions

Vue - Load External Components From Another Site

Asked by At

I am trying to retrieve a vue component from an external site and load it in my app and cannot for the life of me figure this out.

Here is the full scenario;

  • Site A (Internally Hosted Site) loads a VueJS application
  • Site A requests a VueJS component from Site B (Internally Hosted Site, different sub domain)
    • Ideally, Site B would consist of .vue files either in their native .vue format or precompiled (maybe vue-cli for this?)
  • Site A loads and renders the components in the application

Let's say I have a very simplistic component I want to load from Site B;

{
    "template": "<div><span>{{message}}</span></div>",
    "data": function() {
        return { "message": "Hello World" };
    }
}

I've tried the following this with mixed results;

Inside my index.ts (using TypeScript)

Vue.component('my-external-component', () => (Vue as any).http.get("http://test.local/test.js"));

and inside my .vue file

<my-external-component></my-external-component>

This results in this comment being added to the DOM

<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->

however adding

<component :is="my-external-component"></component>

Results in an empty comment being added to the DOM

<!---->

I have also done a couple variations of this including using the cli to compile the template into a js file and attempting to load that, weird error about not being able to access template.trim or something along those lines.

Related Questions