vue-class-component breaks correct functioning of Vue.Extend

[paulvanbladel]

First of all, thanks a lot for vue-class-component. It's indispensable for serious vuejs work with ts.

I'm starting from the startup sample of vue with the webpack template, which has an Hello Component with a unit test on this Hello component. So just the standard stuff. I'm using typescript.

Inside the standard unit test the vm is setup as follows

import Hello from '../../../src/components/Hello.vue';
const Constructor = Vue.extend(Hello);
const vm = new Constructor().$mount();

When I transform now the Hello.vue component in such a way I use vue-class-component, the test will BREAK.

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
@Component({
   name: 'hello'
})
export default class Hello extends Vue {
  msg: string = 'some text here';
}
</script>

I can only get the test working again by changing the way Vue.extend is used:

const Constructor = Vue.extend({ template: '<div><hello></hello></div>', components: { 'hello': Hello } });
    const vm = new Constructor().$mount();

I'm trying to understand what's going on here.
Thanks a lot for shedding a light on this.

[paulvanbladel]

I created a github repo demonstrating the problem.
https://github.com/paulvanbladel/vue-webpack-ts-simple
There are 2 component Hello and Bonjour and 2 corresponding test files.

[kaorun343]

You can do like this below.
You don't have to use Vue.extend.

@Component
class Hello extends Vue {}

const vm = new Hello()
vm.$mount()

[paulvanbladel]

Hi,
Thanks for that. Works perfectly but it gives following typescript error:
[ts] Cannot use 'new' with an expression whose type lacks a call or construct signature.
Any idea how to get rid of that.
I use following .d.ts for the .vue

declare module '*.vue' {
	import Vue = require('vue')
	const value: Vue.ComponentOptions<Vue>
	export default value
}

[kaorun343]

declare module '*vue' {
  import Vue = require('vue')
  export default Vue
}

[paulvanbladel]

Thanks a lot. That makes sense.

[jakenuts]

For some (possibly related) reason I can't use components defined in .ts files, only in .vue files. When I import a .vue file (using the shim you provided and the component below) I get a VueConstructor<> which works in the components section. But if I change the extension to .ts I get a "typeof" and it can't determine how to "new" it.

@component({
template:"{{msg}}"
})
export default class Hello extends Vue {
msg: string = "some text here";
}

import Hello from "./Hello.vue"; // .vue file works
import Hello from "./Hello"; // .ts "could not select overload for "new" expression

let app = new Vue({
el:"#sample-app",
components: {
Hello
}
});