F7-page with async component / fragments

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.

1 Like

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>

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/

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

1 Like

Awesome! That works. Thank you very much.

You can always use a <template> tag instead of a <div>. Those template-tags are not rendered by vue.

That’s true but sadly not as a root element in a component. Nor can multiple elements be used as root of a component and it looks like this is not going to change in the Vue core: https://github.com/vuejs/vue/issues/7088#issuecomment-357899727

Anyway, thanks for the hint. Luckily @nolimits4web’s solution worked for me in this particular case.

1 Like