Vue elements not being displayed

Question

I am trying to create Vue elements using template elements in the body of the HTML. It was working pretty well until I tried to use two of them together.

<template id="root-template">
  <div>
    <app-navbar targetId="#app-sidenav" />
    <app-header />
  </div>
</template>

For some reason, commenting out app-navbar causes app-header to be displayed, however if app-navbar is displayed, app-header is not being displayed at all! This one has completely stumped me.

const Navbar = Vue.component("app-navbar", {
  name: "app-navbar",
  template: "#navbar-template",
  props: {
    targetId: {
      type: String,
      default: "#app-sidenav"
    }
  },
  mounted() {
    this.sidenav = M.Sidenav.init(document.querySelector(this.targetId));
  },
});

const Header = Vue.component("app-header", {
  name: "app-header",
  template: "#header-template"
});

const AppRoot = Vue.component("app-root", {
  template: "#root-template",
  components: {
    Navbar,
    Header
  },
});

const store = new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {}
});

const app = new Vue({
  el: "#app",
  store,
  render: h => h(AppRoot)
});

<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&type=.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<ul class="sidenav" id="app-sidenav">
  <li><a href="#">Sass</a></li>
  <li><a href="#">Components</a></li>
  <li><a href="#">Javascript</a></li>
  <li><a href="#">Mobile</a></li>
</ul>
<div id="app" />
<template id="navbar-template">
  <nav>
    <div class="nav-wrapper container">
      <a href="#!" class="brand-logo">Logo</a>
      <a href="#" data-target="app-sidenav" class="sidenav-trigger">
        <i class="material-icons">menu</i>
      </a>
      <ul class="right hide-on-med-and-down">
        <li><a href="#">Sass</a></li>
        <li><a href="#">Components</a></li>
        <li><a href="#">Javascript</a></li>
        <li><a href="#">Mobile</a></li>
      </ul>
    </div>
  </nav>
</template>
<template id="header-template">
  <div class="section no-pad-bot" id="index-banner">
    <div class="container">
      <br /><br />
      <h1 class="header center orange-text">Todos</h1>
      <div class="row center">
        <h5 class="header col s12 light">
          A modern responsive front-end framework based on Material Design
        </h5>
      </div>
      <div class="row center">
        <a href="http://materializecss.com/getting-started.html" id="download-button"
          class="btn-large waves-effect waves-light orange">Get Started</a>
      </div>
      <br /><br />
    </div>
  </div>
</template>
<template id="root-template">
  <div>
    <app-navbar target-id="#app-sidenav" />
    <app-header />
  </div>
</template>

I've also turned this into a Pen. Can anyone tell me why this is happening?

Answer 1

Don't use self-closing tags in regular HTML files.

If you change these lines of HTML:

<app-navbar target-id="#app-sidenav" />
<app-header />

to these:

<app-navbar target-id="#app-sidenav"></app-navbar>
<app-header></app-header>

it will work.