HAPI Form Plugin For Vue 2

Installation

NPM

npm install @juno0424/vue2-hapi

Yarn

yarn add @juno0424/vue2-hapi

Usage

<template>
  <form @submit.prevent="submit">
    <div>
      <label>Name</label>
      <input type="text" v-model="fields.name" />
      <p v-if="errors && errors.name" v-text="errors.name[0]"></p>
    </div>
        <div>
      <label>Name</label>
      <input type="text" v-model="fields.name" />
      <p v-if="errors && errors.name" v-text="errors.name[0]"></p>
    </div>
    <div>
      <button type="submit">Submit</button>
      <p x-if="busy">Busy... please wait.</p>
    </div>
  </form>
</template>

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

export default {
  mixins: [hapiMixins],
  data() {
    return {
      endpoint: "http://localhost/api/c9a2eac4-9869-4641-913e-8e132e947229",
      redirectTo: "/thank-you"

      // or

      redirectTo: () => {
          // do something
      }
    };
  },
};
</script>

Busy state

You may make use of the this.busy state to bind attributes or display loading image to give better user experience.

Array fields

When you need array fields, please assign it on the the data() object accordingly.

Example:

<script>
export default {
  data() {
    return {
      fields: {
        colors: []
      }
    }
  }
}
</script>