Nuxt.js (generate)とNetlify Forms (recaptcha)の問題と一時的な解決案

概要

• Nuxt.jsのプロジェクトでNetlify Formsを利用して、簡単なForm画面とrecaptcha機能を試したときに、ハマった点をメモ docs.netlify.com

前提

• nuxt.js (v2.11.0)
• 「npx create-nuxt-app」で生成したプロジェクトをNetlify上にデプロイ
• NetlifyでGitHubのリポジトリと関連付けして、「npm run generate」するようにdeploy設定

ハマった点（その1）

問題点

• Nuxt.jsプロジェクトの「pages」ディレクトリにForm画面用のvueファイルを作成しNetlify上で確認したところ、Form画面は普通に表示できているように見えるが、Submitしても対象のAPIが用意されていなく、エラーとなってしまう。（Dev Toolsで確認すると、html要素は正しく出力されているように見える）
• ローカルで、「npm run generate」して生成されたdistディレクトリ内を確認すると、生成されたForm画面のhtmlには「netlify」属性のついた要素は出力されていなく、jsファイルの読み込みのみになっている。
• generateされた結果として「netlify」属性が出力されていないため、NetlifyとしてもForm用のAPIが作成されていないと思われる。

解決案

• Nuxt.jsの「pages」で追加していたForm画面のtemplate要素の記述を、「components」ディレクトリのvueファイルとして移動。
• 「pages」で追加していたForm画面では、上記で作成したコンポーネントを読み込むように改修
• 改めてローカルで「npm run generate」し、distディレクトリ内を確認すると、Form画面のhtmlには「netlify」属性が付与されている要素が出力されている
• Netlify上にデプロイして試しても、FormのSubmitが正しく動作することを確認。（Netlify上の管理画面でも送信されたパラメータが確認可能）

ハマった点（その2）

問題点

• 「その1」でForm送信が可能となったので、以下のコードを追加して強制的にrecaptcha機能を表示しようとしたが、うまく表示されない。
  <div data-netlify-recaptcha="true"></div>
• 初期表示画面からForm画面に遷移すると、Form要素は正しく表示されているが「recapthca」機能は表示されていなく。DevToolsで確認するとdivタグ自体は存在するものの、heightが0になって見えていない状態となっている。
• 試しにForm画面をリロードすると、「recaptcha」機能が見える状態でForm画面が表示される。（ページ遷移を挟むとうまく表示されない）
• ページ遷移を挟むことで、「recaptcha」に必要なjsファイルの読み込みや実行がされていなく、うまく機能していない。

解決案

• なんとかページ遷移がされたときに「recaptcha」のjsを動作するようにしたかったが、まだ解決案が見つからず。
• 一時的な回避案としては、「static」ディレクトリにForm画面のhtmlを用意して、そちらを利用。
• Nuxt.js内のページ遷移にするとうまくい表示できないので、Form画面を開くときにはブラウザの別タブで表示するような流れにしてあげることで、一応は表示させたいForm画面が見えるようになった。
• ここについては抜本的な解決案を検討していく必要がある。