vue.js ver.3 で global component を複数書く場合、<～ />のような単独タグはNG

どうやら、 vue.js ver.3 でグローバルコンポーネントを複数書く場合、 <comport-a />のような単独タグでなく、 <comport-a></comport-a> のように閉じタグを必要とするみたい。

<head>
  <meta charset="UTF-8">
  <title>end0tknr's vue.js sample</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@3.2.31"></script>
</head>
<body>
  <h1 class="bg-secondary text-white display-4 px-3">Vue3</h1>
  <div id="app" class="container">
    <p>{{ message }}</p>
    <bye></bye>
    <hello></hello>
  </div>
  
  <script>
  const appdata = {
    data() {
      return {
        message : '※コンポーネントを表示する'
      }
    }
  }

  let app = Vue.createApp(appdata)

  app.component('hello', {
    template: '<p class="alert alert-primary">Hello!</p>'
  })
  app.component('bye', {
    template: '<p class="alert alert-primary">Bye!</p>'
  })

  app.mount('#app')
  </script>
</body>

end0tknr's kipple - web写経開発

太宰府天満宮の狛犬って、妙にカワイイ