Add example vue3 cli #1632
Description
Hello
I have a problem with connecting two Vue (version 3.2.31) applications from vue-cli (version 5.0.1) by module-federation (vuejs/vue-cli#6823 and #307)
Somebody can add a working example to this repo?
Example fust bootstrap
npm install -g @vue/cli@5.x.x;
vue create vue3-cli-demo --default;
cd vue3-cli-demo;
npm i webpack@5.x.x --save-dev;src/index.js
import('./main');vue.config.js (need to do something with this)
const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack')
module.exports = defineConfig({
pages: {
index: {
entry: './src/index.js',
},
},
configureWebpack: {
plugins: [
new webpack.container.ModuleFederationPlugin({
name: 'vue_cli_demo',
filename: 'remoteEntry.js',
exposes: {
'./HelloWorld.vue': './src/components/HelloWorld.vue',
},
// eslint-disable-next-line global-require
// shared: require('./package.json').dependencies,
shared: {
vue: {
singleton: true,
},
},
}),
],
},
transpileDependencies: true
})and for host same steps
vue.config.js
module.exports = defineConfig({
// ...
plugins: [
new webpack.container.ModuleFederationPlugin({
name: 'other_project',
filename: 'remoteEntry.js',
remotes: {
vue_cli_demo: 'vue_cli_demo@http://localhost:8080/remoteEntry.js',
},
shared: { /*...*/ }
},
}),
],
},
});and somewhere in project
const HelloWorld = defineAsyncComponent(() => import('vue_cli_demo/HelloWorld.vue'));