@eucalyptusvc/klaviyo-signup-form

Klaviyo Signup Form Vue component

Setup

Install with yarn:

yarn add @eucalyptusvc/klaviyo-signup-form

Install with npm:

npm install @eucalyptusvc/klaviyo-signup-form

Usage

Basic

<template>
  <section class="awesome">
    <klaviyo-signup-form
      endpoint="https://lambdafunction/klaviyo/signup"
      klaviyoListId="listId"
      placeholder="you@awesome.com"
      button-text="Signup"
      :input-classes="['is-medium']"
      :button-classes="['is-medium']"
      @success="handleSuccess"
      @error="handleError"
    />
  </section>
</template>

<script lang="ts">
import { Prop, Component, Vue } from 'vue-property-decorator';
import KlaviyoSignupForm from '@eucalyptusvc/klaviyo-signup-form';

@Component({
  components: {
    KlaviyoSignupForm,
  },
})
export default class Awesome extends Vue {}
</script>

With Slot Scope

<template>
  <section class="awesome">
    <klaviyo-signup-form
      endpoint="https://lambdafunction/klaviyo/signup"
      klaviyoListId="listId"
      placeholder="you@awesome.com"
      button-text="Signup"
      :input-classes="['is-medium']"
      :button-classes="['is-medium']"
      @success="handleSuccess"
      @error="handleError"
    >
      <template #input="{ email, placeholder, inputClasses, isLoading, handleSubmit }">
        <!-- Replace the input, ^ available props -->
      </template>

      <template #submit="{ handleSubmit, isLoading, buttonClasses }">
        <!-- Replace the input, ^ available props -->
      </template>
    </klaviyo-signup-form>
  </section>
</template>

<script lang="ts">
import { Prop, Component, Vue } from 'vue-property-decorator';
import KlaviyoSignupForm from '@eucalyptusvc/klaviyo-signup-form';

@Component({
  components: {
    KlaviyoSignupForm,
  },
})
export default class Awesome extends Vue {}
</script>