@nortic/newsletter-form-vue

Nortic Newsletter Subscription - Vue

This is a Vue 3 wrapper for Nortic Newsletter Subscription

Getting started

Install

npm install @nortic/newsletter-form-vue
# yarn add @nortic/newsletter-form-vue
# pnpm add @nortic/newsletter-form-vue

Usage

Component

<script setup lang="ts">
import { SubmissionForm } from '@nortic/newsletter-form-vue'
import '@nortic/newsletter-form-vue/dist/style.css'
</script>

<template>
  <SubmissionForm newsletter-id="<your-newsletter-id>" />
</template>

Props

NOTE: For more information about the available options, please refer to the Nortic Newsletter Form readme.

Events

NOTE: If the email address is already subscribed, the form shows the success view and emits success, not error.

Composable

<script setup lang="ts">
import { SubmissionForm } from '@nortic/newsletter-form-vue'
import '@nortic/newsletter-form-vue/dist/style.css'

const norticSubmissionForm = ref<HTMLElement>()

useNewsletterSubscriptionForm(norticSubmissionForm, {
  newsletterId: '<your-newsletter-id>',
  // options: A third, optional, argument can be passed
})
</script>

<template>
  <div ref="norticSubmissionForm" />
</template>

Custom form

submitSubscription and the error helpers are re-exported from the core package, so you can build your own form:

import { isAlreadySubscribedError, submitSubscription } from '@nortic/newsletter-form-vue'

try {
  await submitSubscription('<your-newsletter-id>', { email })
}
catch (error) {
  if (isAlreadySubscribedError(error)) {
    /* The email is already subscribed, treat it as a success */
  }
}

For all error codes, see Error handling in the core package readme.