vue.js や react を使用したとき、formrun のバリデーションが機能しない

オリジナルデザインのformを作るときに利用するサービスに formrun というサービスがありますが、
React や Vue.js を使うと、ビルドをすれば動くが、npm start した local 実行の時や、ページ遷移後に、form の validation が動かない問題があります。

動かない原因は、form の dom が存在するタイミングで、formrunの初期化処理が実行されなければいけないようです。

formrun に問い合わせたところ、初期化処理を実行するメソッドがあるようです。

// .formrun の部分は、formのclassを指定する
Formrun.init('.formrun')

つまり、`nuxt generate` (SSG) されたサイトで、ページ遷移時を直す場合は、React ならこう書きます。

  // ...
  useEffect(()=>{
    // ページ遷移時はこちらで解決する
    window.Formrun?.init('.formrun')
  }, [])
  // ...

  return (
    <>
      <Helmet>
        <script src="https://sdk.form.run/js/v2/formrun.js"></script>
      </Helmet>
      { // .... }
    </>)


また、ローカル開発時や、SPAの時は、スクリプトのロード後に再度初期化をする必要がありました。SSGの場合もこちらで動きます。

import Script from 'react-load-script' // 動的な script の読み込みを楽にする npm
// ...

  const onLoadFormrun = useCallback(() => {
    window.Formrun?.init('.formrun')
  }, [])

  // ...

  return (
    <>
      <Script onLoad={onLoadFormrun} url="https://sdk.form.run/js/v2/formrun.js"></Script>
      { // ... }
    </>)