Vee-validate: Failed to resolve directive: validate with Vue 1.x and v1.0.0-beta.7

[rstoenescu]

vue.common.js?e881:1019 [Vue warn]: Failed to resolve directive: validatewarn @ vue.common.js?e881:1019resolveAsset @ vue.common.js?e881:1941compileDirectives @ vue.common.js?e881:7531compileElement @ vue.common.js?e881:7143compileNode @ vue.common.js?e881:7099compileNodeList @ vue.common.js?e881:7282compileNodeList @ vue.common.js?e881:7283compileNodeList @ vue.common.js?e881:7283compileNodeList @ vue.common.js?e881:7283compileNodeList @ vue.common.js?e881:7283compileNodeList @ vue.common.js?e881:7283compile @ vue.common.js?e881:6878Vue._compile @ vue.common.js?e881:8604Vue.$mount @ vue.common.js?e881:9446Vue._init @ vue.common.js?e881:2468Vue._init @ vue-router.js?e71f:1756Override.Vue._init @ vue-i18n.common.js?2c49:144VueComponent @ VM2549:2build @ vue.common.js?e881:5837activate @ vue-router.js?e71f:1176(anonymous function) @ vue-router.js?e71f:1480step @ vue-router.js?e71f:1503(anonymous function) @ vue-router.js?e71f:1506deactivate @ vue-router.js?e71f:1119step @ vue-router.js?e71f:1505runQueue @ vue-router.js?e71f:1500(anonymous function) @ vue-router.js?e71f:1464step @ vue-router.js?e71f:1503(anonymous function) @ vue-router.js?e71f:1506(anonymous function) @ vue-router.js?e71f:1098(anonymous function) @ vue-router.js?e71f:845Vue._resolveComponent @ vue.common.js?e881:8869resolveAsyncComponent @ vue-router.js?e71f:843canActivate @ vue-router.js?e71f:1090step @ vue-router.js?e71f:1505runQueue @ vue-router.js?e71f:1500(anonymous function) @ vue-router.js?e71f:1463step @ vue-router.js?e71f:1503(anonymous function) @ vue-router.js?e71f:1506canDeactivate @ vue-router.js?e71f:1073step @ vue-router.js?e71f:1505runQueue @ vue-router.js?e71f:1500start @ vue-router.js?e71f:1462startTransition @ vue-router.js?e71f:2578_match @ vue-router.js?e71f:2592onChange @ vue-router.js?e71f:2168listener @ vue-router.js?e71f:979start @ vue-router.js?e71f:982start @ vue-router.js?e71f:2351(anonymous function) @ app.js?7ac9:46start @ quasar.common.js?e3df:5165(anonymous function) @ app.js?7ac9:45(anonymous function) @ app.js:1362__webpack_require__ @ app.js:556fn @ app.js:87(anonymous function) @ app.js:587__webpack_require__ @ app.js:556(anonymous function) @ app.js:579(anonymous function) @ app.js:582
vue.common.js?e881:1019 [Vue warn]: Error when evaluating expression "{'has-error': errors.has('email')}": TypeError: Cannot read property 'has' of undefinedwarn @ vue.common.js?e881:1019Watcher.get @ vue.common.js?e881:3176Watcher @ vue.common.js?e881:3158Directive._bind @ vue.common.js?e881:8345linkAndCapture @ vue.common.js?e881:6928compositeLinkFn @ vue.common.js?e881:6897Vue._compile @ vue.common.js?e881:8611Vue.$mount @ vue.common.js?e881:9446Vue._init @ vue.common.js?e881:2468Vue._init @ vue-router.js?e71f:1756Override.Vue._init @ vue-i18n.common.js?2c49:144VueComponent @ VM2549:2build @ vue.common.js?e881:5837activate @ vue-router.js?e71f:1176(anonymous function) @ vue-router.js?e71f:1480step @ vue-router.js?e71f:1503(anonymous function) @ vue-router.js?e71f:1506deactivate @ vue-router.js?e71f:1119step @ vue-router.js?e71f:1505runQueue @ vue-router.js?e71f:1500(anonymous function) @ vue-router.js?e71f:1464step @ vue-router.js?e71f:1503(anonymous function) @ vue-router.js?e71f:1506(anonymous function) @ vue-router.js?e71f:1098(anonymous function) @ vue-router.js?e71f:845Vue._resolveComponent @ vue.common.js?e881:8869resolveAsyncComponent @ vue-router.js?e71f:843canActivate @ vue-router.js?e71f:1090step @ vue-router.js?e71f:1505runQueue @ vue-router.js?e71f:1500(anonymous function) @ vue-router.js?e71f:1463step @ vue-router.js?e71f:1503(anonymous function) @ vue-router.js?e71f:1506canDeactivate @ vue-router.js?e71f:1073step @ vue-router.js?e71f:1505runQueue @ vue-router.js?e71f:1500start @ vue-router.js?e71f:1462startTransition @ vue-router.js?e71f:2578_match @ vue-router.js?e71f:2592onChange @ vue-router.js?e71f:2168listener @ vue-router.js?e71f:979start @ vue-router.js?e71f:982start @ vue-router.js?e71f:2351(anonymous function) @ app.js?7ac9:46start @ quasar.common.js?e3df:5165(anonymous function) @ app.js?7ac9:45(anonymous function) @ app.js:1362__webpack_require__ @ app.js:556fn @ app.js:87(anonymous function) @ app.js:587__webpack_require__ @ app.js:556(anonymous function) @ app.js:579(anonymous function) @ app.js:582
vue.common.js?e881:1019 [Vue warn]: Error when evaluating expression "errors.has('email')": TypeError: Cannot read property 'has' of undefinedwarn @ vue.common.js?e881:1019Watcher.get @ vue.common.js?e881:3176Watcher @ vue.common.js?e881:3158Directive._bind @ vue.common.js?e881:8345linkAndCapture @ vue.common.js?e881:6928compositeLinkFn @ vue.common.js?e881:6897Vue._compile @ vue.common.js?e881:8611Vue.$mount @ vue.common.js?e881:9446Vue._init @ vue.common.js?e881:2468Vue._init @ vue-router.js?e71f:1756Override.Vue._init @ vue-i18n.common.js?2c49:144VueComponent @ VM2549:2build @ vue.common.js?e881:5837activate @ vue-router.js?e71f:1176(anonymous function) @ vue-router.js?e71f:1480step @ vue-router.js?e71f:1503(anonymous function) @ vue-router.js?e71f:1506deactivate @ vue-router.js?e71f:1119step @ vue-router.js?e71f:1505runQueue @ vue-router.js?e71f:1500(anonymous function) @ vue-router.js?e71f:1464step @ vue-router.js?e71f:1503(anonymous function) @ vue-router.js?e71f:1506(anonymous function) @ vue-router.js?e71f:1098(anonymous function) @ vue-router.js?e71f:845Vue._resolveComponent @ vue.common.js?e881:8869resolveAsyncComponent @ vue-router.js?e71f:843canActivate @ vue-router.js?e71f:1090step @ vue-router.js?e71f:1505runQueue @ vue-router.js?e71f:1500(anonymous function) @ vue-router.js?e71f:1463step @ vue-router.js?e71f:1503(anonymous function) @ vue-router.js?e71f:1506canDeactivate @ vue-router.js?e71f:1073step @ vue-router.js?e71f:1505runQueue @ vue-router.js?e71f:1500start @ vue-router.js?e71f:1462startTransition @ vue-router.js?e71f:2578_match @ vue-router.js?e71f:2592onChange @ vue-router.js?e71f:2168listener @ vue-router.js?e71f:979start @ vue-router.js?e71f:982start @ vue-router.js?e71f:2351(anonymous function) @ app.js?7ac9:46start @ quasar.common.js?e3df:5165(anonymous function) @ app.js?7ac9:45(anonymous function) @ app.js:1362__webpack_require__ @ app.js:556fn @ app.js:87(anonymous function) @ app.js:587__webpack_require__ @ app.js:556(anonymous function) @ app.js:579(anonymous function) @ app.js:582
vue.common.js?e881:1019 [Vue warn]: Error when evaluating expression "errors.first('email')": TypeError: Cannot read property 'first' of undefined

