How to load precompiled plugins at runtime (Vue3 + Electron)

[gsisinna]

Hi everyone,

I’m building a cross-platform desktop app using Vue3 and Electron, and I want to support runtime plugin loading. The goal is to allow distributing additional functionality in separate plugin packages that can be built and shipped independently of the main app, and loaded at runtime, not build time.

So far, I’ve implemented a basic plugin system that loads .vue files at build time. But now I’m looking to load precompiled and obfuscated/bundled plugins that:

• Are packaged as separate files or folders (e.g., .js, .mjs, or .cjs bundles)
• Are not in source form (to prevent client-side access)
• Can be dynamically loaded into the Electron app (possibly using require(), import(), or Webpack tricks)
• Contain Vue components, logic, and optionally Vue plugins

My Questions:

1. What is the best practice to dynamically load precompiled Vue components or plugins at runtime in an Electron + Vue3 environment?
2. Should I compile these plugin packages separately with vite or webpack into a format that can be imported with import() or require()?
3. How do I register the plugin’s Vue components globally or locally at runtime after importing them?
4. Any best practices for isolating plugin scopes or maintaining security in this setup?

Would love any guidance, examples, or even a suggested plugin architecture that suits this need.

Thanks in advance!