Disable attribute inheritance globally in Vue3

Question

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

I'd recomment to not try to do this as modifying default global behaviour can have long-running consequences, e.g. break third-party components. If you want to make this default behaviour for your own components, create custom wrapper for defineComponent — Estus Flask
– Estus Flask, Commented Dec 13, 2021 at 14:12

tony19 · Accepted Answer · 2021-12-14 12:26:53Z

2

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

answered Dec 14, 2021 at 12:26

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Simon · Accepted Answer · 2022-05-25 06:47:16Z

We ended up writing a vite plugin to avoid mixins (since we're using vue3 and mixins are only there for backwards compatibility) to automatically inject { inheritAttrs: false }:

import { Plugin } from 'vite';

const DISABLED_INHERIT_SCRIPT = `
  <script lang="ts"> 
    export default { inheritAttrs: false }; 
  </script>
`;

export const disableAttributeInheritance = (disable = true): Plugin => ({
  name: 'DisableInheritAttributesPlugin',
  transform: (src, id) => ({
    code:
      id.endsWith('.vue') && disable
        ? `${src}\n\n${DISABLED_INHERIT_SCRIPT}`
        : src,
    map: null
  })
});

and use it like that:

export default defineConfig({
  plugins: [
    disableAttributeInheritance(),
    vue()
  ]
});

Gülsen Keskin · Accepted Answer · 2023-12-04 06:58:11Z

0

You should not use defineAsyncComponent when configuring route components with Vue Router.Vue Router supports a similar mechanism for asynchronously loading route components, known as lazy loading. Despite the similarities, this feature is distinct from Vue's support for async components. You can read more about this in the Lazy Loading Routes section of the Vue Router documentation.

https://router.vuejs.org/guide/advanced/lazy-loading.html

answered Dec 4, 2023 at 6:58

Gülsen Keskin

86015 silver badges31 bronze badges

Collectives™ on Stack Overflow

Disable attribute inheritance globally in Vue3

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related