Expose Reka UI `useForward*` utilities
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.9k
- Forks
- 1.1k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 57
Description
Package
v4.x
Description
Please consider exposing Reka UI's useForward* utilities ( such as useForwardProps and useForwardPropsAndEmits ).
When creating reusable components by wrapping multiple NuxtUI components, it feels inefficient to either implement custom logic to bypass Vue 3's BooleanCasting or add reka-ui as a direct dependency just to access these specific functions.
Example:
<script lang="ts" setup>
import type { FormFieldProps, SelectProps } from "@nuxt/ui";
type MySelectProps = FormFieldProps & SelectProps;
const props = defineProps<MySelectProps>()
const forwarded = useForwardProps(props)
</script>
<template>
<UFormField v-bind="forwarded">
<USelect v-bind="{...forwarded, ...$attrs}" />
</UFormField>
</template>
Note: In practice, you may need to resolve conflicting props, but we'll ignore that for now.
Additional context
Example Scenario:
Suppose I want to create a composite component, , which combines and to provide both form validation and selection logic in one place.
My primary reason for using in this wrapper is to leverage its UI features—such as labels, hints, and description slots—rather than just validation logic.
By wrapping these into a single MySelect component, I can ensure a consistent UI/UX across the application. However, this architectural choice makes the "Boolean Casting" issue even more prominent, as I need to pass through all the functional props of the inner input component while maintaining the layout props of the FormField.
<MySelect :items="items" orientation="vertical" v-model="value" />
The Problem:
While users expect the component to work as shown above, Vue 3’s Boolean Casting behavior causes issues. Because the open prop (and other boolean props) isn't explicitly passed to MySelect, it is implicitly set to false. This prevents the internal from managing its own state correctly, often breaking the component's default behavior.
Current Workarounds:
To avoid this, we are currently forced to:
-
Manually set open to undefined within MySelect.
-
Or, manually manage the open state inside the wrapper component.
These approaches are far from ideal. It would be much more efficient if we could create transparent wrappers with minimal boilerplate, allowing us to leverage NuxtUI’s built-in state management (like how USelect self-manages its open state) without redundant code.
Developer Experience (DX):
Furthermore, handling multiple boolean props—some defaulting to true and others to false—is quite cumbersome. Having to constantly worry about Boolean Casting overriding true defaults is a significant mental burden that could be easily solved by exposing Reka UI’s utilities.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating Nuxt UI's public composable exports and its existing Reka UI integration, then compare the available useForward* utilities with the package's export conventions. Done means the requested utilities can be imported from Nuxt UI for transparent wrapper components without requiring a direct reka-ui dependency.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 58/100