Not working with nested pages

[Monstermash28425R1]

"I'm having issues with the plugin when working with nested pages. For instance, at the top-level, the plugin works fine, and at the second level too. However, when configuring a third level (pages/auth/#/index.vue), the plugin stops working. Could it be because the URLs are generated as 'childrens'?"

• pages
  • index.vue //works
  • test
    • index.vue // works
  • auth
    • login
      • index.vue // doesnt work

[nigiwen]

May I ask if you have resolved it

[WayneBuckhanan]

I found that explicitly setting a layout for each layer of directory structure resolved my similar issues.

E.g. having a meta layout set for pages/auth/index.vue above would allow pages/auth/#/index.vue to have a non-default meta layout work properly in my projects.

[sunpm]

Yeah, I have that problem too.

[Ali-Rooholamini]

"I found the solution to this problem. I am using a combination of this and the (unplugin-vue-router) package.
you need to change the folder structure of the pages to look like this:

• pages
  • tickets
    • new
      • index.vue
    • index.vue
  • login.vue
  • [...path].vue
  • ...

"It means creating an index.vue file for each nested folder where you want to have its pages."

Next, you need to specify the layout of the pages in all layers, including layout: default:

pages/tickets/index.vue : (required)

<script setup>
definePage({
    meta: {
        layout: "default",
    },
});
</script>

then, inside pages/tickets/new/index.vue :

<script setup>
definePage({
    meta: {
        layout: "add",
    },
});
</script>