Dynamically loading of Vue plugins in the main file

I am developing a B2B application that has a single entry point but is used by different clients with different domains, appearances, and custom functionalities. Based on the domain and a few other tricks, I identify which configuration to load, and thus, although there is a single entry point, everything after it is highly personalized.

One of the features of Vue is that plugins are registered globally, and if you need different plugins in different configurations, you will only need to load the ones you need. This can be done dynamically in the main file.

// main.ts

import Vue from 'vue';

const loadPlugin = (pluginName: string): Promise<void> => {
  return import(`@/plugins/${pluginName}`).then((module) => {
    Vue.use(module.default);
  });
};

// Example usage
if (client === 'MyPressureClient') {
  loadPlugin('my-pressure-client-plugin');
} else {
  loadPlugin('my-regular-client-plugin');
}

// ...

In this example, the loadPlugin function takes a plugin name as an argument and dynamically imports the corresponding plugin module.

So far so good, but when you have over 50 plugins and a given client uses around 10 of them, the scheme starts to get heavy and the parallelism of loading disappears.

To handle this, I create an object that contains an array of plugins for each client and load them all at once with Promise.all.

const plugins = clientConfig.plugins || {};
const pluginLoaders: Promise<{ name: string; plugin: any }>[] = [];

if (plugins?.plugin-one) {
  pluginLoaders.push(import('@/plugins/plugin-one').then((m) => ({ name: 'PluginOne', plugin: m.default })));
}
if (plugins?.plugin-two) {
  pluginLoaders.push(import('@/plugins/plugin-two').then((m) => ({ name: 'PluginTwo', plugin: m.default })));
}
if (plugins?.plugin-three) {
  pluginLoaders.push(import('@/plugins/plugin-three').then((m) => ({ name: 'PluginThree', plugin: m.default })));
}

// ... more plugins that the client uses, if any

// You load all plugins in parallel (50-70% faster than sequential)
const loadedPlugins = await Promise.all(pluginLoaders);

// You register the plugins in order
loadedPlugins.forEach(({ name, plugin }) => {
  app.use(plugin);
});

Elegant and efficient. DX at MAX )