Vue - vuetify - Object literal may only specify known properties, and 'vuetify' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>

Question

Created a new Vue project with TypeScript using the following guide:

https://vuejs.org/v2/guide/typescript.html

1. Install Vue CLI, if it's not already installed

   npm install --global @vue/cli

2. Create a new project, then choose the "Manually select features" option

   vue create my-project-name

Tested the project with npm run serve and it worked without a problem.

I then added vuetify by running vue add vuetify

https://vuetifyjs.com/en/getting-started/quick-start/

This caused some errors however:

ERROR in C:/Test/vue-test/src/main.ts(13,3): 13:3 No overload matches this call. Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps | undefined): CombinedVueInstance>', gave the following error. Argument of type '{ router: VueRouter; store: Store<{}>; vuetify: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithArrayProps'. Object literal may only specify known properties, and 'vuetify' does not exist in type 'ThisTypedComponentOptionsWithArrayProps'. Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps | undefined): CombinedVueInstance>', gave the following error. Argument of type '{ router: VueRouter; store: Store<{}>; vuetify: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithRecordProps'. Object literal may only specify known properties, and 'vuetify' does not exist in type 'ThisTypedComponentOptionsWithRecordProps'. Overload 3 of 3, '(options?: ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>> | undefined): CombinedVueInstance<...>', gave the following error. Argument of type '{ router: VueRouter; store: Store<{}>; vuetify: any; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>>'. Object literal may only specify known properties, and 'vuetify' does not exist in type 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>>'. 11 | router, 12 | store,

13 | vuetify, | ^ 14 | render: h => h(App) 15 | }).$mount('#app') 16 | ERROR in C:/Test/vue-test/src/plugins/vuetify.ts(2,21): 2:21 Could not find a declaration file for module 'vuetify/lib'. 'C:/Test/vue-test/node_modules/vuetify/lib/index.js' implicitly has an 'any' type. Try npm install @types/vuetify if it exists or add a new declaration (.d.ts) file containing declare module 'vuetify/lib'; 1 | import Vue from 'vue'; 2 | import Vuetify from 'vuetify/lib'; | ^ 3 | 4 | Vue.use(Vuetify); 5 | Version: typescript 3.8.3 Time: 1997ms

Answer 1

Found a good answer here:

https://github.com/vuetifyjs/vue-cli-plugins/issues/112#issuecomment-562935079

No need to add typeRoots though.

Simply add vuetify to types under compilerOptions in tsconfig.json.

Example:

"types": [
  "webpack-env",
  "mocha",
  "chai",
  "vuetify"
],