HAPI + Vue Plugin Require Vue JS

If your website is powered by Vue JS, you can use our plugin to make the form submission by just providing an endpoint on the logic part.

Use HAPI Mixins

Installation

npm install @juno0424/vue2-hapi

yarn add @juno0424/vue2-hapi

Import into component

<template>
  <form>
    <label>Name</name>
    <input type="text" v-model="fields.name">
    <p v-if="errors && errors.name" v-text="errors[0]"></p>
    ...
  </form>
</template>

<script>
import hapiMixins from "@juno424/vue2-hapi";

export default {
  mixins: [hapiMixins]
    data() {
      return {
        endpoint: "https://app.hapiforms.com/api/c9a2eac4-9869-4641-913e-8e132e947229",
        redirectTo: "/thank-you"
        // or use function
        redirectTo: () => {
          // Do something...
        }
      }
    }
}
</script>

Input Error Component

Installation

npm install @juno0424/vue2-hapi-inputs

yarn add @juno0424/vue2-hapi-inputs

Import into component

<template>
  <form>
    <label>Name</name>
    <input type="text" v-model="fields.name">
    <!-- Short and readable component -->
    <InputError :field="fields.name" />
    ...
  </form>
</template>

<script>
import hapiMixins from "@juno424/vue2-hapi";
import { InputError } from "@juno424/vue2-hapi-inputs";

export default {
    components: { InputError },
    mixins: [hapiMixins]
    ...
}
</script>

Instead of writing long Vue code, you will just need to write 2 lines of code to make the submission works and redirect to /thank-you page after the form is submitted.

Questions? Submit your feedback to us from the dashboard :)