I’m currently working on an application with F7 v2 and F7-Vue v2. The kitchen-sink helped a lot to get starting developing.
I want to separate some major parts of the app in reuseable components, like the header (Navbar, including the search). The header is the same of almost every page, so i created a Vue component for it.The component itself is working, but the layout is mixed up.
My home page has the following template:
<f7-page> <Header></Header> </f7-page>
The new component has the following markup:
<f7-navbar title="Home"> <f7-nav-right> <f7-link panel-open="right" icon-if-ios="f7:menu" icon-if-md="material:menu"></f7-link> </f7-nav-right> <f7-subnavbar :inner="false"> <f7-searchbar placeholder="Scan object" search-container=".search-list" search-in=".item-title" ></f7-searchbar> </f7-subnavbar> </f7-navbar>
It works when i put all the markup in the same component. What is causing this behaviour?