Trying to incorporate props into my component has led me to this documentation: https://vuejs.org/guide/typescript/composition-api.html#typing-component-props, which seems to be a common reference point. The type should be included in the defineProps function.
<script setup lang="ts">
const props = defineProps({
foo: { type: String, required: true },
bar: Number
})
props.foo // string
props.bar // number | undefined - they are not usable in the template if I just define the const...
</script>
I attempted to add them to my component. However, it requires some action within the setup block.
import { defineComponent } from 'vue'
export default defineComponent({
props: {
message: String
},
setup(props) {
props.message // <-- type: string
}
})
<template>
<CNavItem :href="props.href">
<CIcon customClassName="nav-icon" :icon="icon" />{{label}}</CNavItem>
</template>
<script lang="ts">
import { defineComponent, defineProps } from "vue";
import { CNavItem } from '@coreui/vue';
import { CIcon } from '@coreui/icons-vue';
interface Props {
label: string;
href: string;
icon: any[];
}
const props = defineProps<Props>();
export default defineComponent({
components: {
CNavItem,
CIcon
},
setup(props) {
// Need to figure out how to pass props into the template here.
// Otherwise, compiler will raise errors...
}
});
</script>
Somewhere along the way, there seems to be a missing link. How can I ensure that the content of const props is accessible in my template?