Vue 2.6 + Composition API + Vuelidate

Hey, I’m trying to use the next branch with Vue 2.6 and Composition API (in quasar framework), but it doesn’t work, I got the following error :

TypeError: Object(...) is not a function
    at useVuelidate (index.esm.js?dc83:580)
    at useRegisterForm (use-register-form.ts?f336:57)

Quasar Framework is not yet shipped with Vue 3, so I tried the old version of Vuelidate, I export the validations object in the setup function but I think it has no effect as I can’t find the $v object.

import { reactive, toRefs, defineComponent } from '@vue/composition-api'
import { api } from 'boot/axios'
import {
  required,
  email,
  minLength,
  sameAs
} from 'vuelidate/lib/validators'

type Selected = {
  label: string,
  value: string | number
}

export default function useRegisterForm () {
  const state = reactive({
    lastName: '',
    firstName: '',
    email: '',
    address: '',
    password: '',
    passwordConfirmation: '',
    terms: false,
    dialCode: 0,
    zipCode: null,
    mobile: '',
    countries: [] as Array<Selected>,
    country: {
      label: null,
      value: null,
      iso: null,
      dial_code: null
    },
    states: [] as Array<Selected>,
    state: {
      label: null,
      value: null
    },
    cities: [] as Array<Selected>,
    city: {
      label: null,
      value: null
    }
  })

  const validations = {
    email: {
      required,
      email
    }
  }

  // METHODS
  async function onSubmit (): Promise<void> {
    try {
      const { data } = await api.post<Array<Record<string, any>>>('/register', {
        last_name: state.lastName,
        first_name: state.firstName,
        email: state.email,
        mobile: `+${state.dialCode}${state.mobile.replace(/\s/g, '')}`,
        country: state.country.value,
        state: state.state.value,
        city: state.city.value,
        address: state.address,
        zip_code: state.zipCode,
        password: state.password,
        password_confirmation: state.passwordConfirmation,
        terms: state.terms
      })
    } catch (e) {
    }
  }

  return {
    state,
    onSubmit,
    validations
  }
}

export default defineComponent({
    name: 'Register',
    setup (props, context) {
        const { state, onSubmit, validations } = useRegisterForm()

        return {
           ...toRefs(state as any),
           validations
      }
   }
})

I have no JS error. Any idea please?

[alexdee2007]

Hi @Melchyore, yes i see. A workaround in this case could be something like this:

Register.vue

<template>
  /* ... */
</template>

<script>
import { toRefs } from '@vue/composition-api';
import useRegisterForm, { validations } from './composition/use-register-form';

export default {
  name: 'Register',
  setup(props, context) {
    const { state, onSubmit } = useRegisterForm();
    /** ... */
    return {
      ...toRefs(state),
      onSubmit,
      /** ... */
    };
  },
  validations,
};
</script>

use-register-form.js

import { reactive, getCurrentInstance } from '@vue/composition-api';
import { required, email } from 'vuelidate/lib/validators';

export default () => {
  const instance = getCurrentInstance();
  const state = reactive({
    email: '',
    /** ... */
  });

  const onSubmit = async () => {
    instance.$v.$touch();
    /** ... */
  };

  return { state, onSubmit };
};

export const validations = {
  email: { required, email },
};

[lucasmb]

Im using vue 2.6 with composition api like @alexdee2007 suggested above, it works great for simple validation, but I’m struggling to get variables or functions from the setup inside the validation section for example

setup(props, context) {
        return {
            someYearVar,
        };
 },
validations() {
        year: {
            minValue: minValue(someYearVar)
            }
 };

If I get the current Instance instance inside the validation section I could do this, but is not updating the values after any input change

validations() {
    const instance = getCurrentInstance()
      year: {
           minValue: minValue((instance?.someYearVar)
      }
};