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

Nuxt•17mo ago•

5 replies

blustin_blieber

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

What types to use for Typed-Pages and NuxtLink in defineProps

Similar Threads

What types to use for Typed-Pages and NuxtLink in defineProps

Similar Threads

Similar Threads

Similar Threads