Vuelidate 2 / Vue composition API example.

I tried to get up and running with vuelidate 2 and the vue composition api.

I got as far as setting it up, and I have the validation model being returned, but its not totally working, the model updated but $dirty and $valid did not update.

Could we please get an example of how it should work?

Here is what i tried:

<script>
import { ref, reactive } from '@vue/composition-api'
import { email, required } from '@vuelidate/validators'
import useVuelidate from '@vuelidate/core'
import useLogin from '@/composables/auth/useLogin'
export default {
  name: 'LoginForm',
  setup() {
    // Wrapping this in reactive since the plugin has a bug with .value
    const loginService = reactive(useLogin())
    const username = ref()
    const password = ref()
    const submit = () => {
      loginService.login(username.value, password.value)
    }

    let validation = useVuelidate(
      {
        username: { required, email },
        password: { required }
      },
      { username, password }
    )

    return {
      username,
      password,
      submit,
      loginService,
      validation
    }
  }
}
</script>

[javiercbk]

hey @blowsie, can you post the full solution? I’m currently experiencing the same issue but I’m not sure what am I doing wrong.

Thanks a lot @blowsie, I wouldn’t have figured out so quickly without your example

Here is my vue file

<template>
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-5-tablet is-4-desktop is-3-widescreen">
        <form action="" class="box" @submit="login" novalidate>
          <div class="field">
            <label for="" class="label">Email</label>
            <div class="control has-icons-left">
              <input
                type="email"
                v-model="email"
                class="input"
                :class="{ 'is-danger': $v.email.$invalid && $v.email.$dirty }"
              />
              <span class="icon is-small is-left">
                <b-icon pack="fas" icon="envelope"> </b-icon>
              </span>
            </div>
          </div>
          <div class="field">
            <label for="" class="label">Password</label>
            <div class="control has-icons-left">
              <input
                type="password"
                v-model="password"
                class="input"
                :class="{
                  'is-danger': $v.password.$invalid && $v.email.$invalid
                }"
              />
              <span class="icon is-small is-left">
                <b-icon pack="fas" icon="lock"> </b-icon>
              </span>
            </div>
          </div>
          <div class="field">
            <button
              class="button is-success"
              :disabled="$v.$invalid && $v.$dirty"
            >
              Login
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" src="./login-form.ts"></script>

and my typescript file

import { createComponent, ref } from "@vue/composition-api";
import { useState } from "@u3u/vue-hooks";
// prevent typescript complaining about no typings
const { email, required } = require("@vuelidate/validators");
const useVuelidate = require("@vuelidate/core").default;
import store from "@/store";
import router from "@/router";
import { AuthCredentials } from "@/store/login";

export default createComponent({
  setup() {
    const storeState = {
      ...useState("login", ["loading", "error"])
    };

    // you must use ref, reactive is not supported
    // I believe the reason is https://github.com/vuelidate/vuelidate/blob/next/packages/vuelidate/src/core.js#L392
    const email = ref("");
    const password = ref("");

    const $v = useVuelidate(
      {
        email: { required, email, $autoDirty: true },
        password: { required, $autoDirty: true }
      },
      { email, password }
    );

    const login = function(e: Event) {
      e.preventDefault();
      if (!$v.$invalid) {
        const credentials: AuthCredentials = {
          email: email.value,
          password: password.value,
          onLoginSuccess: () => {
            let nextRoute = store.getters["session/savedRoute"];
            if (nextRoute) {
              nextRoute = { name: "events" };
            }
            router.replace(nextRoute);
            store.dispatch("session/clearSavedRoute");
          }
        };
        store.dispatch("login/login", credentials);
      }
    };

    return {
      ...storeState,
      email,
      password,
      login,
      $v
    };
  }
});

[shentao]

Well, in that case, @ansarizafar keep your fingers crossed for this weekend! 🤞