[rstoenescu]

[Vue warn]: Failed to resolve directive: validate

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

Vue.use(VeeValidate)

<!-- in my template -->
<input v-validate data-rules="required|email" type="text" name="email">

Vue 1.x, Vee Validate 1.0.0-beta.7

[logaretm]

Is this related to #11 ? I'm putting together an example on webpackbin.

[rstoenescu]

I'm not sure. I don't think so.

[logaretm]

Ok I tried a quick example here, no issues

http://www.webpackbin.com/NymQTICnZ

If you can send me your project, I can take a look, probably I'm missing something.

on a side note, does the previous versions work?

[rstoenescu]

Tested with beta 5 and same thing.

I've put together a project to highlight the issue. It's great for you to investigate.
Unzip it, npm install, npm run dev. Click on the button in the middle of the page called "Go to issue". Then observe the browser console logs.

Thanks for investigating this!

vee-validate.tar.gz

[logaretm]

OK, I don't really know why but in the router.js I included VeeValidate there instead of app.js:

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

Vue.use(VueRouter)
Vue.use(VeeValidate)

/*
  Avoid lazy loading while in dev mode
  to benefit from HMR
 */
function load (name) {
  if (process.env.NODE_ENV === 'development') {
    return require('components/' + name + '.vue')
  }
  else {
    return (resolve) => {
      require('bundle?lazy!components/' + name + '.vue')(resolve)
    }
  }
}

let routes = {
  // Not found
  '*': {
    component: load('error404')
  },

  // Default
  '/': {
    component: load('index')
  },
  '/vee': {
    component: load('vee')
  }
}

let Router = new VueRouter()
Router.map(routes)

export default Router

and its working now. I'm not sure why, I hope you can shed some light. I assumed that maybe the router is extending vue components without installing the plugin properly.

maybe something is wrong with how I'm installing the plugin, not really sure, here is another bin with vue-router that works normally:

http://www.webpackbin.com/NJQHsURhb

[rstoenescu]

Thanks for helping out. It works now. But we still have to determine what's going on. I will investigate in the following days.

[laurentpayot]

Same issue here. The workaround worked.

[laurentpayot]

@rstoenescu I can't use vee-validate anymore with Quasar v0.8. Created #57 for this.

[rstoenescu]

NPM install vee-validate@next. That's the version compatible with Vue 2.

[laurentpayot]

D'Oh! Thanks @rstoenescu.

[rstoenescu]

Glad I could help!

[laurentpayot]

By the way I am importing vee-validate in main.js so for me no more issue with vee-validate and Quasar 0.8.

[logaretm]

@laurentpayot it seems specific to Vue 1.0 for some reason.

@rstoenescu any ideas why its happening to Vue 1.0?