Stop Adding Components for Everything — Try This Instead (Vue)

bUxEE — Sat, 11 Apr 2026 11:51:09 +0000

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)?

DEV Community: bUxEE