Vue.js + TypeScript project doesn't render template inside .vue file

2
votes

I'm trying to set up a Vue TS based project. You can view a structure of it inside this repo:

https://github.com/AndrewBogdanovTSS/typed-vue-test

I'm using latest versions of all dependencies that are required to render TS inside .vue files. Once I'm running a project my TS constructor seems to be running without any issues (I see console statements are working normally) but the problem is that template data isn't getting to the browser's DOM. Moreover, the default div with id app is getting removed so the only thing that is left inside of my DOM is a reference to build.js file. I don't have any errors occurring on the first run, but once I do any change inside of the .vue file I'm getting:

TypeError: Cannot read property 'extend' of undefined
1
typescriptvue.jsvuejs2
Try one of boilerplates from the vue-awesome. - Piterden
Yes, I've tried other templates and they are working. But I want to understand what is particularly wrong with mine - Andrew Bogdanov

1 Answers

3
votes

I've figured out what was wrong with my code, I forgot to use @Component decorator in front of my ts class inside App.vue file. Without it, TS code has been executing but it wasn't connected to the Vue instance, that's why nothing was displaying on the screen. I went and created a new repo that I plan to support as my base template for Vue-TS type projects. https://github.com/AndrewBogdanovTSS/typed-vue

feel free to suggest improvements/ideas