Recommendation for handling route props of type?

[mseeley]

I'm hoping a reader has recommendation for handling typing route parameters. What's the idiomatic way to handle casts without Vue Router's Function Mode?

For example, consider:

[id].[[action]].vue

Where id is a simple string and action is numeric Action enum value. /a023sf/0 would View a023sf.

export enum Action {
  View
  // ...
}

The Vue document resembles this:

<route lang="json">
{ "name": "detail", "props": true }
</route>

<script setup lang="ts">
import type { Action } from '@/types'

export interface Props {
  action: Action
  id?: string
}

const props = defineProps<Props>()

The Props definition is misleading, all props are strings. But as far as I've encountered there's no error thrown during type checking. No worries here, I think these are understandable behaviors/limitations.

My question is, what's typical way to cast these props back to strings?

• Replace props: true with useRouteParams usage (+ transform)?
• Keep props: true and roll our own transform+cast helper? Perhaps with computed.
• Other?

Thanks a lot for the input. :)

[posva]

I think at some point it would be nice to add custom matchers like https://kit.svelte.dev/docs/advanced-routing#matching