V2 (Vue) Split application into several components

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:


The new component has the following markup:

    <f7-navbar title="Home">
            <f7-link panel-open="right"  icon-if-ios="f7:menu" icon-if-md="material:menu"></f7-link>
        <f7-subnavbar :inner="false">
                    placeholder="Scan object"

It works when i put all the markup in the same component. What is causing this behaviour?

Add slot=“fixed” to your Header component


Thank you very much!