Get api return type to use with component prop
Is there a way to get the return type of an api endpoint to use with defineProps? I know I can pull it out when I use $fetch or useFetch, but that won't work with the props.
5 Replies
Hi @bnason. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
There is no built-in or automatic way in Nuxt to directly infer or extract the return type of an API endpoint for use with
-
defineProps in a component. While Nuxt's useFetch and $fetch can infer and provide type hints for API responses when you use them directly in your setup function, this type inference does not extend to component props.
If you want to use the API return type as a prop type, you would need to manually define a TypeScript interface or type that matches your API response and use that with defineProps. There is ongoing discussion in the Nuxt community about improving type inference for dynamic routes and API endpoints, but as of now, you must manually synchronize your API types and your component prop types to ensure type safety. See the related discussion and limitations here: Add a way to properly infer types from dynamic routes.
In summary:-
useFetch and $fetch can infer types for their own usage, but not for defineProps.
- You need to manually define and maintain the types for your props to match your API response types.
- There is no automatic or built-in solution for this in current Nuxt versions.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@712351223482810390> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai What about the generated nitro-routes.d.ts
Let me check the knowledge base for you again. One moment! :books:
----------------------
Nuxt (via Nitro) generates a file called nitro-routes.d.ts, which contains type definitions for your API routes. This file maps each API route to the inferred return type of its handler, for example:
However, the knowledge sources indicate that while these types are generated and can be referenced, there isn't a built-in or ergonomic way to directly extract and use these types for component props (e.g., with
defineProps) in your components. The main challenge is that type inference is lost when you interpolate dynamic parameters (like replacing :groupId with a value), and there is no official API or utility to programmatically extract these types for use elsewhere in your app. This limitation is discussed in detail in this issue:
There isn’t a proper way to infer the type from the api/group/:groupId ... There isn’t a way currently to deal with this.
So, while nitro-routes.d.ts does contain the return types, you would need to manually import and reference the relevant types from your API handler files, or manually extract them from nitro-routes.d.ts, which is not a standard or recommended workflow at this time. There is community interest in improving this, but as of now, there is no out-of-the-box solution for using these generated types directly with defineProps or similar constructs in your componentsAdd a way to properly infer types from dynamic routes.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@712351223482810390> Kapa.ai is still learning and improving, please let me know how I did by reacting below.