How to creatin Vue wrapper components with type support

[Nik3iw]

Hi. In my web apps, I create a lot of wrapper composables and components. I've done this in React, but I have a challenge doing it in Vue.
In this example, I need to create an input component and add some props to it. Like name, a regex for masking, etc., but I also need to be able to add attributes to components inside the wrapper:

<script setup lang="ts">
import type { FormFieldProps, InputProps } from "@nuxt/ui";

interface Props extends Omit<FormFieldProps, "name"> {
  name: string;
  inputDir?: "ltr" | "rtl";
  inputProps?: InputProps;
  mask?: string;
}

const { name, inputDir, inputProps, ...fieldProps } = defineProps<Props>();

const model = defineModel<string>({ required: true });
</script>

<template>
  <UFormField :name="name" v-bind="fieldProps">
    <UInput v-model="model" v-bind="inputProps" :dir="inputDir" :v-maska="mask" />
  </UFormField>
</template>

When I use this component named "FormInputMasked", I can add a "label" attribute with TypeScript support, and it will go to UFormField. With inputProps, I can also add props to UInput. (This is a sample; maybe the code is wrong)
it's ok, except Vue parses the props! I mean, my prop is just a TypeScript type, but it seems Vue parses TypeScript types and passes a default value for every missing prop!
So, for example, inputProps.type is not undefined when I don't pass any prop to the main component. To me, it is a very weird approach, but how can I reach my goal?

It's like I add a wrapper but don't touch any nested components' behaviour, just adding some functionality to them.

I know I can use "useAttrs" and get UFormField props from there, but there is no way to define the type of fallthrough attributes for "FormInputMasked ", and also this does not solve the other prop, which is "inputProps".
What should I do then? Maybe go with a JSX template? thanks.

[lMysticl]

defineProps<Props>() infers the runtime props from the type, but it does not create values for every optional field inside InputProps.

Here inputProps is one optional object prop. If it is omitted, the wrapper should receive undefined; v-bind="inputProps" is the normal forwarding pattern. Defaults such as UInput's type come from UInput, not from the TypeScript interface.

For the wrapper, keep inputProps?: InputProps, use defineOptions({ inheritAttrs: false }), and forward $attrs/useAttrs() to UFormField. Fallthrough attributes are runtime forwarding only, so label needs to be declared in the wrapper type if you want TypeScript completion for it.

Type-based props · fallthrough attributes

[aymenhmaidiwastaken]

Vue isn't filling in your optional props — but there's a detail that makes it look exactly like it is.

On 3.5.40, a wrapper declaring name, inputDir?, inputProps? and mask?, rendered with only name passed:

props.inputProps       = undefined
props.inputDir         = undefined
props.mask             = undefined
props.inputProps?.type = undefined

'inputProps' in props  = true      <-- this is the confusing part

Every omitted prop is undefined. Nothing was invented from the TypeScript types. But the key is present on the props object, because defineProps<Props>() declares all four props at runtime — declared and unset, not absent. So 'inputProps' in props is true, Object.keys(props) includes it, and spreading props gives you inputProps: undefined rather than nothing. If you were checking with in, or spreading, that's very likely what you were seeing.

The type value you noticed almost certainly isn't coming from your wrapper at all. UInput declares its own default for type, and that default applies whenever the prop reaches it unset — which is exactly what happens when you forward an absent inputProps. Same shape, minimal repro:

rendered = <div><i>child.type=text</i></div>

Wrapper passed {} to the child; the child fell back to its own default: 'text'. The value appears one level below where you're looking for it, so it reads as the wrapper having created it.

Which is good news for the pattern you want, because v-bind="inputProps" with undefined is a no-op — the child's own defaults apply untouched. Your wrapper is already doing the "don't touch nested component behaviour" thing you were after; it just didn't look like it.

The one piece that genuinely doesn't work the way you'd like is typing fallthrough attributes. $attrs is runtime-only forwarding and there's no way to give it a type, so if you want label to autocomplete on FormInputMasked it has to be declared. Extending the child's prop type is usually less painful than restating it:

