@juno0424/vue2-hapi-inputs NPM

HAPI Vue Components

Frontend adapter for HAPI Form and Laravel API form endpoint.

Installation

npm install @juno0424/vue2-hapi-inputs

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>