vue-hot-reload-api
vue-hot-reload-api copied to clipboard
Hot reload not working with global functional components
trafficstars
test.vue
<template functional>
<div>example</div>
</template>
main.js
import test from 'test.vue'
Vue.component('test', test)
App.vue
<template>
<div>
<test />
</div>
</template>
If i changing test.vue file - hot reload won't works.
As i can see this is because Vue.component creates new options object, but hot reload stores original component object
if i adds something like this:
function makeOptionsHot(id, options) {
if (options.functional) {
var render = options.render
options.render = function (h, ctx) {
+ var record = map[id]
+ if (record.options !== ctx.$options) {
+ record.options = ctx.$options
+ }
var instances = map[id].instances
if (ctx && instances.indexOf(ctx.parent) < 0) {
instances.push(ctx.parent)
}
return render(h, ctx)
}
all works as expected