Vue.js - Is it possible to use Javascript Dynamic Imports to load components from another server?

Question

Context

I have to create a Vue.js application as the UI of my REST API Back-end. It will be displayed for every client.

This application displays a list of items to be handled (with a small workflow: open, in progress, done).

Some of my clients request a specific and different view for this list: they want, for instance, that the list is displayed in another layout, or with extra data from their internal applications.

My idea

So, I have to create specific Vue.js components for these clients, but I don't want to "pollute" my main application code base with all the components for these clients. I want that these views are handled in a specifically dedicated code base.

I was wondering if I could use Dynamic imports / Async components ( Article on optimization with Dynamic imports and Official Vue.js doc for Dynamic imports ) to load these components, based on the client that uses the application. These components would be loaded from another server , not the server that serves the main Vue.js application.

---

The actual way of dynamically loading a component is:

'my-component': () => import('./my-async-component')

Would it be possible to do something like:

'my-component': () => import('http://myspecificclient.mydomain.com/my-async-component')

---

I understand that dynamic loading is related in particular with Webpack and that it could be an issue here, but I'm not skilled enough in Webpack to know if what I would like to do is relevant.

Answer 1

This recent article (7 April 2019), by Markus Oberlehner, presents a way to do this:

https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/?utm_source=Vue.js+Developers&utm_campaign=a23e0b1135-EMAIL_CAMPAIGN_2019_04_02_10_08_COPY_01&utm_medium=email&utm_term=0_ae2f1465e2-a23e0b1135-209131157

An excerpt:

// This does not work.
const MyComponent = () => import('https://distribution.server/MyComponent.js');

Ideally, we could do it the way you see above. But this does not work because neither webpack nor the native implementation of import() can deal with external resources.

In the following example code snippet you can see our own implementation of import() which does work with external resources.

// src/utils/external-component.js
export default function externalComponent(url) {
  return new Promise((resolve, reject) => {
    const name = url.split('/').reverse()[0].match(/^(.*?)\.umd/)[1];
    const script = document.createElement('script');
    script.async = true;
    script.addEventListener('load', () => {
      resolve(window[name]);
    });
    script.addEventListener('error', () => {
      reject(new Error(`Error loading ${url}`));
    });
    script.src = url;
    document.head.appendChild(script);
  });
}

import externalComponent from '../utils/external-component';

const MyComponent = () => externalComponent('http://localhost:8200/MyComponent/MyComponent.c9c0abb8e999d0e5654e.umd.min.js');

export default {
  name: 'MyOtherComponent',
  components: {
    MyComponent,
  },
  // ...
}

Answer 2

You may be able to use ajax...

 var xhr = new XMLHttpRequest; xhr.open('GET', '[Your url here]', true)

But I'm not really sure since you said you wanted to import it from another server