router-link-active Nuxt 3 / VueJS on nested routes not applying to parent

Question

I have created a simple reproduction to better explain myself. I have:

-| pages/
---| test/
------| index.vue
------| nested.vue

And I have a navbar, having read the documentation I assume if I NuxtLink to /test or /test/nested.vue then I would have router-link-active css class applied to both in the navbar but it doesn't seem to do that.

The docs seem to suggest you should be laying out your content as:

-| pages/
---| parent/
------| child.vue
---| parent.vue

I tried that and just doesn't work - the child is never rendered (unless I add another <NuxtPage> to parent.vue which is not what I want since that would show content of parent and child.

Reproduction here: https://stackblitz.com/edit/nuxt-app-config-t3nvjv?file=app.vue

Help would be much appreciated appreciated.

Answer 1

I faced exactly the same issue and finally understood how to use NuxtPage!

You must follow the following structure:

/pages
  /posts
    [postId].vue
    index.vue
  posts.vue

In your /posts/index.vue:

<template>
  <h1>All posts page</h1>
  <p>Whatever...</p>
</template>

In your /posts/[postId].vue:

<template>
  <h1>Single post page</h1>
  <p>{{ postId }}</p>
</template>

And finally, in your posts.vue:

<template>
  <NuxtPage />
</template>

Both your index.vue and [postId].vue content will be rendered separately and your NuxtLinks router-link-active and router-link-exact-active classes will work :)