Tag Archives: [Vue warn]: Failed to resolve directive: XXX

[Vue warn]: Failed to resolve directive: XXX [How to Solve]

There are two reasons for this error:

1. Misspelling of instruction words

2. Vue.Directive() is not written before new Vue

// Wrong

import Vue from 'vue';
import App from './app.vue';

new Vue({ 
  render: h => h(App),
}).$mount('#A-demo');
 
Vue.directive('focus', {
  inserted(el){
    el.focus();
  }
})


// Right

import Vue from 'vue';
import App from './app.vue';

Vue.directive('focus', {
  inserted(el){
    el.focus();
  }
})

new Vue({ 
  render: h => h(App),
}).$mount('#A-demo');