vue.js - How to pass a component to all components inside <router-views/>?

Question

This is my App.vue

<template>
  <div>
    <app-navbar></app-navbar>
    <router-view /> // contains the differents pages of the app
    <app-sign-up-modal></app-sign-up-modal>
    <app-player></app-player>
  </div>
</template>

Inside the router-view I have a Home.vue component which itself has a Header.vue component which has a full height and width background image. My problem is that because my <app-navbar></app-navbar> component has padding, the background image of Header.vue has some ugly black padding because in the DOM the navbar is outside the header, like that:

<div id="app">
  <nav class="navbar></navbar>
  <div class="home">
    <header class="home__header"></header>
  </div>
</div>

I want to be able to pass <app-navbar></app-navbar> to Header.vue while still being a global component, how can I do that?

question from:https://stackoverflow.com/questions/65830957/how-to-pass-a-component-to-all-components-inside-router-views

Answer 1

Waitting for answers