Most Vue libraries solve problems with more components.
Need a loader? → add a component
Need selection? → wrap everything
Need scroll tracking? → install a plugin + wire state
After a while, your UI becomes a tree of wrappers and glue code.
💡 What if behavior didn’t need components?
I’ve been experimenting with a different approach:
👉 using directives as a behavior layer
Instead of adding structure, you attach behavior directly to elements.
⚡ Example
No wrappers. No extra components. No layout changes.
🧠 Why directives?
Directives:
work at the DOM level
don’t affect component structure
are composable by nature
integrate with any UI library
They’re perfect for:
👉 UI behavior
🔥 What I built: Dirigo
I started building a small library around this idea:
It’s a collection of advanced Vue directives focused on real-world UX.
✨ Some examples
Skeleton loader (no wrapper)
Drag-to-select (like desktop)
Scroll spy (that actually feels right)
Most scroll-spy implementations trigger when the top hits 0.
This one activates when the section reaches ~40% of the viewport —
which feels much closer to what the user is actually reading.
🧩 The idea
Instead of:
components → structure
composables → logic
👉 directives can become:
behavior primitives
🤔 When this works well
dashboards
admin panels
editors
complex UI interactions
Anywhere you’d normally write a lot of UI glue code.
⚠️ Trade-offs
This approach isn’t for everything:
not ideal for purely declarative UI
requires careful implementation (performance matters)
less common pattern → some learning curve
🚀 Playground
You can try everything live here:
💬 Feedback
Still early, and I’m exploring the direction.
Would love to hear:
does this pattern make sense to you?
where would you use it (or not)?
Top comments (0)