Vee-validate: Not working with nuxtjs

[SharadKumar]

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.

[logaretm]

I'm currently building an app with Nuxt.js I will add vee-validate and report back. this could be similar to #524 but it seems to be working fine.

[logaretm]

I just installed used vee-validate with nuxt normally without issues, did you try to reload your server?

[SharadKumar]

Yes, I did... then I should try it on a starter template again instead of my project (just in case). If your repo can be public... please share @logaretm .

[logaretm]

Sadly it isn't, but here is the relevant parts:

plugins/vee-validate.js

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

Vue.use(VeeValidate, {
  inject: false
});

nuxt.config.js

module.exports = {
 // ...
  plugins: [
    '~plugins/vee-validate.js',
    '~plugins/global-components.js'
  ],

  build: {
    vendor: ['vee-validate'],
    // ...
   }
};

[SharadKumar]

Hmmm... at first I thought this was fixed in beta 23.

Any clues to fix? I get no errors per se.

[logaretm]

Its not happening to me, no changes were done to how the plugin installation process, so I'm not sure, can you share your nuxt.config.js file?

btw I'm using the latest nuxtjs version 1.0.12 alpha

[SharadKumar]

I will check and report.

[SharadKumar]

Ok I upgraded my project to run latest alpha of nuxt, now I get the following on console:

vee-validate.js:1192 [vee-validate]: No validator instance is present on un-named component, did you forget to inject '$validator'?

I have a very simple form with one email field:
<input v-validate="'required|email'" type="text" name="email" class="form-control" placeholder="Email address">

[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 👍

[logaretm]

You don't have to turn off ssr, In my example I was using the inject option which mandates that you inject the validator selectively. I'm using SSR without issues like any other plugin.

Read more about it here: http://vee-validate.logaretm.com/advanced#injection

If you omit the options or set the inject option to true, it shouldn't give you this warning.

Vue.use(VeeValidate);

[SharadKumar]

Yes ssr needed. Fixed.

[finalight]

@SharadKumar i still having the problem, even after following your steps

I got this error

[Vue warn]: Failed to resolve directive: validate

I'm using nuxt.js as well

may I know for the specific .vue file, what else do I need to put in order to make the v-validate directive working?

[horan-geeker]

It can work in this way:

~plugins/vee-validate.js

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

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

then, nuxt.config.js

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

then, in my page:

export default {
...
inject: ['$validator'],
methods: {
    validateBeforeSubmit(e) {
      this.$validator.validateAll().then(x => {
        console.log(x)
      }).catch(e => {
        console.log(e)
      })
    }
}
computed: {
        errors: function() {
            return new ErrorBag()
        }
    },
}

[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.