[Feature]: Layouts Overhaul

[thombruce]

Feature request

Possibly replaces #56

A lot of work recently has gone towards making app.vue a flex-based application layout for Toodles and other desktop applications. This comes at the cost of no longer meeting some expectations about how webpages ought to work.

I want to move the application layout logic out of app.vue into a new application layout.

This does mean that some things which were common to app.vue, like header and footer, can no longer live there and will also be migrated into layouts.

It also means that an empty.vue layout will become viable which may feature none of those common components.

It ultimately does just mean a lot more flexibility... even though we now need to remember to incorporate all required common components into all appropriate layouts.

---

Aside: Is it possible to nest one layout inside of another? E.g.

NuxtLayout(name="someLayout")
  NuxtLayout(name="someOtherLayout")

Why does this thought occur to me? It could be a useful way to give some of those common components a common home again.

Based on a little googling, I'm not sure it is possible to nest layouts like that (see https://stackoverflow.com/questions/51945545/nuxt-js-how-to-use-layout-inside-layout and https://constantsolutions.dk/2020/02/nested-layouts-in-nuxt-vue-js/).

What it is possible to do however is to create a custom component with a slot that ought to include everything else... 🤔

Said custom component could even, I believe, make use of NuxtLayout itself provided it were the only component per-page which did so (assuming that neither nesting nor sibling usage is permitted).

In other words, we could define components like...

• TntLayout
• TntApplication or TntApp
• TntBlog
• TntShop
• TntFormLayout

Large-scale "layout" components which would comprise the scaffolding for a page. Could be worth exploring.

Code of Conduct

• I agree to follow this project's Code of Conduct