Vue.js + Nuxt.jsで作成したサイトの問い合わせページに埋め込んだ HubSpot フォームが表示されない問題が起きました。

HubSpot から発行されたコード：

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
  hbspt.forms.create({
	region: "xxx",
	portalId: "xxxxx",
	formId: "xxxxxxx"
});
</script>

表示されない書き方

Pugを使用したソース：

書き方1

<template lang="pug">
#contact
  h2 お問い合わせ
  #form
    script
      | hbspt.forms.create({
      |   region: "xxx",
      |   portalId: "xxxx",
      |   formId: "xxxxxxx"
      | });
</template>
<script>
export default {
  head () {
    return {
      script: [
        { src: '//js.hsforms.net/forms/shell.js' }
      ]
    }
  },
}
</script>

書き方2

<template lang="pug">
#contact
  h2 お問い合わせ
  #form
    script(src='//js.hsforms.net/forms/shell.js')
    script
      | hbspt.forms.create({
      |   region: "xxx",
      |   portalId: "xxxx",
      |   formId: "xxxxxxx"
      | });
</template>

埋め込んだ直後にはフォームは表示されましたが、ページを更新したりすると表示されなくなりました。
コンソール画面に、"ReferenceError: hbspt is not defined" エラーが表示されました。

原因

Nuxt.js において、フォーム生成スクリプトshell.jsがロードされる前に、shell.jsで定義されたメソッド hbspt.forms.create が先に呼び出されたことが原因でした。

修正方法

shell.jsをロードした後に hbspt.forms.create を呼び出すようにします。

修正後のソース：

<template lang="pug">
#contact
  h2 お問い合わせ
  #form(v-if="isLoaded")
    script
      | hbspt.forms.create({
      |   region: "xxx",
      |   portalId: "xxxx",
      |   formId: "xxxxxxx"
      | });
</template>

<script>
export default {
  data() {
    return {
      isLoaded: false
    };
  },
  head () {
    return {
      script: [
        {
          src: '//js.hsforms.net/forms/shell.js',
          callback: () => { this.isLoaded= true }
        }
      ]
    }
  },
}
</script>

参考になったサイト