Vue (@frontmail/vue)

npm install @frontmail/vue

Nécessite Vue 3.3+. Fonctionne avec Nuxt dans le code côté client.

Plugin

import { createApp } from 'vue';
import { Frontmail } from '@frontmail/vue';
import App from './App.vue';

createApp(App)
  .use(Frontmail, { publicKey: 'pk_4f2a…', blockHeadless: true })
  .mount('#app');

Les options sont les mêmes que pour init(). Le plugin enregistre aussi <FrontmailForm> globalement.

FrontmailForm

<template>
  <FrontmailForm
    service-id="svc_01J9…"
    template-id="tpl_contact"
    turnstile-site-key="YOUR_TURNSTILE_SITE_KEY"
    @success="(r) => console.log(r.status)"
    @error="(e) => console.error(e.code)"
    v-slot="{ status, error }"
  >
    <input name="name" required />
    <input name="email" type="email" required />
    <textarea name="message" required />
    <button :disabled="status === 'sending'">Envoyer</button>
    <p v-if="status === 'sent'">Merci !</p>
    <p v-else-if="status === 'held'">Bien reçu – il sera transmis sous peu.</p>
    <p v-if="error" role="alert">{{ error.message }}</p>
  </FrontmailForm>
</template>

Props : serviceId, templateId, turnstileSiteKey, turnstileOptions, locale, sendOptions, resetOnSuccess (par défaut true). Événements : success, error, status. Le slot par défaut reçoit { status, error, result }.

locale (p. ex. locale="de") envoie l’e-mail dans cette langue du modèle (sous la forme du champ de formulaire fm_locale ; un champ fm_locale dans le formulaire est prioritaire). result.locale est la langue utilisée.

turnstileSiteKey est la clé de site de votre propre widget Turnstile (Sécurité → Protection contre les bots (Turnstile) dans le tableau de bord) – voir Cloudflare Turnstile. Omettez-la si le modèle n’exige pas de CAPTCHA.

useSendEmail

<script setup lang="ts">
import { ref } from 'vue';
import { useSendEmail } from '@frontmail/vue';

const email = ref('');
const { send, status, error } = useSendEmail('svc_01J9…', 'tpl_newsletter');
</script>

<template>
  <form @submit.prevent="send({ email })">
    <input v-model="email" type="email" />
    <button :disabled="status === 'sending'">S’abonner</button>
    <p v-if="status === 'error'">{{ error?.message }}</p>
  </form>
</template>

status, error et result sont des refs en lecture seule. serviceId et templateId peuvent être des refs ou des getters. send et sendForm acceptent des options en second argument, p. ex. send({ email }, { locale: 'de' }).

useFrontmail

useFrontmail() renvoie le client fourni par le plugin (pour getStatus et les appels de bas niveau).

Projet d’exemple : examples/vue.