CODEWITHSUNDEEP
typescriptvue.jsvuejs2vuetify.js
Ogglas
Ogglas

Reputation: 69958

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

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

https://v2.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<Vue, object, object, object, never> | undefined): CombinedVueInstance<Vue, object, object, object, Record<...>>', 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<Vue, object, object, object, never>'. Object literal may only specify known properties, and 'vuetify' does not exist in type 'ThisTypedComponentOptionsWithArrayProps<Vue, object, object, object, never>'. Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object> | undefined): CombinedVueInstance<Vue, object, object, object, Record<...>>', 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<Vue, object, object, object, object>'. Object literal may only specify known properties, and 'vuetify' does not exist in type 'ThisTypedComponentOptionsWithRecordProps<Vue, object, object, object, object>'. Overload 3 of 3, '(options?: ComponentOptions<Vue, DefaultData, DefaultMethods, DefaultComputed, PropsDefinition<Record<string, any>>, 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<Vue, DefaultData, DefaultMethods, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'. Object literal may only specify known properties, and 'vuetify' does not exist in type 'ComponentOptions<Vue, DefaultData, DefaultMethods, DefaultComputed, PropsDefinition<Record<string, any>>, 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

Upvotes: 2

Views: 5094

Answers (1)

Ogglas
Ogglas

Reputation: 69958

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"
],

Upvotes: 10

Related Questions