Not working with nuxtjs

Versions:

• VueJs: #.#.# nuxtjs v0.10.7
• Vee-Validate: 2.0.0-rc.5

Description:

Simple implementation with nuxtjs, following the example, not working! Not able to figure out the cause.

Steps To Reproduce:

Any sample, wiht validator added via npm/yarn… then registered using a plugin:

import Vue from 'vue'
import VeeValidate from 'vee-validate'

Vue.use(VeeValidate)

Now when I use it on the form on the page, errors is undefined and so is $validator.

[SharadKumar]

Okay, this works!

~plugins/vee-validate.js

import Vue from 'vue'
import VeeValidate from 'vee-validate'

Vue.use(VeeValidate, {
  inject: true
})

then, nuxt.config.js

plugins: [
    {src: '~plugins/vee-validate.js', ssr: true}
  ]

then, in my page:

methods: {
    validateBeforeSubmit(e) {
      this.$validator.validateAll().then(x => {
        console.log(x)
      }).catch(e => {
        console.log(e)
      })
    }
}

and template:

   <div class="form-group" :class="{'has-danger': errors.has('name') }">
      <label for="name" class="sr-only">Name</label>
      <input type="text" name="name" class="form-control" placeholder="Full name" v-validate="'required'" autofocus>
      <span v-show="errors.has('name')" class="form-control-feedback">{{ errors.first('name') }}</span>
    </div>
    <div class="form-group" :class="{'has-danger': errors.has('email') }">
      <label for="email" class="sr-only">Email address</label>
      <input class="form-control" name="email" type="text" placeholder="Email" v-validate="'required|email'">
      <span v-show="errors.has('email')" class="form-control-feedback">{{ errors.first('email') }}</span>
    </div>
    <div class="form-group" :class="{'has-danger': errors.has('password') }">
      <label for="password" class="sr-only">Password</label>
      <input v-model="password" type="password" class="form-control" placeholder="Password" v-validate="'required'">
      <span v-show="errors.has('password')" class="form-control-feedback">{{ errors.first('password') }}</span>
    </div>
    <div class="form-group" :class="{'has-danger': errors.has('passwordConfirm') }">
      <label for="password" class="sr-only">Confirm Password</label>
      <input v-model="passwordConfirm" type="password" class="form-control" placeholder="Re-type password" v-validate="'required'">
      <span v-show="errors.has('passwordConfirm')" class="form-control-feedback">{{ errors.first('passwordConfirm') }}</span>
    </div>
    <div class="form-group">
      <button @click="validateBeforeSubmit" class="btn btn-primary">Submit Registration</button>
    </div>

Works fine. Please close the issue. Thanks for your help @logaretm 👍

[farhadniaz]

@SharadKumar @logaretm @finalight @horan-geeker @blackpr you can use vue-joi-validation base on Joi , a good Vuejs plugin for validation purposes . no-conflict and SSR support and schema base

Features

Model based Decoupled from templates Schema based Built upon Joi Minimalistic Support for collection validations Support for nested models Contextified validators Easy to use with custom validators (e.g. Moment.js) Support for function composition Validates different data sources: Vuex getters, computed values, etc.