I have various components, with a parent element where I attempted to pass props using the syntax defineProps<{}>(). The setup is simple, I have a types.ts file at the root level, a parent Vue file (referred to as CardItem), and multiple components.
Here's what I've done so far...
/* types.ts */
export type IItem = { title: string; description: string };
/* DetailedCard.vue */
<script setup lang="ts">
import TestItem from "../test.vue";
</script>
<TestItem :title="'hello world'" :description="'lorem ipsum dolor sit amet'" />
/* TestItem.vue */
<script setup lang="ts">
import type { IItem } from "@/types";
const { title, description } = defineProps<IItem>();
</script>
<template>{{ title }} {{ description }}</template>
The error(s) I'm encountering:
[@vue/compiler-sfc] type argument passed to
defineProps()must be a literal type, or a reference to an interface or literal type.
Additionally, when I try to use it this way...
... ...
interface Item extends IItem {}
const { title, description } = defineProps<Item>();
I receive warnings at runtime:
runtime-core.esm-bundler.js:40 [Vue warn]: Property "title" was accessed during render but is not defined on instance. at
<Test title="hello" description="world" >
runtime-core.esm-bundler.js:40 [Vue warn]: Property "description" was accessed during render but is not defined on instance. at<Test title="hello" description="world" >
The only solution that works is if I directly declare an interface/type in the TestItem component itself.
interface Item { title: string; description: string; };
const { title, description } = defineProps<Item>();
So, what could possibly be going wrong here!
Thank you!