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 ponents for these clients, but I don't want to "pollute" my main application code base with all the ponents 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 ponents (Article on optimization with Dynamic imports and Official Vue.js doc for Dynamic imports) to load these ponents, based on the client that uses the application. These ponents would be loaded from another server, not the server that serves the main Vue.js application.

---

The actual way of dynamically loading a ponent is:

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

Would it be possible to do something like:

'my-ponent': () => import('')

---

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.

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 ponents for these clients, but I don't want to "pollute" my main application code base with all the ponents 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 ponents (Article on optimization with Dynamic imports and Official Vue.js doc for Dynamic imports) to load these ponents, based on the client that uses the application. These ponents would be loaded from another server, not the server that serves the main Vue.js application.

---

The actual way of dynamically loading a ponent is:

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

Would it be possible to do something like:

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

---

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.

• javascript
• vue.js
• webpack
• vuejs2
• vue-ponent

Share Improve this question Follow edited Jul 14, 2022 at 1:42 tony19 139k2323 gold badges278278 silver badges348348 bronze badges asked Feb 19, 2019 at 10:08 Cyril GambisCyril Gambis 32233 silver badges1717 bronze badges 5

• Looks like it is : developers.google./web/fundamentals/primers/modules import {shout} from 'https://simple.example/modules/lib.mjs'; – Seblor Commented Feb 19, 2019 at 10:09
• It is interesting, I understand you can load javascript functions and objects from another server. Although in my case, I want to go a bit further: I want to load Vue.js ponents (defined in ".vue" files). These files are usually handled by Webpack to convert them into packages and chunks. Would it be possible to load directly a Vue.js ponent, that may, itself, have dependency on subponent on the specific server? – Cyril Gambis Commented Feb 19, 2019 at 10:21
• Have you tried loading a vue file that way using the async ponent ? Try fetching the file from a local web server (with http-server if you want to test quickly) – Seblor Commented Feb 19, 2019 at 10:34
• I would need some guidance to do that... the vue ponents are piled by webpack into chunks, and I don't know what I am supposed to target in my url ( import('????') ) It would be easier if it was javascript files ".js" that can be directly accessed on a web server, but it is not the case :-/ – Cyril Gambis Commented Feb 19, 2019 at 10:48
• Using this syntax : vuejs/v2/guide/…, what happens if you use a full http URL instead of a relative path ? You may have to use a function instead of directly using the import statement – Seblor Commented Feb 19, 2019 at 10:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

https://markus.oberlehner/blog/distributed-vue-applications-loading-ponents-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-ponent.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-ponent';

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

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

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