Nuxt•2mo ago

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

3 Replies

kapa.ai•2mo ago

Hi @blustin_blieber. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To answer your question about using typed routes with <NuxtLink> and experimental typed pages in Nuxt, let's break it down based on the available information: 1. Enabling experimental typed pages: You've correctly enabled the experimental typed pages feature in your nuxt.config.ts file. This is done by setting typedPages: true in the experimental options as described in the Nuxt documentation (https://nuxt.com/docs/guide/going-further/experimental-features#typedpages). 2. Defining types for NavigateTo and RouteName: Your approach to defining these types seems reasonable, but the exact implementation of RouteMap is not provided in the knowledge sources. 3. Using withDefaults and defineProps: The error you're encountering with withDefaults and defineProps is not directly addressed in the provided knowledge sources. However, we can infer that the complexity of the union type produced by NavigateTo might be causing issues with TypeScript's type inference. To address this, you might want to try a different approach:

<script setup lang="ts">
import type { PropType } from 'vue'

const props = defineProps({
  to: {
    type: [String, Object] as PropType<NavigateTo>,
    default: undefined
  },
  routeName: {
    type: String as PropType<RouteName>,
    default: undefined
  }
})
</script>

<script setup lang="ts">
import type { PropType } from 'vue'

const props = defineProps({
  to: {
    type: [String, Object] as PropType<NavigateTo>,
    default: undefined
  },
  routeName: {
    type: String as PropType<RouteName>,
    default: undefined
  }
})
</script>

This approach uses Vue's PropType to explicitly type the props, which might help avoid the "too complex to represent" error. It's worth noting that the experimental typed pages feature is still in development, and there might be some limitations or issues when using it with complex types. For a more robust solution, you might want to consider using the defineNuxtLink utility to create a custom link component with your desired prop types. This approach is documented in the Nuxt API reference (https://nuxt.com/docs/api/components/nuxt-link#custom-link-component):

// components/MyNuxtLink.ts
export default defineNuxtLink({
  componentName: 'MyNuxtLink',
  // Define your custom props here
})

// components/MyNuxtLink.ts
export default defineNuxtLink({
  componentName: 'MyNuxtLink',
  // Define your custom props here
})

Then you can use your custom <MyNuxtLink> component with the prop types you've defined. Lastly, it's important to note that as this feature is experimental, you might encounter issues that are not yet documented or resolved. If the problem persists, you may want to consider reporting it as an issue on the Nuxt GitHub repository or seeking help from the Nuxt community forums. Remember, the typed pages feature is designed to provide type safety for routing, including navigateTo, <NuxtLink>, and router.push() as mentioned in the Nuxt documentation (https://nuxt.com/docs/guide/going-further/experimental-features#typedpages), but it's still evolving and may have some limitations. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@459858157326565377> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

hiimmox•2mo ago

I dont have an answer, but I would check the types under .nuxt and find the ones it generated for the routes. You might get some insights from there

Gaming

Programming

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