Aide-memoire

Netlify Forms

Procedure rapide pour deployer un projet Vue/Vite sur Netlify avec un formulaire fonctionnel.

ViteRouterFormDeploy
1

Creer le projet

npm create vite@latest mon-projet -- --template vue
cd mon-projet
npm install
2

Configurer le router

npm install vue-router

Utiliser createWebHistory() pour des URLs propres.

3

Formulaire Netlify

<form name="contact" method="POST" data-netlify="true">
  <input type="hidden" name="form-name" value="contact" />
  <input type="text" name="nom" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Envoyer</button>
</form>
4

Redirections SPA

Creer public/_redirects :

/* /index.html 200
toml

Alternative netlify.toml

[build]
  publish = "dist"
  command = "npm run build"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
go

Deploy

  • Pousser le repo sur GitHub.
  • Lier le repo dans Netlify.
  • Build command : npm run build.
  • Publish directory : dist.
!

Points d'attention

  • Chaque champ doit avoir un name.
  • Le champ cache form-name doit correspondre au nom du formulaire.
  • Prevoir _redirects ou netlify.toml pour eviter les 404.
  • Tester le formulaire apres le premier deploy.