default layout not processed when using sub folder without a layout

[cirolosapio]

although a default layout is set when using a sub folder if a layout is not specified in the route tag the default layout is not processed

stackblitz

[JohnCampionJr]

I see it. You can work around by putting a file sub.vue in the /src with an empty template.

Have to figure out best way to fix it. Feel free to submit PR if you have an idea

[cirolosapio]

i have other routes under the sub folder and the issue persist with all of them

i've run in this issue with the version 0.9.0

[markthree]

although a default layout is set when using a sub folder if a layout is not specified in the route tag the default layout is not processed

stackblitz

@cirolosapio hello, If your application is not particularly complex, you can try using ClientSideLayout, which internally handles this issue

this is example 👉 stackblitz

[hihanley]

I see it. You can work around by putting a file sub.vue in the /src with an empty template.

Have to figure out best way to fix it. Feel free to submit PR if you have an idea

@JohnCampionJr
How about this way?
I have same problem, and it is worked for me.

export function setupLayouts(routes) {
  function deepSetupLayout(routes, parentLayout = undefined) {
    return routes.map((route) => {
      // Setup children's layout.
      route.children = deepSetupLayout(route.children ?? [], route.component)

      if (!route.component && route.children.length > 0) {
        // If the route does not have a layout component and contains children, do not setup layout for the route.
        return route
      }
      else {
        // If a layout is specified, use the specified layout.
        // Otherwise, check if the parent layout exists.
        // If the parent layout does not exist, setup default layout.
        return {
          path: route.path,
          component: layouts[route.meta?.layout] || (parentLayout ? undefined : layouts.default),
          children: [{ ...route, path: '' }],
          meta: {
            isLayout: true,
          },
        }
      }
    })
  }

  return deepSetupLayout(routes)
}

[glennmichael123]

@cirolosapio I have run into this exact issue as well, any routes that are under a folder don't have default layouts in them. The bandaid fix I did was to add this block of code to every vue file I have.

<route lang="yaml">
meta:
  layout: default
</route>

This now fixes the issue but obviously, this isn't ideal and it would be tedious.

[cirolosapio]

@cirolosapio hello, If your application is not particularly complex, you can try using ClientSideLayout, which internally handles this issue

this is example 👉 stackblitz

@markthree I saw the new ClientSideLayout but before using it I want to understand what the "limitations" are

@cirolosapio I have run into this exact issue as well, any routes that are under a folder don't have default layouts in them. The bandaid fix I did was to add this block of code to every vue file I have.

<route lang="yaml">
meta:
  layout: default
</route>

This now fixes the issue but obviously, this isn't ideal and it would be tedious.

@glennmichael123 yes i'm using this workaround atm
the default layout is not processed unless specified

[markthree]

@markthree I saw the new ClientSideLayout but before using it I want to understand what the "limitations" are

@cirolosapio It only supports three options, importMode, defaultLayout, layoutDir, but defaultLayout supports more options，And all options only support simple strings, not arrays or global strings or function，But defaultLayout supports