vuelidate: TypeError: Cannot read property 'name' of undefined

I solved this with

plugins: [
  { src: '~/plugins/vuelidate', ssr: true }
]

Make sure to restart nuxt after this.

I have the same error

Same error with a basic example: Uncaught TypeError: Cannot read property ‘email’ of undefined

###HTML <input type="text" v-model="email" v-on:input="$v.email.$touch" v-bind:class="{error: $v.email.$error, valid: $v.email.$dirty && !$v.email.$invalid}"/>

###JS:

import { required, email } from 'vuelidate/lib/validators';

export default {
  name: 'app',
  data() {
    return {
      email: '',
      name: '',
    };
  },
  validations: {
    email: { required, email },
  },
};

Thanks @shentao I changed it to lowercase ‘vue’ and it still does not recognize the vuelidate validations.

I get the following error on my console:

[Vue warn]: Error when evaluating expression "!$v.name.alpha": TypeError: Cannot read property 'name' of undefined

Any ideas? I feel like I am doing everything right.

I have the same error

Error in v-on handler: “TypeError: Cannot read property ‘$touch’ of undefined”

<script> import { required, email, minLength, sameAs } from "vuelidate/lib/validators"; export default { name: "app", data() { return { user: { firstName: "", lastName: "", email: "", password: "", confirmPassword: "" }, submitted: false }; }, validations: { user: { firstName: { required }, lastName: { required }, email: { required, email }, password: { required, minLength: minLength(6) }, confirmPassword: { required, sameAsPassword: sameAs('password') } } }, methods: { handleSubmit(e) { this.submitted = true; // stop here if form is invalid this.$v.$touch(); if (this.$v.$invalid) { return; } alert("SUCCESS!! :-)\n\n" + JSON.stringify(this.user)); } } }; </script>

@shyamchandranmec Could you please provide an example of how you made it work with nuxt? I am getting the same error as everyone else here: ‘Error in render function: “TypeError: Cannot read property ‘pcs’ of undefined”’

Having the same issue. Issue occurs when attempting to bootstrap using the Vuelidate mixin -or- the global installation method of using Vue.use(Vuelidate). Can’t provide an example since our codebase is private but would be great if you could take a closer look and replicate.

I had the same error with NUXT 3. The solution was to wrap the whole form or your div with error handling in a client-only tag.

<client-only>
  <div v-for="error of v$.email.$errors" :key="error.$uid">
    <div class="text-red-400">{{ error.$message }}</div>
  </div>
</client-only>

I solved it by adding this to the plugins section in nuxt.config.js…

I have the same error