Nuxt•3mo ago

Error using zod based type in defineProps<>()

When exporting type using z.infer<> of zod schema I have an error in defineProps<>() place. Pre-transform error: [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type PS: when using type without schema it works Code:

types.ts
....
const CustomerSchema = z.object({ firstName: z.string() }) // dummy schema
export type Customer = z.infer<typeof CustomerSchema>

....
<script setup lang="ts">
import type { Customer } from '/types'

const props = defineProps<Customer>()
...

types.ts
....
const CustomerSchema = z.object({ firstName: z.string() }) // dummy schema
export type Customer = z.infer<typeof CustomerSchema>

....
<script setup lang="ts">
import type { Customer } from '/types'

const props = defineProps<Customer>()
...

3 Replies

Ádám Metál [BP.Mentor]•3mo ago

Hi, i have a working example for you. 🙂

Ádám Metál [BP.Mentor]•3mo ago

https://github.com/devmetal/mtg-guessing-game-nuxt/blob/main/utils/zCard.ts

GitHub

mtg-guessing-game-nuxt/utils/zCard.ts at main · devmetal/mtg-guessi...

Contribute to devmetal/mtg-guessing-game-nuxt development by creating an account on GitHub.

Ádám Metál [BP.Mentor]•3mo ago

I'm not the biggest nuxt dev just now, i'm still learning this stuff. (coming from nextjs) but i'm also like to use zod. And for me its working fine.

<script lang="ts" setup>
const props = defineProps<{
  card: ScryCard;
}>();
</script>

<script lang="ts" setup>
const props = defineProps<{
  card: ScryCard;
}>();
</script>

Gaming

Programming

Error using zod based type in defineProps<>()