vuelidate: $v is not defined in single file component

My mistake was to put the validations key inside the data() method. Hope this will help someone out.

@GanchoDanailov couldn’t fix it, and decided to go with https://github.com/baianat/vee-validate try it, it is way better

@Frizi Please reopen this. I installed this lib thinking it was going help me build the my app faster, but I Just spent 3 hours trying to make it work before giving up. I think this error is a bug that needs a fix

I made a stupid mistake

import { required } from 'vuelidate/lib/validators';
export default {
  data() {
    name: '',
  },
  validators: {
    name: {
      required,
    }
  }
}

See anything wrong? validators is wrong, validations is the proper property name.

If you don’t have the validations property you’ll see the “$v not defined” error

I tried thousands ways. Just only two ways do work.

1. declare these three line in component

...
<script>
import Vue from 'vue'
import Vuelidate from 'vuelidate'

Vue.use(Vuelidate)

export defaut {...}

or 2. use mixin in component

...
<script>
import { validationMixin } from 'vuelidate'

export default {
  mixins: [validationMixin],
  ...
}

no need to put the validations in this

new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App),
    validations: {} // no need
});

You need to add validations key to your component to make Vuelidate bootstrap itself.

With TS decorators is needed to add hooks.

// main.ts
import Component from "vue-class-component";
Component.registerHooks(["validations"]);

import Vue from "vue";
import App from "./App.vue";
...

// component.vue
import { Vue, Component } from "vue-property-decorator";

export default class DemoComponent extends Vue {

  validations() {
    return {
      ....
    };
  }
}

@samayo @GanchoDanailov

You have to define validation in odrer to be able to use it. That means you need this code in your component:

validations: {
 // my validations definition
}

Please check this fiddle as a working example: https://jsfiddle.net/Frizi/b5v4faqf/

If you still experience any problems, please explain it and I’ll try my best to fix it and make it more obvious to the library user by throwing some helpful errors.

You also need to instantiate vuelidate in main.js. Even if you have no validations there.

new Vue({
   validations: {}
)}

something like that

Struggled for hours with this, and then I realized I am using require const Vuelidate = require('vuelidate')

should be const { Vuelidate } = require('vuelidate')

Hope this help someone

Hey guys, had the same error… Using Nuxt. It was so interesting, I have 2 plugins - Axios and Vuelidate. Axios works good, i Wrote in /plugins/vuelidate.js next: `import Vue from ‘vue’ import Vuelidate from ‘vuelidate’

Vue.use(Vuelidate) `

But that doesn’t work. I surfed 100500 sites, but… IT IS OMMMGGG

I just wrote theese 3 lines into my component…

`import { required, sameAs, minLength, email } from ‘vuelidate/lib/validators’

import axios from ‘~/plugins/axios’

import Vue from ‘vue’ import Vuelidate from ‘vuelidate’ Vue.use(Vuelidate)

export default { data () { return { login: ‘123’, email: ‘’, password: ‘’, password2: ‘’, isActive: ‘testetst’ } }, validations: { login: { required, minLength: minLength(6) }, email: { required, email }, password: { required, minLength: minLength(6) }, password2: { required, sameAsPassword: sameAs(‘password’) }`

SO IT’S WORKKKK…

May be it will help anyone)

in my case, need to property ‘validations’ const app = new Vue({ el: '#app', router, store, render: (h) => h(App), validations: { ... } })

My mistake was to put the validationskey inside the data() method. Hope this will help someone out.

Thank you for your comment, man! I was making the same mistake! No need of validations: {} in main.js.

This error accidentally ran into it, but I figured out what my problem was, I did everything as the docs says, installed the package by npm, import and use the package in the project root js file, the only mistake was put “validations” inside the vue component data data() { return { validations: {} } } but it should be instead outside data() { return { } } validations: {}

I have the same problem. I am using a (Webpack) project structure generated by vue-cli v3.

I have tried putting

  import Vue from 'vue'
  import Vuelidate from 'vuelidate'
  import required from 'vuelidate/lib/validators'
  Vue.use(Vuelidate);

in main.js and App.vue.

The only things which makes $v appear is putting the imports and validators in main.js, but then $v just stays empty, perhaps because “data” is defined in the App.vue.

I’ve spent four hours with this problem, so I’m going to try https://baianat.github.io/vee-validate/ for a while.

Have some problem when try to use vuelidate plugin in single file component

app.js

import Vue from ‘vue’; import Vuelidate from ‘vuelidate’;

Vue.use(Vuelidate)

const T = new Vue({
  router: router,
  template: '<div id="app"><heading></heading><transition :css="false" mode="out-in" @enter="enter" @leave="leave"><router-view></router-view></transition></div>',
  data: {
    currentRoute: window.location.href,
  },
  created(){
    this.$watch('$v', () => {
       console.log('$v changed')
    })
  },
  validations: {}
}).$mount('#app');

.vue file

<template> <form id="registration" class="form form_bl " @submit="handleSubmit" action=""> <button class="btn">Send</button> </template>

import { validationsMixin } from 'vuelidate';
import { required, minLength } from 'vuelidate/lib/validators';
export default {
  data () {
    return {
      email: ''
    }
  },
  validations: {
    email: {
      required,
    }
  },
  methods: {
    handleSubmit: function(e) {
      e.preventDefault();
      console.log($v.email);
    }
  }
}

and I’ve just got $v is not defined, I try everything

reorder components include Vuelidate inside .vue file

but nothing help

@samayo What’s the problem here? There are plenty examples in the docs, copying them should get you started in no time. Why would you need to use $v when no validation is defined?

I’m having this same issue but with the vue 3 version using the options api

@alvaro-canepa I would never figure this out if it weren’t you. Thank you!

Thanks so much @LarryJung , after hours of searching solution #2 worked with Nuxt.js for me.

Your submit method is a fat arrow function, which does not have the same this context as the component.

I’ve imported vuelidate from CDN and had this issue, I’ve fixed it with:

const { required, minValue } = window.validators;
var validationMixin = window.vuelidate.validationMixin;
.
.
.
 // Vue instance
new Vue({
      mixins: [validationMixin],
      validations: {...}, // OUTSIDE OF DATA
      .
      .
      .

Note: In my project I couldn’t use any local dependencies, so I had to import it from CDN.

To expand on @Anu2biZ. I’ve found the easiest way to fix this is to either include

import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

in your main.js
OR

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

in your component.

I’m not sure which is the best but either works. I couldn’t find this anywhere in the documentation and I wonder if this is something isolated to our setup (I’m using a modified vue js webpack starter).

I got here by Googling so maybe this will help someone down the road.

@Jack85 the same way. Simply use validations as a function.