CODEWITHSUNDEEP
vue.jsvuejs3webpack-hmrvue3-sfc-loader
AHOYAHOY
AHOYAHOY

Reputation: 1847

compile Vue 3 component for HMR

vuejs/vue-hot-reload-api for Vue2 accept simple object with component options.

Vue3 have built-in HMR support and it needs a different approach. I can't figure out how properly update component.

What kind of data is need for __VUE_HMR_RUNTIME__.createRecord()?

And how to compile updated component again for __VUE_HMR_RUNTIME__.reload()

I think both functions need render function. But it is created when the component is loaded to dom or something. When I use something like below, render() function is not present in cmp.

let cmp = defineComponent({template: '<div>test</div>})
let inst = Vue.component('test', cmp)

When I use component in parent component, render() is compiled and included in cmp.

But I cant register changed component same way because Vue3 show warn that this component is already registered.

How to compile updated component below and use it in __VUE_HMR_RUNTIME__.reload()?

let updatedCmp = defineComponent({template: '<div>test Me!</div>'})

I tried vue's compile() function, but it doesn't work for me...

I assume this is the only way to replace a component with a modified version in runtime? :)

Upvotes: 3

Views: 835

Answers (0)

Related Questions