After extensive searching online, I have struggled to find a straightforward and up-to-date example of setting up Vue.js with TypeScript. The typical tutorials out there either are outdated or rely on specific configurations that don't apply universally. It seems like there is a lack of generic, reliable examples to work from.
Here are some of the resources I checked out:
- https://v2.vuejs.org/v2/guide/typescript.html
- https://medium.com/@hayavuk/setting-vue-up-for-typescript-goodness-a6ddc4072f4f
I typically use the basic template generated by running vue-cli init webpack with default settings. Since it generates a lot of code, I won't paste it all here. But if specific parts are needed, I can provide them upon request.
The official Vue.js documentation hasn't been helpful in my context as it lacks guidance on using TypeScript with Single File Components (SFCs). The most recent attempt I made was following the last resource listed above. However, after precisely following the setup, I encountered an error when running npm run dev:
[tsl] ERROR in /Users/[REDACTED]/ts-test/src/main.ts(12,3)
TS2345: Argument of type '{ el: string; router: any; template: string; components: { App: { name: string; }; }; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Rec...'.
Object literal may only specify known properties, and 'router' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Rec...'.
If anyone can offer insights into why this issue is occurring and how to resolve it, I would greatly appreciate it. Ideally, I'm seeking a clear, concise, step-by-step guide on setting up a functional Vue.js + TypeScript configuration using the webpack template.
Although I have successfully completed various client projects using Vue.js with plain JavaScript, integrating TypeScript into Vue.js has proven to be quite confusing for me.