[SOLVED][nuxt3][quasar] Get Union Type of Routes Paths

[angelhdzdev]

Hi, I'm using Nuxt 3 with experimental: {typedPages: true}.

I'm trying to find if there's an union type of all the routes paths,
so I can use it in a custom component extending Quasar components like QBtn which has the to attribute which accepts a route path.

So for example:

<script setup lang="ts">
import {QBtnProps} from 'quasar'
import { RoutePathUnion } from 'vue-router/auto'

interface AppBtn extends Omit<QBtnProps, "color"> {
    color?: "primary" | "secondary" | "negative"
    to?: RoutePathUnion
}
const props = defineProps<AppBtn>()
</script>

<template>
  <QBtn :color="props.color"></QBtn>
</template>

<style scoped>

</style>

And then having completion in <AppBtn to="/some path"/>.

Is there something like this, or is there a way I can implement this using nuxt package or unplugin-vue-router package APIs?

[angelhdzdev]

Solved

Haha thaaaanks Nuxt team!

type Routes = Parameters<typeof navigateTo>[0]


interface AppBtn extends Omit<QBtnProps, "color"> {
    color?: "primary" | "secondary" | "negative"
    to?: Routes
}

[posva]

I never added the actual answer: these types are exported from vue-router/auto. See #209 (comment)

[angelhdzdev]

Yes thank you! I first found them in vue-router/auto, I forgot to mention this.

Then figured out I could just use navigateTo to extract the types from it. Good stuff!

Have a nice day.