Your cart is currently empty!
Quasar Framework: Vite Module Federation
Create two projects called remote-app and host-app:
Shell
x
1
1
npm init quasarInstall the plugin in remote-app and host-app:
Shell
1
3
1
npm install @originjs/vite-plugin-federation --save-dev2
# or3
yarn add @originjs/vite-plugin-federation --devCreate a component in remote-app called HelloWorld.vue:
Vue.js Component
1
3
1
<template>2
<h1>Hello from QuasarJS</h1>3
</template>Inside remote-app open quasar.config.js:
JavaScript
1
19
19
1
module.exports = configure(function (/* ctx */) {2
return {3
4
build: {5
6
vitePlugins: [7
[ '@originjs/vite-plugin-federation', {8
name: 'quasar_vite_remote',9
filename: 'remoteEntry.js',10
exposes: {11
'./Hello': './src/components/HelloWorld.vue'12
}13
} ]14
]15
16
}17
18
}19
}Inside host-app quasar.config.js:
JavaScript
1
23
23
1
module.exports = configure(function (/* ctx */) {2
return {3
4
build: {5
target: {6
browser: [ 'esnext' ],7
8
},9
10
vitePlugins: [11
[ '@originjs/vite-plugin-federation', {12
name: 'quasar_vite_host',13
filename: 'remoteEntry.js',14
remotes: {15
remote: 'http://localhost:9000/dist/spa/assets/remoteEntry.js'16
}17
} ]18
],19
20
}21
22
}23
}Inside host-app App.vue:
Vue.js Component
1
15
15
1
<template>2
<Hello />3
</template>4
5
<script>6
import { defineComponent } from 'vue'7
import Hello from 'aaa/Hello'8
9
export default defineComponent({10
name: 'App',11
components: {12
Hello13
}14
})15
</script>Start the remote-app. This will assign port 9000 to remote-app.
Start the host-app. This will assign port 9001 to host-app.
Leave a Reply