How to access parameters of multiple nested routes?

[adamdehaven]

In a Nuxt 3 application, let's say that I have the following page structure:

pages/
└── products/
    ├── [product_id]/
    │   └── versions/
    │       └── [version_id].vue
    └── [product_id].vue

This page structure generates the following routes:

• products/{product_id}
• products/{product_id}/versions/{version_id}

Since the version_id is a nested route, this means that the [product_id].vue component will contain a <NuxtPage /> component that will display the content of [version_id].vue

<template>
  <div>
    <h1>Page content for {{ route.path }}</h1>

    <div v-if="route.params.version_id">{{ route.params.version_id }}</div>

    <!-- nested page content -->
    <NuxtPage />
  </div>
</template>

<script setup lang="ts">
const route = useRoute('products-product_id')
</script>

In the example above, the h1 outputs the current path, and the div conditionally displays the version_id route parameter; however, I get an error where I am outputting the version that route.params.version_id does not exist since in the script setup block I am telling the useRoute composable that I am on the products-product_id route.

Since my app contains these nested routes, the only way to not have a type error within this page component is to "cheat" and change the typed route definition in the parent component to this:

const route = useRoute('products-product_id-versions-version_id')

By forcing the useRoute composable to believe it's always on the nested child route, I no longer get an error when trying to access the version_id route param since I am telling it I am always on the corresponding route.

In my real-world use-case, I have several nested routes, so it's impossible to "cheat" and I will always get some form of error when attempting to conditionally access route parameters of nested routes in a parent page component.

Is it possible to tell the useRoute composable that any one of multiple routes are valid?

Originally, without reading through the documentation, I guessed that I could do something like this (spoiler alert, you cannot):

const route = useRoute('products-product_id' | 'products-product_id-versions-version_id')

[posva]

Technically, you shouldn't use a param from a deeper view: why should that view be aware of it? Maybe the nested routing wasn't needed and you just wanted to split your page component into multiple ones.

You guess right, you can do what you wanted, you just used the or bitwise operator instead of thy TS union one:

const route = useRoute('' as 'products-product_id' | 'products-product_id-versions-version_id')

This would be a more realistic type that would allow you to write something like:

<MyComp v-if="'productId' in route.params'" :productId="route.params.productIt" />

[adamdehaven]

You’re right, the parent shouldn’t be aware; I probably over-simplified the example.

But using the TE union solves my issue. Perfect, and thanks 🎉