NuxtLink active-classes are not applied on parents of non-nested pages

Environment

---

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.3
• Package Manager: npm@7.17.0
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/github-27bwem-nojgd6?file=pages/blog/index.vue

Describe the bug

Had a small back and forth with duboiss @ https://github.com/nuxt/framework/discussions/2086#discussioncomment-2793732

The active-classes are not always applied.

if your pages folder structure is /blog/index.vue && /blog/[slug].vue the active class is broken because ‘index’ is not the ‘slugs’ parent (i think)

if your structure is blog.vue(with NuxtPage) && blog/index.vue && blog/[slug].vue the active classes works

And im not sure if this is intended behavior or not. @duboiss said this used to work in v2 and that triggered me to create this bug-report just in case.

The folder structure is well /blog/index.vue & /blog/[slug].vue. On Nuxt 2 it was /blog/index.vue & /blog/_slug.vue.

current “workaround” is an adding a parent page with

<template>
  <div>
    <NuxtPage />
  </div>
</template>

which seems a bit much

[danielroe]

You can follow https://github.com/nuxt/framework/pull/4249.

[vanling]

Also tried a third way @duboiss no <nuxt-page/> or extra page required.

/pages/blog.vue
/pages/blog/[slug].vue

{
    name: "blog-3",
    path: "/blog-3",
    file: "/home/projects/github-27bwem-nojgd6/pages/blog-3.vue",
    children: [
      {
        name: "blog-3-slug",
        path: ":slug",
        file: "/home/projects/github-27bwem-nojgd6/pages/blog-3/[slug].vue",
        children: [],
      }
    ],
  },

@danielroe if above would be the intended way of doing a page structure like this, this “bug” changes into an DX improvement. So we could group pages into the folder and have the same behavior.

Example:

pages/blog.vue
pages/blog/[slug].vue

and

pages/blog/index.vue
pages/blog/[slug].vue

Would result in the same routing structure.