Nuxt.js: Vee-Validate module not working on server side

[wargt]

Hi, i use module Vee-Validate

nuxt.config.js

plugins: ['~plugins/vue-validate']

vue-validate.js

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

Vue.use(VeeValidate)

on server render error

500

Cannot read property '$validator' of undefined

why???

_{This question is available on Nuxt.js community (#c219)}

[shyamchandranmec]

@wargt I too faced the same issue. I switched to Vuelidate

[antcook]

@shyamchandranmec I'm having issues with Vuelidate too! Getting a "Cannot read property 'error' of undefined" when navigating between pages, including Vuelidate on every page seems to fix the issue, but isn't ideal.

[alexchopin]

Hi, it will be fixed in the new version of vee-validate: more info

[MustafaDal]

hi, when i use vee-validate methods on ssr throw those errors. ( like: errors.has('mail') )

"nuxt": "^1.0.0-alpha.5"
"vee-validate": "^2.0.0-rc.7"

[Vue warn]: Property or method "errors" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

[Vue warn]: Error in render function: "TypeError: Cannot read property 'has' of undefined"

any idea...

<label class="label">Email (1s delay)</label>
<p class="control has-icon has-icon-right">
<input name="mail" v-validate="'required|mail'" data-vv-delay="1000" :class="{'input': true, 'is-danger': errors.has('mail') }" type="text" placeholder="Email">
<i v-show="errors.has('mail')" class="fa fa-warning"></i>
<span v-show="errors.has('mail')" class="help is-danger">{{ errors.first('mail') }}</span>
</p>

[noemiko]

@MustafaDal I have the same problem when I add VeeValidator only to local component. When I added it global everything was fine.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.