Vue transparently wrap component, modify some props

Question

I have a Vue component that's used multiple times with identical props. I'd like to keep the code DRY by always adding these props in a single place.

Example:

<wrapped-foo bar=1 />

should be extended to

<real-foo bar=1 spam=eggs />

I'm trying to solve this using a wrapper component that takes the props given, modifies them, and passes them to the wrapped component. There are multiple tutorials on how to do this, e.g.

• vue wrap another component, passing props and events
• https://v2.vuejs.org/v2/guide/render-function.html#Functional-Components

It looks like all of the solutions don't pass at least one of props, class, style, event listeners, other attributes, etc. to the wrapped component. Is there a solution that keeps all of these intact?

Answer 1

You can do it with Vue Mixins: https://v2.vuejs.org/v2/guide/mixins.html

Or simply with inheritance:

Example:

const wrappedFoo = Vue.component('real-foo').extend({
  props: {
    spam: ...
  }
})
Vue.component('wrapped-foo', wrappedFoo)