F7-page with async component / fragments


#1

Hi, I’m close to completing my first Framwork7-Vue app and everything is working nicely.

Since the app is dynamically loading certain pages which all share the same NavBar and some common logic, my idea was to have a component that looks like this:

<f7-page>
  <f7-navbar>...</f7-navbar>
  <component :is="asyncComponent" />
</f7-page>

Now I would like to also add a f7-toolbar that is loaded and controlled by the dynamic component.

The problem is, that this toolbar would need to go to the same level as the component components itself. Since Vue only allows 1 root element per component and Fragment workarounds do not work, my questions is: Is there some kind of inner wrapper like f7-fragment or f7-page-body that I could use to wrap these elements?

Thanks for your time and help.


#2

You can try the following:

<f7-page :page-content="false">
  <f7-navbar>...</f7-navbar>
  <component :is="asyncComponent" />
</f7-page>

And component should return something like:

<div style="height: 100%">
  <f7-toolbar ...>...</f7-toolbar>
  <div class="page-content">
    ...
  </div>
</div>

#3

Almost there. It is good to know about the :page-content property. Thank you very much for that.

But the additional div is preventing the toolbar to be fixed and correctly positioned…

I made a fiddle to illustrate the problem: https://jsfiddle.net/perenzo/1s9p25t6/8/


#4

Few more styles and you are there https://jsfiddle.net/y6vxe3gk/


#5

Awesome! That works. Thank you very much.