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.18.0
主にバージョン4からのバックポートが行われました。 - 4.0.0
appディレクトリ構造に整理された他、高度なデータフェッチ、TypeScriptのサポート強化、CLIや開発環境がより快適に動作するようになるなど、安定性強化や開発者体験を強化する改善が多数行われました。 - 3.17.0
データ取得層の再構築が行われ、useAsyncDataやuseFetchにおいて大きな改善が達成された他、新しいビルトインコンポーネントの導入やワーニングの改善、パフォーマンスの改善などが行われました。 - 3.16.0
create-nuxtにより、新しいプロジェクトを素早くはじめることができるようになった他、UnheadやDevtoolsのアップグレード、デバッグの改善やパフォーマンスの改善など、様々な改善やバグ修正が行われました。 - 3.15.0
Vite 6が同梱されるようになった他、Chrome DevTools extensibility APIを活用したChronium系ブラウザ開発者ツールとの統合強化、callOnce導入など、多数の機能強化とパフォーマンス改善、バグ修正が行われました。 - 3.14.0
jiti v2により設定ファイルやモジュール、ビルドファイルの読み込みが高速化した他、sharedフォルダの導入やrspackの導入を筆頭に、多数の改善や機能追加が行われました。 - 3.13.0
Routeグループが導入され、URLに影響を与えずにファイル構造を整理しやすくなった他、Islands機能でhead部分にmetadataを操作できるようになったり、prefetchトリガーの追加が行われたりするなど、多数の改善が行われました。 - 3.12.0
オプション設定することで、次期メジャーバージョンのNuxt4での変更点をテストすることができるようになった他、Nuxt Scripts導入のための下準備や、パフォーマンス改善、バグ修正などが行われました。 - 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フォーム送信まで無料でお使いいただけます。クレジットカードの登録も不要。今すぐ気軽にはじめられます。
