Nuxtにフォームを追加/設置/設定する方法
What is Nuxt?
Nuxtとは
Nuxtは、Reactと双璧をなすVueをベースとしたフレームワークです。Nuxt.jsと呼ばれることもあります。ゼロコンフィグレーションですぐに開発をスタートできたり、ルーティング、静的ページとサーバーサイドレンダリングの切り替えなど、モダンな機能も揃えており、静的サイトにとどまらない使い方ができます。静的サイトジェネレーター（SSG）として、またはシングルページアプリケーション（SPA）の開発にも利用できます。
最初のリリースは2016年なので、比較的新し目のフレームワークです。2018年には最初の安定版であるv1.0がリリースされました。名前の似たNext（Next.js）から影響を受けており、Vue使いならNuxt、React使いならNextといった棲み分けになりつつあるようです。Vue自体の開発も活発で、どんどんと新しいバージョンがリリースされています。それにあわせてNuxtもアップデートされることも多く、まだまだ積極的な開発や機能追加が行われるでしょう。
Nuxt向けのモジュールもどんどんと増えており、Nuxtの機能を拡張したり、外部のサービスと連携したりするのがよい容易になる環境が整ってきています。Vueの人気に後押しされるかたちで、Nuxtもそのシェアを確実に拡大している印象です。
Nuxt公式サイトは以下をご参照ください。
» Nuxt公式サイト
Nuxtの主なリリース
- 3.11.0
console.logに表示される内容がよりリクエストを反映したものに改善された他、usePreviewModeの導入やrouteRulesによるミドルウェアの指定機能の追加、フェッチ系メソッドへのclear機能の追加などの改善が行われました。 - 3.10.0
SSRセーフなユニークIDを生成する機能や、router.optionsのためのフックの追加など、様々な改善が行われました。 - 3.9.0
Vite 5, Vue 3.4への対応やInteractive Server Componentsの導入などの改善が行われました。 - 3.8.0
Nuxt CLIの改善、Nuxt DevTools v1.0.0のリリース、<NuxtImg>や<NuxtPicture>の導入、ScopeやContextの改善、import書式の変更などが行われました。 - 3.7.4
islandsTransformの正規表現修正など、バグ修正やドキュメントの改善などが行われました。 - 3.7.3
プラグインの読み込み順について、元々の設定順が維持されるようにする修正などが行われました。 - 3.7.2
定期パッチリリースとして、joinURLが外部リソースでうまく動作しない問題などの修正が行われました。 - 3.7.1
head domが二重にレンダリングされるのを防いだり、デフォルトバンドルの容量作戦などの改善や修正が行われました。 - 3.7.0
nuxiのリファクターや、HTMLレンダリングの最適化等が行われました。 - 3.6.5
v3.6.4で導入されたnuxt/contentへの修正が行われました。 - 3.6.4
v3.7リリースに向けて、重要なバグ修正等が行われました。 - 3.6.3
モジュールの互換性等、様々なバグ修正が行われました。 - 3.6.2
layouts/pages内階層でのデータ取得への修正等、パフォーマンス改善やバグ修正が行われました。
Nuxt x SSGform
Nuxtにフォームを追加する方法
Nuxtを使うようなプロジェクトではそもそもフォームも一式一緒に作ってしまうことも多いかもしれませんが、とりあえずのフォーム構築といった用途であまり時間をかけたくない場合には、外部のフォームサービスの利用も有力なオプションになります。
Nuxtで作られたサイトにSSGformを利用してフォームを設置するのは非常に簡単です。以下の手順に沿って進めてみてください。
1. SSGformアカウントを作成する
メールアドレスだけで登録できます。登録後、メールアドレス確認が完了すれば準備完了です。
2. SSGformマイページで、フォームを作成する
好きな名前をつけてフォームを管理することができます。ここでは例えば「Nuxtサンプルお問い合わせフォーム」と設定することにします。フォーム作成と同時に専用のURLが発行されますので、それをコピーします。
3. Nuxt側にフォームのhtmlを記述する
<form からはじまる、formをhtmlで記述してください。どういった項目をフォームに用意するか、また、どういったclass指定やcssで装飾を施すかは自由です。シンプルなフォームの場合、以下のようなhtmlが含まれたページを作成することになると思います。（※URLはサンプルなので、このままコピペしても動きません）
<form action="https://ssgform.com/s/NuXtFoRm" method="post">
<input type="text" name="お名前" required="required" />
<input type="email" name="メールアドレス" required="required" />
<textarea name="お問い合わせ内容" required="required"></textarea>
<button type="submit">送信する</button>
</form>
4. テスト送信して、完了です
あとはNuxtのローカル開発環境から、またはデプロイした先でテスト送信をして、問題なく通知メールが届けば完了です。シンプルな設置以外にも、reCAPTCHAを追加したり、ファイル送信フィールドも追加できますので、詳しくはコード例のサンプルをご覧ください。
「Nuxtを採用したいけど、フォームがなぁ」と悩まれていたのであれば、SSGformを活用して、快適なNuxtライフを送ってください！
Get Started
まずはフリープランでスタート
フリープランでも機能制限は無し。フォームURL数無制限、月間100フォーム送信まで無料でお使いいただけます。クレジットカードの登録も不要。今すぐ気軽にはじめられます。
