Ok this is helpful, thanks. I hadn't thought of the beforeEnter callbacks. I had been using mounted/created for that in each component, but if I understand it correctly, I like the abstraction. Now I am wondering why we can't just keep reusing the layout stuff in App.vue and do the nesting with your empty parent solution described in your article. I haven't used slots much so that is something I need to learn. So far props have sufficed for me.
I would keep the App.vue and the EmptyRouterViewComponent just empty with the <router-view/>. This way the pages can control the whole appearance (through the layouts). I would let the pages do this (and not the App.vue). Imagine you would hard-code the nav and a side menu into the App.vue and now you want a Login page not to have a side menu. This may be pretty difficult to override that way. When the pages control the layout, this is way more dynamic and adaptable.
You can also take a look at this project, which uses the approach I outline in the comment above, to understand how this would work on a more complex application than the example: github.com/BerniWittmann/cape-fron...
In general slots are a very handy tool, so i would recommand taking a more in-depth look (e.g. named slots). Especially components can profit from slots. For example, a card component that renders some content is more versatile with a slot instead of props for the content.
Ok this is helpful, thanks. I hadn't thought of the beforeEnter callbacks. I had been using mounted/created for that in each component, but if I understand it correctly, I like the abstraction. Now I am wondering why we can't just keep reusing the layout stuff in App.vue and do the nesting with your empty parent solution described in your article. I haven't used slots much so that is something I need to learn. So far props have sufficed for me.
I would keep the
App.vueand theEmptyRouterViewComponentjust empty with the<router-view/>. This way the pages can control the whole appearance (through the layouts). I would let the pages do this (and not theApp.vue). Imagine you would hard-code the nav and a side menu into theApp.vueand now you want a Login page not to have a side menu. This may be pretty difficult to override that way. When the pages control the layout, this is way more dynamic and adaptable.You can also take a look at this project, which uses the approach I outline in the comment above, to understand how this would work on a more complex application than the example: github.com/BerniWittmann/cape-fron...
In general slots are a very handy tool, so i would recommand taking a more in-depth look (e.g. named slots). Especially components can profit from slots. For example, a card component that renders some content is more versatile with a slot instead of props for the content.
Ok. I'm converted. I am going to check out slots.
Thanks again.