Utilizing vue-class-component allows me to incorporate class syntax and TypeScript type checking within my .vue files. I can easily create .vue files and register them as components using this method, with the exception of the root Vue() instance.
This approach is successful
The hello.vue file demonstrates the usage of vue-class-component (abridged for conciseness)
<template></template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component({
})
export default class Hello extends Vue {
created() {
console.log("I am created!")
}
}
</script>
Subsequently, importing hello in the root Vue instance can be done in the following manner:
import Hello from "./components/hello.vue"
let v = new Vue({
el: "#app",
template: `<div><hello></hello></div>`,
components: {Hello},
created : function(){
console.log("root instance created")
}
});
However, a roadblock emerges here
The desire to use the same class syntax when creating the root Vue instance sets forth a challenge:
app.vue
<template><hello></hello></template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import Hello from "./components/hello.vue"
@Component({
el: "#app",
components: {Hello}
})
export default class App extends Vue {
created() {
console.log("created the root instance")
}
}
</script>
Consequently, importing app.vue in index.ts raises complications.
import Vue from "vue"
import App from "./components/app.vue"
let vm = new Vue(App)
An attempt to utilize App for initializing the Vue root instance triggers the following error message:
Argument of type 'typeof Vue' is not assignable to parameter
of type 'ComponentOptions<Vue> | undefined'
In order to resolve this issue, how do I define a ComponentOptions? Furthermore, is it conceivable for a .vue file to serve as the entry point of the application instead of index.ts?