3

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? :)

AHOYAHOY
  • 1,856
  • 4
  • 24
  • 34
  • What is your purpose when doing HMR yourself? I think Vue is doing it really well. – Duannx Jul 14 '22 at 01:58
  • I want to replace old component with an updated one. I easily achieved this in vue2 with vue-hot-reload-api. – AHOYAHOY Jul 14 '22 at 02:42
  • I mean Vue did it for us very well. HMR works with vue-cli or vite by default without any config. I didn't see any cases we need to do HMR manually. – Duannx Jul 14 '22 at 03:00
  • with dev-server/vue-cli I can update locally edited component. Not virtually created component. – AHOYAHOY Jul 14 '22 at 03:06
  • Can you make a [mre](https://stackoverflow.com/help/minimal-reproducible-example)? – Duannx Jul 14 '22 at 05:04

0 Answers0