I'm trying to pass a component through props to be rendered using the <Component :is="">
component, but can't seem to figure out the right types to be using.
Type definition is as follows
import type { Component } from "vue";
export interface GridColumn {
// not relevant stuff here
component?: Component,
}
Then within my component I have, the following, which has no complaints at this point.
import Severity from "@/modules/playground/grid-columns/Severity.vue";
import type { DataRow, GridColumn } from "@/components/grid/grid-column.type";
const columns: GridColumn[] = [
{
component: Severity,
}
];
But when I get into the actual usage rendering it gives a type error, but still renders as expected.
<template>
<Component
v-if="col.component"
:is="col.component"
></Component>
</template>
The is
property line above is highlighted in my editor (PHPStorm 2023.1) as an error:
Type (ComponentOptionsBase<any, any, any, ComputedOptions, MethodOptions, any, any, any> & ThisType<CreateComponentPublicInstance<{}, any, any, ComputedOptions, MethodOptions, any, any, any, Readonly>>) | FunctionalComponent<any, any> | ComponentPublicInstanceConstructor is not assignable to type string | ComponentDefinition
This is the IDE issue, please follow WEB-60065 and linked tickets for updates