vuetifyで「[Vue warn]: The .native modifier for v-on is only valid on components but it was used on <div>.」

起きたこと

私の場合はカレンダー・コンポーネントを使った時に発生しました。

起動はしますが、ブラウザ上でwarningが出ます。

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

解決方法

その1 vuetifyのバージョンをあげる

このwarningについてはGitHubでissueがあがっていて、解決済です。（v-iconでも発生するようです）

[Bug Report] warning with VueJS 2.6.11 · Issue #9999 · vuetifyjs/vuetify
[Bug Report] Button wrapper missing for faSvg clickable v-icons · Issue #10623 · vuetifyjs/vuetify

修正のPRは↓で、v2.3.14でリリース済です。

fix(VIcon): render a button element around clickable component icons by KaelWD · Pull Request #12148 · vuetifyjs/vuetify

というわけで、v2.3.14に上げれば発生しなくなります。

その2 warningを無視するコードを入れる

様々な事情でバージョンをあげるのが難しい場合、無理やり無視する事も可能です。（warningなので動作に影響は無いようです）

該当のコードはこちら。

Nuxtの場合は、pluginとして書いてあげるとわかりやすいです。

ignore-warning.ts

const ignoreWarnMessage = 'The .native modifier for v-on is only valid on components but it was used on <div>.';
Vue.config.warnHandler = function (msg, vm, trace) {
  // `trace` is the component hierarchy trace
  if (msg === ignoreWarnMessage) {
    msg = null;
    vm = null;
    trace = null;
  }

該当のwarningメッセージを握りつぶします。