Directives
Use directives when you need interaction behavior at element level without creating custom logic for each component.
Before you start
- NuvexUI plugin is already installed in your app.
- You need element-level interaction behavior, not a new component abstraction.
- You want click, focus, and ripple behavior to stay consistent across your UI.
Overview
NuvexUI exports three directives. Pick one based on the interaction trigger and the UX behavior you need.
v-ripple
Adds pointer and keyboard ripple feedback on interactive elements.
v-click-outside
Runs a handler when the user clicks outside a target boundary.
v-focus-outside
Runs a handler when focus leaves the current boundary.
Ripple
Use ripple to show immediate visual feedback in buttons, list rows, and other actionable surfaces.
Set keyboard: true when the element is keyboard actionable so keyboard and pointer users get the same feedback.
Button with ripple options
Click Outside
Use click outside to close transient UI such as menus, popovers, or quick actions when the user interacts elsewhere.
Close dropdown when user clicks outside
Keep trigger button inside include list
Focus Outside
Use focus outside when behavior must react to focus transitions, especially for keyboard flows and delayed validation.
Validate field group when focus leaves it
Keep teleported helper inside focus boundary
Recommended next steps
Continue with the page that matches what you need next after applying directives.