Currently, I am developing a Vue.js application using CoreUI in TypeScript. The issue I am facing pertains to CoreUI's icons. While my application runs smoothly and displays the icons, Visual Studio Code raises a concern about the specific line:
icons: { cilHome, cilSettings },
Below is the complete code snippet from my main.ts file:
import Vue from "vue";
import App from "./App.vue";
import CoreuiVue from "@coreui/vue";
import { cilPencil, cilSettings } from "@coreui/icons";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
Vue.use(CoreuiVue);
new Vue({
router,
store,
icons: { cilPencil, cilSettings },
render: h => h(App)
}).$mount("#app");
The error message from Visual Studio Code reads:
No overload matches this call. Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps | undefined): CombinedVueInstance>', gave the following error. Argument of type '{ router: VueRouter; store: Store; icons: { cilHome: string[]; cilSettings: string[]; }; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithArrayProps'. Object literal may only specify known properties, and 'icons' 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; icons: { cilHome: string[]; cilSettings: string[]; }; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithRecordProps'. Object literal may only specify known properties, and 'icons' 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; icons: { cilHome: string[]; cilSettings: string[]; }; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>>'. Object literal may only specify known properties, and 'icons' does not exist in type 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>>'.ts(2769) Peek Problem No quick fixes available
I suspect this is a TypeScript type-related issue, as the code builds without errors in EcmaScript: https://github.com/coreui/coreui-free-vue-admin-template. I would greatly appreciate any insights or experiences you can share regarding such challenges. Thank you!