NuxtLink

Sometimes you don't want to use NuxtLink directly and make a wrapper component, there is a way to do it with nuxt-typed-router. It implies using component generics if you're on a Vue SFC

<template>
    <NuxtLink :to="props.to"></NuxtLink>
</template>

<script setup lang="ts" generic="T extends RoutesNamesList, P extends string">
import type { RoutesNamesList, NuxtRoute } from '@typed-router';

const props = defineProps<{
  to: NuxtRoute<T, P>;
}>();
</script>

It's also easy to add support for external prop

<template>
    <NuxtLink :to="props.to" :external='props.external'></NuxtLink>
</template>

<script setup lang="ts" generic="T extends RoutesNamesList, P extends string, E extends boolean = false">
import type { RoutesNamesList, NuxtRoute } from '@typed-router';

const props = defineProps<{
  to: NuxtRoute<T, P>,
  external?: E,
}>();
</script>

Same behaviour for pure Typescript functions

import type { RoutesNamesList, NuxtRoute } from '@typed-router';

export function myCustomNavigateTool<T extends RoutesNamesList, P extends string>(to: NuxtRoute<T, P>) {
 //
}
There is also the same type variant if you use @nuxtjs/i18n : NuxtLocaleRoute
Edit this page on GitHub