Hey everyone, I recently decided to incorporate TypeScript into my Vue project. After successfully compiling without any errors, I encountered a console error message when opening the page:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <App> at src/App.vue
<Root>
Here is a snippet from my main.ts:
import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import store from './store/store'
// @ts-ignore
import VueFormulate from '@braid/vue-formulate'
import api from './api/api'
import './assets/scss/app.scss'
import './registerServiceWorker.ts'
Vue.config.productionTip = false
// @ts-ignore
Vue.$api = api;
Object.defineProperty(Vue.prototype, '$api', {
get() {
return api
}
})
Vue.use(VueFormulate)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
Additionally, here's an excerpt from my App.vue. Confirming that vue-class-components has been properly installed:
<template>
<div class="container-fluid container-lg container-xl" id="app">
<router-view></router-view>
</div>
</template>
<script lang="ts">
import Component from "vue-class-component";
import Vue from "vue";
@Component
export default class App extends Vue{
created(){
console.log("foo");
}
}
</script>
I followed the component structure directly from the documentation, so I suspect the issue lies within my main.ts. It's worth noting that this is a Vue2 project, so no compatibility issues with Vue3.