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を使うようなプロジェクトではそもそもフォームも一式一緒に作ってしまうことも多いかもしれませんが、とりあえずのフォーム構築といった用途であまり時間をかけたくない場合には、外部のフォームサービスの利用も有力なオプションになります。
Nuxtで作られたサイトにSSGformを利用してフォームを設置するのは非常に簡単です。以下の手順に沿って進めてみてください。
メールアドレスだけで登録できます。登録後、メールアドレス確認が完了すれば準備完了です。
好きな名前をつけてフォームを管理することができます。ここでは例えば「Nuxtサンプルお問い合わせフォーム」と設定することにします。フォーム作成と同時に専用のURLが発行されますので、それをコピーします。
<form からはじまる、formをhtmlで記述してください。どういった項目をフォームに用意するか、また、どういったclass指定やcssで装飾を施すかは自由です。シンプルなフォームの場合、以下のようなhtmlが含まれたページを作成することになると思います。(※URLはサンプルなので、このままコピペしても動きません)
あとはNuxtのローカル開発環境から、またはデプロイした先でテスト送信をして、問題なく通知メールが届けば完了です。シンプルな設置以外にも、reCAPTCHAを追加したり、ファイル送信フィールドも追加できますので、詳しくはコード例のサンプルをご覧ください。
「Nuxtを採用したいけど、フォームがなぁ」と悩まれていたのであれば、SSGformを活用して、快適なNuxtライフを送ってください!