Search code examples
vue.jsvuejs2vuejs3upgrade

The .native modifier for v-on is only valid on components but it was used on <a> tag

I'm in the middle of a Vue3 migration and I'm not sure on how to fix this specific issue, it was working fine with Vue2.

Error: [Vue warn] "The .native modifier for v-on is only valid on components but it was used on ."

Solution

  • You can use the following in your main.js file

    Vue.config.warnHandler = function(msg) {
  if (msg !== "The .native modifier for v-on is only valid on components but it was used on \<a\>.") {
    // eslint-disable-next-line
    console.error(msg)
  }  
}

    This is a preliminary solution that will catch the error in the preliminary work. Actually, it's not the best way to do it, it's really a good idea to modify elements that use v-on as @ instead.