Creating forms

❔ Mark for deprecation

Switch to Vee validate

We will make the switch towards Vee validate in the future for better Vue 3 support.

Introduction

The recommended approach to creating forms within Xerius applications is to use Vuelidate. It's a lightweight model-based validation library that also comes with built-in validators for most use cases.

Installation

The first step is to install Vuelidate:

npm install vuelidate --save

In order to use it within Nuxt, we need to create a plugin file:

import Vue from "vue";
import Vuelidate from "vuelidate";

Vue.use(Vuelidate);

Also don't forget to include it in your nuxt.config.js

export default {
  plugins: ["~/plugins/vuelidate"],
};

Example

Below you can find an example of a form using Vuelidate and Codey:

<template>
  <form class="xer-mt-6">
    <xer-textfield
      v-model.trim="$v.form.accountNumber.$model"
      xer-type="text"
      xer-label="Your account number"
      :xer-error="$v.form.accountNumber.$error"
      :xer-error-message="[
        {
          show: !$v.form.accountNumber.isBelgianIban,
          text: 'This account number is not valid',
        },
        {
          show: !$v.form.accountNumber.required,
          text: 'Account number is required',
        },
      ]"
      xer-caption="This email will be used by our platform"
    ></xer-textfield>
    <xer-button class="xer-mt-6" :disabled="$v.form.$invalid" @click.prevent="submitForm"
      >Volgende stap</xer-button
    >
  </form>
</template>

<script>
import { XerButton, XerTextfield } from "@xerius/codey-components";
import { required } from "vuelidate/lib/validators";
import { isBelgianIban } from "@xerius/codey-validators";

export default {
  name: "ExampleForm",
  components: {
    XerTextfield,
    XerButton,
  },
  data() {
    return {
      form: {
        accountNumber: "",
      },
    };
  },
  validations: {
    form: {
      accountNumber: {
        required,
        isBelgianIban,
      },
    },
  },
  methods: {
    submitForm() {
      // handle form submit
    },
  },
};
</script>

Validators

More validator functions can be found in the @xerius/codey-validators package.