I have 2 applications, the first is on Vue (micro frontend module), the second is on nuxt(host app).
First application vite config:
import { fileURLToPath, URL } from "node:url"
import { defineConfig } from "vite"
import federation from "@originjs/vite-plugin-federation"
import vue from "@vitejs/plugin-vue"
export default defineConfig({
preview: {
port: 5005
},
plugins: [
vue(),
federation({
name: "app1",
filename: "app1Remote.js",
exposes: {
"./App": "./src/App.vue"
},
shared: ["vue"]
})
],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url))
}
},
build: {
minify: false,
cssCodeSplit: false,
target: "esnext"
}
})
Nuxt app config:
import federation from "@originjs/vite-plugin-federation";
export default defineNuxtConfig({
devtools: { enabled: true },
vite: {
plugins: [
federation({
name: 'host-app',
remotes: {
remote_app: `http://127.0.0.1:5005/assets/app1Remote.js`,
},
shared: ['vue']
})
],
}
})
Then, I start my first app on vue with vite preview
command
And in the second application I get this error:
BUT, if I open http://127.0.0.1:5005/assets/app1Remote.js, i’ll see app1Remote.js file