Hi,
Santiago Baudino
11

I would suggest to just have sub layouts. What I mean by that is, having a layout that wraps your content with another layout.

Let’s say you have three layouts:

A, B and C (which is a variant of A).

All of them are top level / main layouts.

Now, you could have some sub layouts that hold common markup and functionalities that main layouts could use inside them.

In fact, those sub layouts would just be regular components with a slot :)

The system remains exactly the same, with one difference, main layouts would use sub layouts when the need too. Sub layouts would never appear in the routes though because they always would be use by a main layout.

Make sure to decouple also general markup that can be used multiple times among layouts like: header, footer, eventually sidebars that could be shared between two layouts.

Here’s a gist:

Hope it helps.