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'));