vuetify: [Bug Report] warning with VueJS 2.6.11

Not a workaround, but just too hide it:

It was too annyoing so I went into the vue folder in node_modules, project search and removed the following

// removed this line
warn(("The .native modifier for v-on is only valid on components but it was used on <" + tag + ">."),context);

Although the warning was intentional as mentioned above by @icleolion. We can handle the Vue Warnings from main.js something like this

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;
  }
}

Not the best way but if you are frustrated by the console error just because you are using one of the vuetify component (v-calendar for me). Hope that helps 😅.

Seeing this also on VIcon

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

found in

---> <VIcon>
       <VListItem>
         <RouterLink>
           <VList>
             <ThemeProvider>
               <VMenu>

I’m assuming it’s related to https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VIcon/VIcon.ts#L194

Its a combination of both us and upstream, there is an open PR for the upstream issue (which may or may not resolve the issue).

There is no need to keep spamming the post. a simple 👍 on the initial thread will suffice to show interest. We also kindly encourage the community, if they have the time, to submit PR’s as well. Sir Lamar’s seems to have a pretty good starting point.

Current ways around the warning right now are disable it (not recommended) or staying on 2.6.10

const ignoreWarnMessage = "[your error message]"; Vue.config.warnHandler = function(msg, vm, trace) { if (msg !== ignoreWarnMessage) { console.error("[Vue warn]: " + msg + trace); } }; Try this

That’s not the solution.

any news on this? as right now seems like faSvg is totally unusable with vuetify.

Same problem here today:

vue.runtime.esm.js:619 [Vue warn]: The .native modifier for v-on is only valid on components but it was used on <svg>.

found in

---> <VIcon>
       <VAvatar>
         <VCard>
           <Activate.selection> at src/views/activate.selection.vue
             <VContent>
               <VApp>
                 <App> at src/App.vue
                   <Root>

I had the same error here, any updates?

Think it’s the Vue team you want to be poking, not the Vuetify guys. vuejs/vue#10939

To be clear, I’m pretty sure this is a new error message in Vue, but it was meant to be implemented as a warning, not a console error. It remains the case that some Vuetify components are implementing the “native” modifier on their children elements, and so if that child is not itself a Vue component, this error is thrown. Vuetify should be checking to see if the child element is already native HTML before applying this modifier.

Hi, I have the same issues with nuxt when I use v-calendar, I have the latest version of nuxt. is-there a new solution to solve it please ?

The solution is, in every case where this pattern is used in Vuetify:

• Look at child element. Is it a VueJS component object?
  • If yes, apply “native” modifier

I would submit a PR for this except I don’t have much experience with hard-coding “render” methods as are used throughout Vuetify.

Doing hacky work-around things just to suppress the warning is a mistake. The warning exists for a reason.

For those still having issue with VIcon and are tracking this issue, figured I’d drop a note in here to say that https://github.com/vuetifyjs/vuetify/pull/12148 has resolved the issue for VIcon now also. With both VIcon and VCalendar now fixed, you can now upgrade beyond Vue 2.6.10 without having your console flooded with errors!

Here’s a temporary workaround usage of ignoring this message using warnhandler API as suggested above by @Mondal10. This version passes through everything except the ignored message as console errors, where the original suggestion does not.

In main.js/ts:

const ignoredMessage = "The .native modifier for v-on is only valid on components but it was used on <div>.";

Vue.config.warnHandler = (message, vm, componentTrace) => {
    if (message !== ignoredMessage) {
        console.error(message + componentTrace);
    }
};

A workaround is to create a wrapper component that wraps the fa component in a div, this will work.

custom component

<template>
  <div>
    <font-awesome-icon
      v-bind="$props"
    >
      <slot></slot>
    </font-awesome-icon>
  </div>
</template>

<script lang="ts">
import {
  computed, defineComponent, onMounted, reactive, toRefs,
} from '@vue/composition-api';

export default defineComponent({
  props: {
    icon: Array,
  },
  setup(props, context) {
    return {
    };
  },
});
</script>

register a custom icon and use the component

export default new Vuetify({
  options: {
    customProperties: true,
  },
  icons: {
    iconfont: 'faSvg',
    values: {
      eye: {
        component: 'vc-icon',
        props: {
          icon: ['fad', 'eye'],
        },
      },
    },
  },
});

then it is usable like this

             <v-text-field
                outlined
                :type="showPassword ? 'text' : 'password'"
                :placeholder="$t('signUp.form.rePassword')"
                v-model="rePassword"
                required
                :disabled="loading"
                :append-icon="'$vuetify.icons.values.eye'"
                @click:append="togglePassword"
              >
              </v-text-field>

I think that is “hack” for me, but it works and resolve problem without turning-Off of warnings. I’m just replace all “nativeOn” listeners in /node_modules/vuetify/dist/vuetify.js to “On” (without native). All works and doesn’t push any warnings.

It’s cool that everyone is having the same problem, but could future people please not spam this thread? Instead use the “Subscribe” button in the right sidebar to be notified of any changes. Thanks!

So is the intention for #11228 to fix VIcon this time around? Or do I need to raise a separate issue for that to be resolved via another method?

I have same proplem when using VCalendar

The same… (( Vuetify v2.2.13 Vue v2.6.11