Если вы попытаетесь использовать форму netlify в nuxt3, вы можете столкнуться с некоторыми проблемами, даже если будете следовать инструкциям. Документы netilify содержат следующие инструкции:

Закодируйте HTML-форму на любой странице вашего сайта, добавьте data-netlify="true" или атрибут netlify к тегу <form>, и вы сможете начать получать материалы в панели администратора сайта Netlify.

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

Первое, что нам нужно сделать, это немного изменить нашу форму. Согласно netlify, поскольку мы находимся в nuxt, это форма, отображаемая javascript, поэтому нам нужно добавить сюда дополнительный ввод.

Для формы с визуализацией JavaScript вам нужно добавить скрытый ввод с name="form-name" к возвращаемым элементам формы.

<template>
  <form
    name="contact"
    method="POST"
    data-netlify="true"
    data-netlify-honeypot="bot-field"
    @submit="handleFormSubmit($event)"
  >
  
    <input type="hidden" name="form-name" value="contact" />

    <input style="visibility: hidden; display: none;" name="bot-field">

    <div class="form-item">
      <label for="name">Name</label>
      <input v-model="name"
        type="text"
        id="name"
        name="name"
      >
    </div>

    <div class="form-item">
      <label for="email">Email</label>
      <input v-model="email"
        type="text"
        id="email"
        name="email"
      >
    </div>

    <button type="submit">Submit</button>
  </form>
</template>

Как только вы это сделаете, это все равно не сработает. Вы должны зайти в свою административную панель netlify и найти настройки сайта › Сборка и развертывание › Настройки сборки › Редактировать настройки и в поле команды сборки вы должны использовать npm run generate вместо npm run build. Это позволит netlify обнаружить форму, и все будет готово.

Причина, по которой это происходит, заключается в том, что когда вы запускаете команду npm run generate, во время сборки создается html-файл для каждого маршрута в вашем приложении. Если есть какие-либо запросы на выборку, которые выполняются во время сборки, эти данные извлекаются и отображаются в html. Вот почему он называется статическим сайтом. Итак, поскольку данные были загружены во время сборки, и все запросы на выборку были обработаны тогда, почему страница становится пустой при обновлении?

Это происходит в конце netlify, всякий раз, когда вы обновляете, вы можете видеть, что он добавляет косую черту в конце URL-адреса и пытается снова получить содержимое. Но так как он статичен, это не работает. Вот почему вы должны снова зайти в свои настройки на netlify.

В настройках сайта необходимо перейти на вкладку сборка и развертывание слева. Продолжайте прокручивать вниз, пока не найдете постобработка. В разделе Оптимизация объектов вам нужно нажать изменить настройки. Нажмите переключатель с надписью Включить оптимизацию ресурсов, снимите все флажки и нажмите «Сохранить».

Если вам понравилась эта статья, пожалуйста, дайте мне знать в комментариях, о чем вы хотели бы услышать дальше. Я пишу статьи на cpectre.com, в том числе связанные с shopify и vue, а также разные советы по javascript.