Netlify + Nuxt.jsでNetlify Formsを使うときの備忘録

はじめに

Netlify、自分でサーバーをたてなくていいのでめちゃくちゃお手軽で便利なのですが、Nuxt.jsとNetlifyを組み合わせて使う際Netlify Formsが正常に動作しないことがあったので備忘録として記事にしておきます。

www.netlify.com

解決方法

次の2つの条件が揃っていると動作しました

1. nuxt.config.js の mode を universal にする

2. netlify formsを利用するformタグの中にhiddenタグで form-name の値を仕込む。次のような感じ。

<form name="contact" method="POST" data-netlify="true" action="/thanks">
    <input type="hidden" name="form-name" value="contact" />
</form>

参考サイト

tutorialmore.com