経緯

webページの中の1ページだけVue.jsで書きたい
cdnのvueを使ってhtmlにインラインでvueを書くことにする
1ページなんだけどコード量はまあまあ多くなりそうなので、パーツをコンポーネント化して別ファイルに書きたい

→やり方がわからなかったので実験した

環境

Mac OS BigSur v11.4
Vue.js 2系
php 7.3.24(テンプレートエンジンとして使用)

作るもの

vueの公式にあるカウンターボタンを子コンポーネントとして別ファイルで作る
https://jp.vuejs.org/v2/guide/components.html

やり方①jsファイルに書く

子jsファイルでvueコンポーネントを定義し、templateのDOMは文字列(下記counterButton.jsのtemplate)に実装する。
親htmlから子jsファイルをscriptタグで読み込む

counterButton.js

const template = `
<div>
  <button v-on:click="count++">You clicked me {{ count }} times.</button>
</div>
`;

Vue.component('counter-button', {
  template,
  data: function () {
    return {
      count: 0,
    };
  },
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>vue-cdn</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="./js/counterButton.js"></script>
  </head>

  <body>
    <div id="app">
      <counter-button></counter-button>
    </div>

    <script>
      new Vue({
        el: '#app',
      });
    </script>
  </body>
</html>

メリット

jsファイルなのでvueのコードは書きやすい(自動フォーマットとか設定してればちゃんと動く)

デメリット

DOMは文字列で書く必要があるため、可読性が低い
バッククオートで囲めば改行もできるが、ハイライトとかされないのでやっぱり可読性は低い

やり方②テンプレートエンジンのhtmlに書く

今回はテンプレートエンジンとしてphpを使用(macでデフォルトのphpがサクッと使えたので)
子phpファイルにて、コンポーネントをscriptタグ内で定義し、templateのDOMはx-templateを使用して実装する。
親phpから子phpファイルをincludeする

counter-button.php

<script type="text/x-template" id="counterButton">
  <div>
    <button v-on:click="count++">You clicked me {{ count }} times.</button>
  </div>
</script>
<script>
  Vue.component('counter-button', {
    template: '#counterButton',
    data: function () {
      return {
        count: 0,
      };
    },
  });
</script>

index.php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>vue-inline</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <span>{{ message }}</span>
      <counter-button></counter-button>
    </div>

    <?php include('./components/counterButton.php'); ?>
    <script>
      new Vue({
        el: '#app',
      });
    </script>

  </body>
</html>

メリット

DOMもvueもscriptタグ内に書くので、わりと綺麗に書ける(自動フォーマットとかハイライトとか設定してればちゃんと動く)

デメリット

最終的にブラウザにレンダリングされるDOMが、body内にscriptタグが乱立してたりしてちょっと見苦しい(動作に問題はない。たぶん。)

個人的には

②のテンプレートエンジンで外部化する方がいいと思う。
①のように文字列でDOMを書くのはかなりきつい。
もうちょっと複雑なhtml属性やらvueの制御を書くことになった時にしんどくなると思う。

②は単一ファイルコンポーネントで書くときとほぼ同じ感じで書けるので、個人的には抵抗なく実装が進められそう。
今回はたまたまphpでやってるが、Thymeleafとかその他テンプレートエンジンでもincludeさえできれば問題なく動くはず。

参考にさせていただきました