[HubSpot CMS] ビルドステップなしでVue3を使うには

やりたいこと

• Hubspot CMSのカスタムモジュール内でVue3を利用する
• Vue.jsはCDNから呼び出して使う

想定対象者

• 今までWebサイトで使っていたVue.jsのテンプレート部分をHubspotでも使いたい方
• ガッツリHubspotのテンプレートを開発環境から組まないライトユーザー（デザインマネージャで事足りる方）

どうやったか

1. モジュールにCDNからVue.jsを読み込む

カスタムモジュール内のみでVue.jsを利用するため、module.htmlにCDNでVue.jsを読み込みます。
Hubspotで用意されているrequire_js関数を使います。

module.html

{{ require_js("https://unpkg.com/vue@3/dist/vue.global.prod.js", "footer") }}

2. モジュールのHubL内でVue部分をRawタグで囲む

開発者ドキュメントにもそのように書いてあるんですが、Rawタグについて詳細な記法の記載がないのですが、いろいろ試してみたところ、このような記法になるようです。

module.html

{% raw %}
  <div id="app">
    {{ message }}
  </div>
{% endraw %}

このように書くことでrawタグに挟まれたコード{{ message }}の部分はちゃんとVue.jsのマスタッシュ構文として認識されるようになります。

3. module.jsにVue.jsのコードを書く

あとは、モジュールに表示したいコードをmodule.jsに記載します。この時、DOMの読み込み完了した後で実行されるよう、document.addEventListenerでコードを囲んでコーディングします。

module.js

document.addEventListener("DOMContentLoaded", (event) => {
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')

終わりに

Hubspot移行で簡単に以前Vueで作ったコードを利用したい際の覚書でした。
大体は開発者ドキュメントを見ればなんとかなるようにはなっていますが、たまにハマることがあるので誰かのお役に立てばいいなと思っています。