I have a custom EMR system build on Vue 3 and Ionic Framework and its backend is running on OpenMRS database. The Application was built to provide Point of Care support and designed to run on POS devices like EBN, J2, Tablets, etc.
In the meantime, I am trying to migrate the application into O3, is there a way or documentation to get me started with O3 framework using Vue 3. My little understanding is that O3 uses single-spa under the hood and it should be able to support application written in other JS frameworks like Vue 3
That’s an interesting question. O3 does, indeed, use single-spa under the hood, so it may be possible to do so, but there are some other challenges. Specifically, in O3, we also rely fairly heavily on Webpack V5’s module federation. That means if you’ve built a typical Vue3 app using Vite, I’m not entirely sure we can make this work. (We can support multiple frameworks, but we’re not yet bundler independent).
The best documentation we have on how O3 expects frontend modules to work is here and there’s this part with notes on how modules are actually loaded.
In essence, O3 modules should have:
A main script entry point accessible at the location pointed to be the browser key of your module’s package.json.
A routes.json file bundled into the same directory that corresponds to this schema which describes the public exports of your app and how they plug into the O3 application, either as pages, extensions, etc.
Each extension or page should be a single-spa-vue component.
We expect the bundle to create a global property named by using this function against the name of the package.
We expect the variable corresponds to the entry point for the Module Federation remote.
It may be possible to create a “migration project” for your app that could wrap the Vue3 app into a Webpack-built bundle, in which case you can likely get away with using our default configuration like any other module.
We do have an example of an app using Angular here, but ultimately, it uses Webpack as well for bundling.
