How to implement two Vue apps on the same page

[sdlambert]

We have two apps that live in separate repositories and need to be loaded on the same page. When we tried this, we got a conflict from one of the modules in the index.js that shared the same minified variable name as the other app (could not redeclare a const.) I had assumed that the compiled JS would be privatized to avoid global namespace conflicts, but apparently not. My team and I need a way to integrate two separate Vue applications on the same page. How would I be able to achieve this?

We're using the latest Vue 3 with Vite on Node 18, if that is helpful.

[Yordan-Ramchev]

You can create multiple application instances.

The createApp API allows multiple Vue applications to co-exist on the same page, each with its own scope for configuration and global assets:

Reference: https://vuejs.org/guide/essentials/application.html#multiple-application-instances

[sdlambert]

These are separate apps that live in their own repositories. Combining them in a single app with different instances is not an option.

[LinusBorg]

The usual build format options (ESM, UMD, IIFE) will avoid such conflicts, so the problem likely lies with your build/compile step. can you provide details on that?

[sdlambert]

We are using default compile methods for both apps. Assume no changes to the vite config. My understanding is that the default target for esbuild is the browser, which means everything should be wrapped in an IIFE but the resulting compiled JS is not.

[LinusBorg]

Assume no changes to the vite config [...] which means everything should be wrapped in an IIFE

Here's your misunderstanding. The default build output of Vite is an ESM module (and ESM module code runs scoped to the module if loaded as a module), hence why the documentation states that native ESM support in the browser is required for the default:

https://vitejs.dev/guide/build.html#browser-compatibility

You can also have a look in the final index.html file that should be part of the the build artifacts in /dist, and will see that the JS files are being integrated as esm modules:

<script type="module" src="...."></script>

You likely did not set type="module" when you integrated the Javascript files into the HTML page where you combine those two apps. So adding that should solve your problem.

[sdlambert]

That fixed the issue. I can't believe it was that simple. Thank you so much.

[Yordan-Ramchev]

@sdlambert can you mark this thread as answered