What's the simplest way to add vue.js typings to an existing typescript file?

Question

I've got an existing ASP.NET web site, I'm using Typescript and everything is ticking along nicely.

If I decide I want to use jQuery I can simply run npm install @types/jQuery, and suddenly jQuery in all is glory is available to me in my .ts file. If I want to use lodash then npm install @types/lodash and without further ado there is my fully typed lodash.

If however I run npm install @types/vue then.... nothing. Any reference to Vue in my .ts file gets me TS2304 (TS) Cannot find name 'Vue'.

What's going on? I thought Vue was supposed to be one of the most Typescript friendly projects?

Vue comes with definition files. If you have it installed (with npm install vue) it should work (maybe check your module resolution ) — Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir, Commented May 20, 2019 at 14:59
@TitianCernicova-Dragomir I've tried that but still no joy. I'm not doing anything special with module resolution. For instance if I create a new empty ASP.NET Core Web Application in Visual Studio and do nothing but add a .ts file and npm install @types/jquery then that all works, but not with npm install vue. — stovroz
– stovroz, Commented May 20, 2019 at 15:17

Doğancan Arabacı · Accepted Answer · 2019-05-20 15:00:41Z

1

Check the disclaimer in @types/vue https://www.npmjs.com/package/@types/vue

This is a stub types definition for vuejs (https://github.com/vuejs/vue). vuejs provides its own type definitions, so you don't need @types/vue installed!

Your compiler thinks that @types/vue is the right package. But it's probably causing the bug. You can try to remove it. If you still can't get the type, you might need to include node_modules/vue into your typing roots

answered May 20, 2019 at 15:00

Doğancan Arabacı

3,9822 gold badges19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

stovroz Over a year ago

If I remove all trace of @types/vue and instead npm install vue the effect is the same, i.e. any use of Vue in typescript gets Cannot find name 'Vue'.

Doğancan Arabacı Over a year ago

You created your project with @vue/cli, right? Probably you have a small configuration issue. I'd recommend to go over vuejs.org/v2/guide/typescript.html

stovroz Over a year ago

No I didn't create the project with @vue/cli. This is a large existing project and I just want to use vue on one of the pages. The last time I did this it was incredibly easy, I just needed to add /// <reference path="vue.d.ts" /> to the top of my .ts file, but it seems it's all changed since those good old days.

Doğancan Arabacı Over a year ago

theoretically you should be able to do the same thing by adding node_modules/vue/types/index.d.ts. But probably you should do the same for router, maybe vuex etc. I think your typeRoots in ts config should be ['./node_modules/@types', "vue/types"]

stovroz Over a year ago

node_modules\vue\types\index.d.ts does exist, it was added when I ran npm install vue, along with options.d.ts, plugin.d.ts, vnode.d.ts and vue.d.ts.

|

Collectives™ on Stack Overflow

What's the simplest way to add vue.js typings to an existing typescript file?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related