javascriptvue.jscomponentsvue-portal

Using code (function/template) in a Vue.js application from one component in another component with no direct relationship

I'm working on an app using Vue.js and I came across the following challenge:

The app has a pretty basic layout: a header, a main view and a navigation section at the bottom. Depending on the page the user is currently on I want to show a main action in the header. See the following wireframes:

App wireframe of view 1App wireframe of view 2

My question now is: is there a way to "inject" the template and code into the header? Because ideally I would like to have the logic and the appearance (like an icon with label) in the corresponding component and not in the header, because it isn't aware of the current view.

The header and the main view of the components have no parent/child relation. The basic Vue.js template looks like this:

<div class="app-content">
    <TheTopBar/>
    <main>
        <router-view></router-view>
    </main>
    <TheNavigationBar/>
</div>
Solution

  • I see two ways to do it...

    1. Add default slot into TheTopBar template at the place you wanna see your actions
    2. Remove TheTopBar component from your top-level component, place it inside your "main view" components templates (each of them) and define content of the slot there (actions)

    Other way could be using Vue router's Named Views but that would require you to create separate "actions" component for each corresponding "main view" component

    Edit

    Actually there is other way. portal-vue allows exactly what you want....