• React
• Next.js
• Vue
• Nuxt
• Svelte
• Astro
• Remix
• Angular
• Solid
• Vite
• JavaScript

Les logos et les noms appartiennent à leurs propriétaires. Leur présence indique seulement que Formerie fonctionne avec ces technologies et ne suppose aucun partenariat ni soutien.

Points d’entrée par framework

Formerie offre un seul contrat d’API et plusieurs points d’entrée d’intégration. Utilisez l’adaptateur d’interface pour l’état des composants, et @formerie/client lorsque le traitement de votre formulaire s’exécute dans un composant de navigateur, une route serveur, une action ou un point de terminaison.

Choisir un point d’entrée

Gestionnaires de paquets

Utilisez le gestionnaire de paquets que votre projet utilise déjà.

npm install @formerie/client

pnpm add @formerie/client

yarn add @formerie/client

bun add @formerie/client

Les adaptateurs de framework suivent le même principe. Cet exemple utilise React; remplacez le nom du paquet par celui de l’adaptateur ou du méta-framework de votre projet.

npm install @formerie/react

pnpm add @formerie/react

yarn add @formerie/react

bun add @formerie/react

Dans les objets cibles du SDK, utilisez workspace pour l’identifiant de l’espace de travail Formerie.

Next.js

Utilisez @formerie/next dans les composants client et les Server Actions. Le paquet réexporte les hooks React et ajoute des fonctions utilitaires pour les formulaires App Router qui passent d’abord par votre application Next.js.

import { createFormerieNextAction } from "@formerie/next";

const submitContact = createFormerieNextAction({
  workspace: "example.com",
  form: "contact"
});

export function ContactForm() {
  return (
    <form action={submitContact}>
      <input name="email" type="email" />
      <textarea name="message" />
      <button>Send</button>
    </form>
  );
}

Nuxt

Utilisez @formerie/vue dans les composants Vue. Utilisez @formerie/nuxt dans les routes serveur Nuxt lorsque la soumission doit passer par votre application.

import { readFormData } from "h3";
import { createFormerieNuxtSubmitHandler } from "@formerie/nuxt";

export default defineEventHandler(
  createFormerieNuxtSubmitHandler(
    {
      workspace: "example.com",
      form: "contact"
    },
    {
      readFormData
    }
  )
);

Remix

Utilisez @formerie/remix dans les modules de route Remix lorsqu’une action doit soumettre les données du formulaire à Formerie et retourner une réponse JSON normalisée. Le paquet réexporte aussi les hooks React pour les composants de route.

import { createFormerieRemixAction } from "@formerie/remix";

export const action = createFormerieRemixAction({
  workspace: "example.com",
  form: "contact"
});

Qwik

Pour l’instant, utilisez @formerie/client dans les actions Qwik City. Un paquet @formerie/qwik dédié pourrait arriver plus tard si des fonctions utilitaires d’action répétitives se dégagent.

import { component$ } from "@builder.io/qwik";
import { Form, routeAction$ } from "@builder.io/qwik-city";
import { FormerieRuntimeClient } from "@formerie/client";

export const useContact = routeAction$(async (data) => {
  const formerie = new FormerieRuntimeClient();

  return formerie.submit("example.com", "contact", {
    fields: {
      email: String(data.email ?? ""),
      message: String(data.message ?? "")
    }
  });
});

export default component$(() => {
  const contact = useContact();

  return (
    <Form action={contact}>
      <input name="email" type="email" />
      <textarea name="message" />
      <button type="submit">Send</button>
    </Form>
  );
});

Astro

Utilisez @formerie/astro pour générer les attributs Formerie de vos formulaires Astro. Utilisez @formerie/client ou un adaptateur de framework dans les îlots qui soumettent par programmation.

---
import { createFormerieFormAttributes } from "@formerie/astro";

const attrs = createFormerieFormAttributes({
  workspace: "example.com",
  form: "contact"
});
---

<form {...attrs}>
  <input name="email" type="email" />
</form>

Quand ajouter un paquet dédié

Ajoutez un paquet dédié à un framework seulement s’il élimine un vrai travail répétitif :

• fonctions utilitaires d’état propres au framework
• configuration automatique de l’environnement d’exécution
• enveloppes d’actions serveur ou d’actions de route qui normalisent les réponses de Formerie
• génération native d’attributs de formulaire
• intégration aux conventions de validation ou d’affichage des erreurs du framework

D’ici là, privilégiez @formerie/client accompagné d’un guide propre au framework.