It should be possible to have pages within pages. So, create a page with the tree in it, where there is also another page-container and router-view. Then build your “sub-pages” to be viewed in that page-container.

Scott

I have done battle with this issue with some success. @cmanique

In a nutshell I have avoided any styling within element attributes and worked toward a css files only solution.
Take a look at my css folder of the app I used to develop this approach
https://git.kebler.net/Light2/frontend/src/branch/master/src/css

Start by looking at https://git.kebler.net/Light2/frontend/src/branch/master/src/css/app.styl and follow the @imports to see how it’s all pulled together and in what order

For fonts sizes I have used rfs to do the overall font scaling https://github.com/twbs/rfs then used stylus variables with factors to relatively scale fonts in components. There is a post on this at this forum https://forum.quasar-framework.org/topic/3483/fluid-typography-solved/33

For brand colors I use palleton to get the four color set and then use variables to easily integrate them into to the overall theme. https://paletton.com/#uid=73j0c0kllllaFw0g0qFqFg0w0aF
Now when I change the that file of values https://git.kebler.net/Light2/frontend/src/branch/master/src/css/base-colors/brand.styl my site immediately has a brand color change. One can tweek those on a per component basis using stylus variables.

I have set up files each targeting a quasar essential component like field, list, item that can be then overridden in a cascade like way using stylus variables.

Here is an example of how a “component” style file for q-field. It has a list of customizable variables at the top (which may be themselves variables and usually are) followed by the selectors and style affected by those variables.
https://git.kebler.net/Light2/frontend/src/branch/master/src/css/components/quasar/field.styl

With just a couple main variable changes (base font size, brand color page) I can change my whole color and font look.

@cmanique I’d just take my css folder and incorporate that into what you are evaluating.
https://git.kebler.net/Light2/frontend/src/branch/master/src/css

As to a complex web app I think quasar is the answer. This app has a featherjs database backend, a nodejs app backend as well, and uses feather-vuex and my own reactive nested object store to react dynamically with the nodejs backend. I wrote a dynamic form component that one feeds in the collection schema and it generates the form. It’s designed to be the configuration and control interface to a system of 40+ switches and 40+ circuits with multiple process running on multiple machines. I couldn’t not have done it without quasar and vue especially since I am a one man show.

0bfde33f-d401-474d-b890-05f2f492e894-image.png

@metalsadman thanks a lot for the info! Cool that the docs app source code is available!