import type { FormFieldProps, InputProps } from '@nuxt/ui'

interface Props extends /* @vue-ignore */ Omit<FormFieldProps, 'name'> {
  name: string
  inputDir?: 'ltr' | 'rtl'
  inputProps?: InputProps
  mask?: string
}

/* @vue-ignore */ tells the compiler not to turn the extended interface into runtime prop declarations. Compiling both versions shows the difference:

// without /* @vue-ignore */
props: {
  name:       { type: String,  required: true  },
  inputProps: { type: Object,  required: false },
  label:      { type: String,  required: false },   // from FormFieldProps
  help:       { type: String,  required: false },
  required:   { type: Boolean, required: false }
}

// with /* @vue-ignore */
props: {
  name:       { type: String, required: true  },
  inputProps: { type: Object, required: false }
}

So you keep TypeScript completion for label and friends, without Vue declaring every field of FormFieldProps as a real prop — which matters here, because a declared-but-unset prop is the exact thing that confused the picture above. Pair it with defineOptions({ inheritAttrs: false }) and an explicit v-bind="$attrs" on UFormField so nothing lands on the wrapper's root element by accident.

I wouldn't reach for JSX for this. The friction you hit was a diagnosis problem rather than a limitation of SFCs, and you'd give up the template type-checking that's doing real work in a wrapper like this.

[Nik3iw]

Thank you for contributing to the discussion.
I also found out about the default value behaviour of Vue, which is different for boolean values, and it is set to false rather than undefined. And this is responsible for the error text not showing up when the schema is invalid.

[lMysticl]

Yes — that is the exception I missed in my first reply. Vue casts an absent optional Boolean prop to false; other absent optional props remain undefined. The props documentation calls this out explicitly.

Because type-based defineProps<Props>() generates runtime declarations, Boolean fields inherited from FormFieldProps can be converted before they are forwarded to UFormField. If absence must remain distinct from false, set default: undefined for the affected prop, or keep the forwarded FormFieldProps in $attrs instead of declaring them as wrapper runtime props.

[aymenhmaidiwastaken]

That's the missing piece, and it's worth spelling out because it explains why the /* @vue-ignore */ bit matters rather than being a nicety.

Boolean is the only type Vue does this for. Same component, four optional props, nothing passed:

aString   = undefined
aBoolean  = false        <-- the odd one out
anObject  = undefined
aNumber   = undefined

That's Vue's boolean casting: a prop declared type: Boolean with no default is absent-means-false, so presence in the DOM (<Comp required />) can mean true. Useful for a leaf component, actively harmful in a wrapper — because "the user didn't pass this" and "the user passed false" stop being distinguishable.

And that's exactly your error-text symptom. A wrapper that declares the boolean forwards a real false downstream:

-- wrapper DECLARES the boolean prop --
wrapper sees required = false
<i>child.required=false</i>

-- wrapper does NOT declare it (fallthrough) --
wrapper attrs = {}
<i>child.required=undefined</i>

In the first case UFormField never sees "unset" — it sees an explicit false, which overrides whatever default it would have picked, and the validation-driven error text never renders. In the second, the prop simply isn't there and the child's own default applies.

Which is what /* @vue-ignore */ buys you: the prop is never declared at runtime, so there's nothing to cast.

// without /* @vue-ignore */
{ name:     { type: String,  required: true  },
  label:    { type: String,  required: false },
  required: { type: Boolean, required: false } }   // <-- becomes false when absent

// with /* @vue-ignore */
{ name: { type: String, required: true } }

The extended interface stays visible to TypeScript for completion, and required reaches UFormField through $attrs only when someone actually passes it.

If you ever do need a boolean declared on the wrapper — say you want it in the prop types for documentation — give it an explicit default: undefined, which opts out of the casting:

const props = withDefaults(defineProps<Props>(), { required: undefined })

Then absent stays absent and the child's default survives. Worth knowing about, because it's the one case where adding a default makes a prop less defaulted rather than more.