v-bind="$attrs" on components requiring some props

[CamilleDrapier]

When building a wrapper components around another component from an external library (in my case quasar), and using v-bind="$attr", I usually get a warning saying that the component I am trying to use is missing a required props

for example:

q-btn-toggle(
  v-bind="$attrs"
  flat
)

(property) QBtnToggle: GlobalComponentConstructor<QBtnToggleProps, QBtnToggleSlots>
Type '{ flat: true; }' is not assignable to type 'ComponentProps<GlobalComponentConstructor<QBtnToggleProps, QBtnToggleSlots>>'.
  Property 'modelValue' is missing in type '{ flat: true; }' but required in type 'QBtnToggleProps'.ts(2322)

Of course, I am passing the v-model from the top component call, and everything works in practice, but still I am still seeing this warning.

One solution would be to declare a modelValue prop in my wrapper Component, and declare it as required, then have a computed property that either reads the props or emits update:model-value, and use this computed to pass to a new v-model on the child component; but this is quite verbose. The reason why I would like to use v-bind="$attrs" is to avoid the boiler-plate code.

Maybe I'm asking a bit much, but, is there a known alternative for making components that have v-bind="$attrs" assume that all non-explicitly passed props are satisfied, and in the other hand make a wrapper component inherit of the required/typed props from the component on which it is applying a v-bind="$attrs" (This is probably a very difficult feature)?

Or, would ignoring the error/warning be preferable for this kind of cases, for now? Sorry for asking this here as well, but is there an easy way to disable vue-tsc error in PUG templates, I tried //- @ts-ignore, but it did not seem to be effective? (I searched a bit around and could not find many examples either)

[johnsoncodehk]

Does q-btn-toggle(v-bind="($attrs as any)") fit your use case?

[CamilleDrapier]

Thank you very much for your answer! (sorry for my late follow-up)

I do not think is can write TS in the PUG template, so your suggestion gives me some syntax errors (such as Parsing error: Unexpected token as vue/no-parsing-error) - Or am I missing something that would allow this?

But it gave me the idea to try to circumvent it by doing either:

  computed: {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    anyAttrs(): any {
      return this.$attrs;
    },
  },

or to following for composition/setup:

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const anyAttrs: any = useAttrs();

And then just use v-bind="anyAttrs". It is a bit verbose, but probably not as much as passing the model-value explicitly.

[johnsoncodehk]

You can also override the type of $attr.

// env.d.ts
declare module 'vue' {
    interface ComponentCustomProperties {
        $attrs: any;
    }
}

export { };

[CamilleDrapier]

Thanks, I haven't thought about this I think it would work as well nicely.

Since I still have many uses of v-bind=$attrs that do not require any changes, I think I would prefer not changing the type definition even if it is shorter in the end. But Maybe it could be helpful in the future!

---

Sort of unrelated but just in case someone comes here there seems to also be something similar that need to be done for name of slots when injecting any slot that I solved in a similar way:

  template(
    v-for="(_, name) of $slots"
    #[someName(name)]="data"
  )
    slot(
      :name="name"
      v-bind="data || {}"
    )

...

  methods: {
    someName(name: string | number) {
      return name;
    },
  },

This have the following problem whenusing name directly in the template.

Element implicitly has an 'any' type because expression of type 'string | number' can't be used to index type '{ default: unknown; loading: unknown; }'.
  No index signature with a parameter of type 'string' was found on type '{ default: unknown; loading: unknown; }'.ts(7053)