Vue-class-component: How can I add hot reload with ES6 class declaration?

[phenrigomes]

[HerringtonDarkholme]

Yes you can.

You either need vue-loader, or manually use vue-hot-reload-api.

[phenrigomes]

I created the class:

import Vue from 'vue';
import Component from 'vue-class-component';

@Component({})
export default class AdvantagesZone extends Vue {}

--- But hot reload does not work. I am using "vue-loader": "^10.3.0" of webpack template.

{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
}

[ktsn]

@phenrigomes
Can you provide a complete reproduction on github repository? I could not reproduce it from your snippet.

[John0x]

@ktsn I got the same problem.
Changes to the code trigger "something", at least it outputs to the console the following:
[HMR] Checking for updates on the server... process-update.js:100 [HMR] Updated modules: process-update.js:102 [HMR] - ./~/vue-loader/lib/template-compiler.js?id=data-v-027f3a80!./~/vue-loader/lib/selector.js?type=template&index=0!./src/pages/front/index.vue process-update.js:107 [HMR] App is up to date.

It just doesn't reload the changes. Once you reload it in the browser (f5) the changes are there.

[ktsn]

We can't help you without actual reproduction...

[John0x]

@ktsn sure, here it is:
https://github.com/John0x/babel-vue-repro

Used the vuetifyjs/webpack-ssr template as a starting point and added babel and vue-typed (which uses the class component thing).

Thanks for looking into this :)

[ktsn]

I'm not sure what you are reporting. The reproduction does not include vue-class-component.
If you just want to ask questions, please use forum or gitter. Or create the issue on relevant repository (the template or vue-typed repository).

[HerringtonDarkholme]

Thank you for supporting Vue. But we do need your further collaboration.

To address issue efficiently, we need minimal reproduction.

webpack-simple is a good start. You can first incrementally add code until issue happens.

Then, to make code minimal, you can selectively delete script/style/template that does not influence the issue. Usually, style is irrelevant and safe to delete.

You need also apply this rule to webpack configuration where most problems happen there.

[John0x]

I tried to reproduce it using the webpack-simple template, but weirdly enough it works without problems there. So it seems like the issue is caused by something else.

I'll look further into this in the evening.

[chanon]

I can also confirm that vue-class-component is having problems with hot-reload. The hot-reload usually works once and then after that it stops working. I am using vue-cli webpack template.

EDIT: Also I am using with typescript / ts-loader, following the tutorial here: http://www.mindissoftware.com/Vue-Sample-in-Typescript/ (adapted it to the latest webpack template)

[HerringtonDarkholme]

Related https://github.com/TypeStrong/ts-loader/issues/433

[chanon]

Also likely the same issue as this one: https://github.com/TypeStrong/ts-loader/issues/459

[chanon]

Here is the reproduction:
https://github.com/chanon/ts-vue-hmr

See:
https://github.com/chanon/ts-vue-hmr/blob/master/src/components/Hello.vue#L25-L45

There are at least 2 issues. One is when using vue-class-component, editing of the <template> section does not get updated in browser. Second is when editing inside the <script lang="ts"> portion, the whole page will get reloaded (regardless of whether vue-class-component is used).

[John0x]

I currently have the same issue using babel-loader

[chanon]

For reference after trying av-ts regarding hot-reload, it isn't perfect but still behaves better. There are no full page reloads, just that sometimes the hot-reload doesn't want to update.

So I think there is likely some underlying issue that is causing problems and also issues in vue-class-component itself.

[ktsn]

I find there is a bug in core library that accidentally drop late-injected options of constructors. That means, if we use vue-hot-reload-api or vue-loader, they inject some options into component options object after creating component constructors, then the component is instantiated by using constructor with $createElement and the injected options are dropped in resolveComponentOptions function.

Actually, #66 is same problem as this.

[ktsn]

Simplified repro. https://jsfiddle.net/vvxLyLvq/2/

[chanon]

Has there been an issue for this bug created in the vue core github yet and should there be?

[ktsn]

No not yet. It would be appreciated if you can create in there :slightly_smiling_face:

[ktsn]

@chanon Thank you for creating the issue in core repo! Let's move on vuejs/vue#4976