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));
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.