blustin_blieber
blustin_blieber
PostsComments
NNuxt
Created by blustin_blieber on 10/30/2024 in #❓・help
What types to use for Typed-Pages and NuxtLink in defineProps
Hi. I have enabled experimental typed-pages and would like to define a component with props that can be passed to <NuxtLink> safely and enforce typed routes. I define these types: 
export type NavigateTo = NuxtLinkProps['to'];
export type RouteName = keyof RouteMap;
export type NavigateTo = NuxtLinkProps['to'];
export type RouteName = keyof RouteMap;
In my components: 
<script setup lang="ts">
// THIS throw vue-tsc error Vue: Expression produces a union type that is too complex to represent.
withDefaults(defineProps<{
  to: NavigateTo,
  routeName: RouteName
}>(), {
  to: undefined,
  routeName: undefined
})
</script>
<script setup lang="ts">
// THIS throw vue-tsc error Vue: Expression produces a union type that is too complex to represent.
withDefaults(defineProps<{
  to: NavigateTo,
  routeName: RouteName
}>(), {
  to: undefined,
  routeName: undefined
})
</script>
The types autocomplete properly but the app throws errors in vue-tsc with the withDefaults 
Vue: Expression produces a union type that is too complex to represent.
Vue: Expression produces a union type that is too complex to represent.
So my question is, how does one safely use typed routes in components as typescript typings? thank you
6 replies