Page nesting

[johannschopplich]

Page nesting

[TobeyEh]

Hey! I have only tested it locally in a very simple setup but it really seems to work! 🎉
Thanks again for your great starterkit support! I will keep you posted concerning the level nesting.

[johannschopplich]

You can add nested levels by yourself. Haven't tested, but the following steps should work.

1. Edit:

   kirby-vue3-starterkit/frontend/src/router/index.js

   Line 17 in fa9bc8c

   const routes = [

const routes = [
  ...site.children.map(page => ({
    path: `/${page.uri}`,
    component: () => import(`../views/${capitalize(page.template)}.vue`).catch(() => Default)
  })),
  ...site.grandchildren.map(page => ({
    path: `/${page.uri}`,
    component: () => import(`../views/${capitalize(page.template)}.vue`).catch(() => Default)
  })),
  ...site.grandchildren
    .filter(page => page.childTemplate)
    .map(page => ({
      path: `/${page.uri}/:id`,
      component: () => import(`../views/${capitalize(page.childTemplate)}.vue`).catch(() => Default)
    }))
]

2. Add grand children below children key:

   kirby-vue3-starterkit/site/config/spa-site.php

   Line 6 in fa9bc8c

   'children' => array_values(

'grandchildren' => array_values(
  site()
      ->grandChildren()
      ->published()
      ->map(fn($child) => [
          'uri' => $child->uri(),
          'title' => $child->title()->value(),
          'isListed' => $child->isListed(),
          'template' => $child->intendedTemplate()->name(),
          'childTemplate' => $child->hasChildren() ? $child->children()->first()->intendedTemplate()->name() : null
      ])
      ->data()
),

3. Have fun!

[johannschopplich]

@TobeyEh I'm curious. Did you succeed implementing nested pages?

[TobeyEh]

Hi, wow, thanks I will try it asap! The kirby panel structure has not been set up yet so I couldn't test is yet. Later this evening though. I just wanted to ask in advance if it's even possible, if not I would have just used the non-Vue starterkit.

[johannschopplich]

Cool! No rush. It's a good question. If I write dedicated docs one day, I'll put in in the FAQ section.

As I said, haven't tested locally myself, but it should work. Every route level has to be passed to the router, I've only included two levels as default – similar to the starterkit.