I have a Vue3 component that makes some GraphQL requests. It gets back a big block of JSON and I have a computed to get the value I need from it. I want to pass this value to a child component as a prop.

However, in the child component, I need to be able to type my defineProps call. Since I want to accept the computed value, I need to have that type here to show it. The computed property I have is very large, so I don’t want to manually type this outside of my component and import it into both. Instead of manually typing it, I just use the typeof operator.

How do I export this type?

// Parent.vue
<script setup lang="ts">
const { results } = useQuery(...)
const myComputed = computed(() => results.nested.item.is.here)
</script>

<template>
  <Child :passToMe="myComputed" />
</template>


// Child.vue
const props = defineProps<
  passToMe: ???
>()

I saw that you can export from a component with a separate <script> tag, which would work BUT it isn’t scoped to see the computed property from my <script setup>.

I could just use the type of the gql results, but since this value is nested, that doesn’t quite work.

I can’t move the query down to the Child level just to get the type there, because I need other components to use the <Child> component and this type in the <Parent> computed is the minimumally required type I want to enforce.

So how do I export this type to use in multiple places?