Inherit attributes with Vue 2 compatibility build

I was working on a problem at work and this came up again. I "wasted" probably 2 hours trying to figure out what was going on.

When using the Vue 2 compatibility build with a V3 project, any use of the inheritAttrs component option requires explicitly dismissing the runtime warning to have the behavior work at all. My component has multiple root nodes, which seems to somewhat play a factor. Note: if the inheritAttrs option is not set to false then the Vue 2 behavior applies and will work as intended in the compat build.

// my-component.vue
<template>
  <Teleport to="body">
    <div>Hello world. This will inherit nothing.</div>
  </Teleport>
  <Teleport to="#somewhere-else">
    <div v-bind="$attrs">This element will inherit all extra attributes.</div>
  </Teleport>
</template>

<script>
export default {
    inheritAttrs: false,
    compatConfig: {
        // This is required!
        INSTANCE_ATTRS_CLASS_STYLE: false,
    }
}
</script>

Quite annoying but I'm not sure if it's really a bug. Vue is dropping all support for Vue 2 at the end of the year, so I'm not sure it's worth opening an issue for it.

I created the same scenario in a Vue 3 playground, and it worked as expected without extra component flags.

Posted in:

VueJS Web Development