Недавно я потратил некоторое время на изучение тонкостей Nuxt, и как только вы освоите его, разработка с Vue станет очень приятным и обогащающим опытом. Nuxt абстрагирует дистрибутив клиент / сервер и настраивает для вас очень быстрый рабочий процесс, больше не нужно беспокоиться о маршрутизации и т. Д.

Как и при изучении любой новой структуры, вы столкнетесь с препятствиями, я столкнулся с одним при попытке настроить раздел контактов с помощью Netlify Forms.

PS. Прежде чем продолжить, убедитесь, что вы настроили HTTPS на своем сайте, мы не хотим отправлять данные через незашифрованное соединение.

Создание формы

Первое, что вам нужно сделать при настройке форм, - это создать html в вашем представлении:

<form 
  name="contactus" 
  action="/thanks" 
  method="post" 
  netlify
  netlify-honeypot="bot-field"
>
  // Hidden input to check for bots
  <input type="hidden" name="form-name" value="contactus" />
  <div>  
    <label for="name">Name:</label> 
    <input type="text" name="name" required/>
  </div>
  <div>
    <input type="email" name="email" required/>
    <label for="email">Email:</label>
  </div>
  <div>
    <textarea name="message" required></textarea>
    <label for="message">Message:</label>
  </div>
  <button type="submit" value="Send message">Send</button>
</form>

Здесь есть несколько моментов, на которые следует обратить внимание:

  • Атрибут action. Когда форма будет отправлена, Netlify перенаправит вас по маршруту, который вы укажете здесь. В нашем примере мы создали страницу с именем thanks в нашей папке pages.
  • Атрибут netlify используется для указания Netlify обрабатывать форму.
  • data-netlify-honeypot=”bot-field” используется в сочетании со скрытым полем с именем, которое соответствует значению атрибута для проверки ботов. Он скрыт, поэтому его может заполнить только бот.
  • Скрытое поле ввода с name=”form-name” и значением, установленным для имени вашей формы, в данном случае value=”contactus”, поскольку это имя мы даем форме в строке 2. Это используется Netlify для проверки ботов. .
  • Убедитесь, что у всех входов есть допустимые имена, чтобы позже мы могли правильно подключить их к бэкэнду.

Готово!… Или мы?

Большинство других текстов, которые я нашел, исследуя это, на этом заканчиваются. Но мы используем Nuxt и, следовательно, также Vue.

По умолчанию Vue отображает клиентскую часть, но боты постобработки Netlify ожидают развертывания HTML на сайте. Любые netlify теги атрибутов формы, включенные в приложение Vue, будут вставлены только в клиентскую часть DOM, а не в HTML, и тем самым могут быть полностью проигнорированы роботами сборки.

Именно это и происходит на нашей странице Nuxt. Форма не будет отправлена, потому что боты сборки Netlifys не обращают на нее внимания. Чтобы этого не произошло, нам нужно как-то добавить скелет нашей формы на страницу. Nuxt использует app.template.html файл внутри /nuxt/views для рендеринга своего шаблона страницы, куда он вставляет свою виртуальную DOM. Но если вы добавите сюда свой скелет, вы заметите, что всякий раз, когда вы перекомпилируете свое приложение, только что добавленный скелет будет удален, так что это запрещено.

Что мы собираемся сделать, так это сказать Nuxt использовать наш собственный шаблон, мы делаем это, создавая файл с именем app.html в корне нашего приложения. Внутри этого файла вы хотите скопировать шаблон из папки /nuxt/views и вставить его в эту новую папку. И добавьте свой скелет формы вверху страницы. Тогда ваш app.html файл может выглядеть примерно так:

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
  <form name="contactus" netlify netlify-honeypot="bot-field" hidden>
    <input type="text" name="name" />
    <input type="radio" name="email" />
    <textarea name="message"></textarea>
  </form>
  {{ APP }}
</body>
</html>

Обратите внимание, что форма и входные данные имеют то же имя, что и наша настоящая форма. Он также имеет атрибуты netlify и netlify-honeypot.

Теперь, когда мы запускаем наш сайт в производство, у нас должна быть рабочая форма!

Хорошая работа! 🎉