For our project we need to support microfrontend features. Currently each feature is a Nuxt module but we want to separate it so we can release the features individually. The goal is thus to lazy load a feature from CDN and then use it in the Nuxt application. There is no need for SSR support.

I've looked into several module federation solutions but could not get them to work in a nice way with Nuxt 3. As I've read that federated modules are on the roadmap of Nuxt (see issue) and as well for Rolldown, I rather wait for the framework solution.

For the time being I created this simple POC where I use import maps, lazy load the feature in es module format and then bootstrap the feature as if its a new Vue app. This seems to work pretty well, though would love to learn if you see any issues with this direction.

The other question I have is that for this to work I need to expose Vue globally for the feature to be able to use it. I've could not find a way for Nuxt to expose it, seems like Vue is being treeshaked and locally scoped by Nuxt. For the POC I just included the Vue from CDN to validate if the concept would work. Though would much rather use Vue from Nuxt or let Nuxt use the Vue from the CDN as well. Hopefully you have some ideas on how to achieve this, without the perf penalty of loading Vue twice.

Thanks!

POC snippets.
Very rough outline, in the final code there will be a feature loader handling the bootstraping and loading of libraries, etc.

Import maps

export default defineNuxtPlugin(async () => {
    useServerHead({
        script: [
            {
                type: 'importmap',
                innerHTML: JSON.stringify({
                    imports: {
                        vue: 'https://unpkg.com/vue@3/dist/vue.esm-browser.js',
                        'feature-libs': 'http://localhost:8210/feature-libs.mjs',
                    },
                }),
                tagPriority: 'critical',
            },
            {
                type: 'module',
                src: 'https://unpkg.com/vue@3/dist/vue.esm-browser.js',
                tagPriority: 'high',
            },
            {
                type: 'module',
                src: 'http://localhost:8210/feature-libs.mjs',
                tagPriority: 'high',
            },
        ],
    });
});

Nuxt component

<template>
    <client-only>
        <div id="feature-target"></div>
    </client-only>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

onMounted(async () => {
    const { bootstrapFeature } = await import(`http://localhost:8220/feature-foo.mjs`);
    bootstrapFeature('feature-target', 'path/to/assets/');
});
</script>

Lazy loaded Feature

import { createApp } from 'vue';
import { FeatureHelloWorld } from './feature';

export function bootstrapFeature(targetId: string, assetDir: string) {
    const app = createApp(FeatureHelloWorld);
    app.provide('assetDir', assetDir);
    app.mount(`#${targetId}`);
}