Vue (@frontmail/vue)

npm install @frontmail/vue

Vyžaduje Vue 3.3+. Funguje s Nuxtom v kóde na strane klienta.

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');

Voľby sú rovnaké ako pri init(). Plugin navyše globálne zaregistruje <FrontmailForm>.

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'">Odoslať</button>
    <p v-if="status === 'sent'">Ďakujeme!</p>
    <p v-else-if="status === 'held'">Prijaté – čoskoro ju doručíme.</p>
    <p v-if="error" role="alert">{{ error.message }}</p>
  </FrontmailForm>
</template>

Props: serviceId, templateId, turnstileSiteKey, turnstileOptions, locale, sendOptions, resetOnSuccess (predvolene true). Udalosti: success, error, status. Predvolený slot dostáva { status, error, result }.

locale (napr. locale="de") pošle e-mail v zadanom jazyku šablóny (ako pole formulára fm_locale; pole fm_locale priamo vo formulári má prednosť). result.locale je použitý jazyk.

turnstileSiteKey je site key vášho vlastného widgetu Turnstile (v dashboarde Zabezpečenie → Ochrana pred botmi (Turnstile)) – pozrite Cloudflare Turnstile. Ak šablóna CAPTCHA nevyžaduje, vynechajte ho.

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'">Prihlásiť sa na odber</button>
    <p v-if="status === 'error'">{{ error?.message }}</p>
  </form>
</template>

status, error a result sú readonly refy. serviceId a templateId môžu byť refy alebo gettery. send a sendForm berú voľby ako druhý argument, napr. send({ email }, { locale: 'de' }).

useFrontmail

useFrontmail() vracia klienta poskytnutého pluginom (pre getStatus a nízkoúrovňové volania).

Ukážkový projekt: examples/vue.