vue-hot-reload-api icon indicating copy to clipboard operation
vue-hot-reload-api copied to clipboard

Hot reload not working with global functional components

Open linniksa opened this issue 6 years ago • 0 comments
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

linniksa avatar Aug 14 '19 08:08 linniksa