Ever since I updated my project to utilize the latest 2.x release of Vuetify (https://vuetifyjs.com), I've been encountering Type Errors during compilation and I'm unsure of how to resolve them. It seems like there might be an issue with my tsconfig configuration.
I carefully reviewed the documentation and made sure to include Vuetify in the types section of my tsconfig.json as shown below:
{
"compilerOptions": {
...
"types": [
"webpack-env",
"jest",
"vuetify",
"axios"
],
...
}
}
My code is quite straightforward:
import Vue from 'vue';
import App from './App.vue';
import vuetify from './plugins/vuetify';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
new Vue({
vuetify,
router,
store,
render: (h) => h(App),
}).$mount('#app');
I then run the dev server with: yarn serve
ERROR in /Users/sebe/workspace/app/frontend/arena/src/main.ts
12:3 Argument of type '{ vuetify: Vuetify; router: VueRouter; store: Store<any>; render: (h: CreateEle
ment) => VNode; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, Def
aultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.
Object literal may only specify known properties, and 'vuetify' does not exist in type 'ComponentOpt
ions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>
, Record<string, any>>'.
8 |
9 | new Vue({
> 10 | vuetify,
| ^
11 | router,
12 | store,
13 | render: (h) => h(App),
ERROR in /Users/sebe/workspace/app/node_modules/vuetify/types/index.d.ts
59:10 Cannot find name 'DefaultData'.
57 | export interface ComponentOptions<
58 | V extends Vue,
> 59 | Data=DefaultData<V>,
| ^
60 | Methods=DefaultMethods<V>,
61 | Computed=DefaultComputed,
62 | PropsDef=PropsDefinition<DefaultProps>,
The same error occurs for DefaultProps, PropsDefinition, DefaultComputed, and DefaultMethods.
Any assistance would be highly appreciated :)
UPDATE: I just realized that I encounter the same errors using the default Vuetify TypeScript template:
vue create newapp
vue add vuetify
yarn serve
Here's what my ./plugins/vuetify.ts file looks like:
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import colors from 'vuetify/lib/util/colors';
import { VuetifyPreset } from 'vuetify/types/presets';
Vue.use(Vuetify);
const opts: Partial<VuetifyPreset> = {
theme: {
dark: true,
themes: {
light: {
primary: colors.green.base,
},
dark: {
primary: colors.green.darken2,
},
},
},
icons: {
iconfont: 'mdi',
},
};
export default new Vuetify(opts);