New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Reactivity and multiple root nodes are not working for a remote component #12291
Comments
Did further investigation, converted <template>
<div>
<h3 style="margin-top: 1rem;">{{ msg }}</h3>
<button @click="flag = !flag" >Update</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Micro App',
flag: false
}
},
mounted() {
console.log('Triggering mounted ..')
this.msg = 'Micro App (updated)'
},
watch: {
flag() {
console.log('Triggering watch ..')
this.msg = 'Micro App (updated by watch)'
}
}
}
</script> However multiple root nodes are not working with options API too. So updating <template>
<h3 style="margin-top: 1rem;">{{ msg }}</h3>
<button @click="flag = !flag" >Update</button>
</template> |
This is because you have two Vue instances in your app. Changing import { resolve } from "path";
import { defineConfig } from "vite";
import vue from '@vitejs/plugin-vue'
import replace from '@rollup/plugin-replace'
import virtual from "@rollup/plugin-virtual";
export default defineConfig({
build: {
lib: {
entry: resolve(__dirname, "src/index.js"),
name: "MicroAppVueComponents",
fileName: "vue-components",
formats: ['es']
},
rollupOptions: {
// make sure to externalize deps that shouldn't be bundled
// into your library
plugins: [
replace({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
preventAssignment: true
}),
]
}
},
plugins: [
vue(),
{
...virtual({
'vue': `
export const ref = Vue.ref
export const onMounted = Vue.onMounted
export const openBlock = Vue.openBlock
export const createElementBlock = Vue.createElementBlock
export const toDisplayString = Vue.toDisplayString
`
}),
enforce: 'pre'
}
],
resolve: {
alias: {
"@": resolve(__dirname, "./src"),
},
},
preview: {
// port: 8091
}
}); Then, adding the following code at the top of import { ref, onMounted, openBlock, createElementBlock, toDisplayString } from 'vue'
window.Vue = { ref, onMounted, openBlock, createElementBlock, toDisplayString } worked. Closing as this is not a bug in Vite. |
Thanks @sapphi-red, It is working now. However I had to add few more lines to
|
Describe the bug
I have a vuejs 3 application (
main-app
) which is consuming a component from a lib project (micro-app
) hosted on a remote location. I have defined a plugin as part of lib project which registers its components with vuejs 3 host application. While consuming components from lib project in the host application I am facing following issues -App1Home.vue
) renders fine if it is having only one root component. But if I add more than one root component, it stops rendering without showing any error in the console logs or anywhere else.App1Home.vue
) has aonMounted()
hook defined but same is not being triggered.Host application - https://github.com/koyadume/main-app
Remote lib project - https://github.com/koyadume/micro-app
I had this working successfully with webpack 4 and so it seems this is an issue with vite.
Reproduction
https://github.com/koyadume/main-app
Steps to reproduce
Above command will run host application (
main-app
) on 8090 port while lib project (micro-app
) will run on 8091 port. Lib project will be accessible over 8090 port through the proxy defined in host application.Open a browser and access
http://localhost:8090
url.On the home page you will see
Micro App
printed in the last line but it should ideally beMicro App (updated)
ifonMounted()
hook was fired successfully.Uncomment below line in
App1Home.vue
ofmicro-app
project and you will see that no content fromApp1Home.vue
will be printed on the home page.System Info
Used Package Manager
yarn
Logs
No response
Validations
The text was updated successfully, but these errors were encountered: