V2 (Vue) Split application into several components

Questions
1

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?

2

Add slot=“fixed” to your Header component

2 Likes
3

Thank you very much!