Vuelidate as Nuxt Plugin not working

Hi everyone,

Setup: Nuxt@2.6.1 and Vuelidate@0.7.4

Problem: I’m having trouble getting Vuelidate to work with Nuxt and I’ve tried searching for hours without any success.

I’ve created the following vuelidate.js file in my plugins folder:

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

Then in my Nuxt.config.js, I added the following to my plugins: plugins: [someotherpackages..., { src: "~/plugins/vuelidate" }]

In my components:

<template>
  <form @submit.prevent="test">
      <input type="email" name="email" v-model.trim="$v.email.model">
      <p v-if="!$v.email.required">The email field is required!</p>
      <p v-if="!$v.email.email">The input must be a proper email!</p>
      <input type="password" name="password" v-model.trim="$v.password.model">
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
import { required, minLength } from "vuelidate/lib/validators"

export default {
  name: "SignUp",
  data() {
    return {
      email: null,
      password: null,
    }
  },
  validations: {
    email: required,
    password: {
      required,
      minLength: minLength(6),
    },
  },
}

I get the following error:

[Vue warn]: Property or method "$v" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

[DonNicoJs]

@chanmathew HI! I made a codesandbox with latest nuxt and vuelidate that is working: https://codesandbox.io/s/53jwkw9r9k

few things:

• on the v-model is : $v.email.$model ( note the $ before model )
• email validator is missing
• for consistency I made the email validations a object

Please check the component VueliForm and the plugin vuelidate.

[golcsa-renato]

Worked for me this way, hope it helps.

plugins/vuelidate.js

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

nuxt.config.js

export default {
   plugins: [
    {
      src: '~/plugins/vuelidate.js',
      mode: 'both',
    },
  ],
}

MyComponent.vue

<template>
 <input v-model="form.name" @input="$v.form.name.$touch()" />
</template>

<script>
import { required } from 'vuelidate/lib/validators'
export default {
  data() {
    return {
      form: {
        name: '',
      },
    }
  },
  validations: {
    form: {
      name: {
        required,
      },
    },
  }
}
</script>