HAPI Vue Components

Frontend adapter for HAPI Form and Laravel API form endpoint.

Installation

npm install @juno0424/vue2-hapi-inputs

or

yarn add @juno0424/vue2-hapi-inputs

Mixins

<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>

InputError Component

<template>
  <form>
    <label>Name</name>
    <input type="text" v-model="fields.name">
    <InputError :field="errors.name" />
    ...
  </form>
</template>

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

export default {
    components: { InputError }
    ...
}
</script>

LoaderTailSpin Component

<template>
  <form>
    <button>Submit</button>
    <LoaderTailSpin v-if="busy" class="w-10 h-10 inline-block" color="rgba(255,0,255,0.5)" />
    ...
  </form>
</template>

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

export default {
    components: { LoaderTailSpin }
    ...
}
</script>

Props

color – Accept all HTML color codes (HEX, RGB, HLS)