Composables

Discover the composables to use in your custom Vue components and pages.

useSubscribe()

useSubscribe() sends subscriber data through the module's server route to the authenticated Listmonk API. It resolves after Listmonk confirms the subscription and rejects when the request fails. Its body must contain an email address and can include a name and application-specific fields for subscription hooks.

<script setup lang="ts">
const email = ref('')
const recaptchaToken = ref('')

async function submit() {
  try {
    await useSubscribe({
      email: email.value,
      attribs: {
        source: 'newsletter-form',
        locale: 'pt-BR',
      },
      recaptchaToken: recaptchaToken.value,
    })
  }
  catch (error) {
    // Display an error and keep the form values so the user can retry.
  }
}
</script>

<template>
  <form @submit.prevent="submit">
    <div>
      <input v-model="email" type="email" name="email" placeholder="E-mail">
    </div>

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

The body type is inferred, so application-specific fields do not require a cast. They are sent to the module's server route for guards to inspect but do not reach Listmonk. The typed attribs object is validated and sent to Listmonk for new subscribers. For existing subscribers, its behavior depends on existingSubscriberMode.

attribs must be a plain JSON object. Nested strings, finite numbers, booleans, null, arrays, and plain objects are supported. The attributes root cannot be an array or null.