question: is there an advantage of using 'WithRender'

[dvic]

Considering the Hello example, is there a reason not to use regular imports for CSS and the template property of the Component decorator?

import Vue from "vue";
import Component from "vue-class-component";
import "./Hello.css";

@Component({
  template: require("./Hello.html"),
})
export default class Hello extends Vue {
  msg = "Welcome to Your Vue.js App";

  constructor() {
    super();
  }
}

The example in the template is currently:

import Vue from "vue";
import Component from "vue-class-component";
import WithRender from "./Hello.html?style=./Hello.css";

@WithRender
@Component
export default class Hello extends Vue {
  msg = "Welcome to Your Vue.js App";

  constructor() {
    super();
  }
}

[Toilal]

I think that with the second code, templates are compiled at build time, but with the first one it's compiled at runtime, so it'll be a little slower and requires to embed the vue compiler in the distribution bundle.

Also, Hot Module Reload will not work on templates when using the first code. With latest version, hot-module-reload will work properly if

• You use @WithRender decorator to load template
• Your component scripts filenames all ends with .vue.ts (or .vue.js)

As a consequence, script modules that are not vue components MUST NOT END with .vue.ts, to avoid them being processed by vue-hot-reload-loader (see ktsn/vue-hot-reload-loader#6 for more details.)

Also you should define a single component per script file, and the component must be default exported for Hot Module Reload to work.

(Hot Module Reload means that components are dynamically reloaded without refreshing the whole webapp)

[dvic]

Thanks for the explanation, I get it.

By the way: #3 was also on my TODO and I'll also look into using https://github.com/sshev/karma-remap-coverage for correct coverage reporting.