Search code examples
vue.jsvuejs3

Disable attribute inheritance globally in Vue3


In Vue3 - is there any way to globally disable Attribute Inheritance? I know that it's possible to set inheritAttrs to false when registering / creating a new component but what if I want to generally disallow this kind of behavior without having to change / add inheritAttrs: false to every single component I create?

A related question is Vue JS Non prop attributes and Disabling Attribute Inheritance - but it's only about if it's possible, not how you can do this globally...

The reason I want to disable it is that I want to achieve the same kind of behavior as in React / Angular - forwarding any props without receiving any error / warnings leads to inconsistency / unexpected behavior (possibly - especially with properties such as class and other native HTML Attributes).

A workaround we currently have is to import and re-export any component and "pre-processing" them:

import * as components from './components.ts'; // all components are re-exported with names
export * from './components.ts';

// Disable attribute-inheritance for every single component
Object.values(components).forEach((v) => (v.inheritAttrs = false));


Solution

  • It's technically possible to set inheritAttrs=false for every component by using a global mixin:

    // main.js
    import { createApp } from 'vue'
    
    createApp(App)
      .mixin({ inheritAttrs: false }) 👈
      .mount('#app')
    

    However, you should be aware that this does not cause Vue to emit warnings/errors when trying to set nonexistent props. Any such usage is silently ignored.

    demo