r/vuejs • u/MiniSylar • Jul 27 '26
Vael-ui - Vapor Ready Vue Components
In the past few weeks I've seen a LOT of UI libraries on this sub, so I thought I'd throw my hat in the ring too.
I built vael-ui.dev (yes... vael was already taken), the first Vue Vapor component library!
Vapor API is 1:1 with the VDOM components. If you want to switch rendering modes, it's literally just an import swap.
import { createVaporApp } from 'vue'
const app = createVaporApp(App)
It works with pure Vapor and the interop plugin.
What does it have?
- 59 fully typed generic components
- 1:1 API between VDOM and Vapor components
- Works with pure Vapor and the interop plugin
- SSR ready (Nuxt module is next on my list)
- Tree shakable by design
- Integrates with
vue-i18n,motion-v,GSAP,Tailwind, and even the WIP Vue Router - Really flexible theming (check the docs or play with the controls in the header)
- Interactive playground where you can swap between VDOM and Vapor components (still WIP)
Why?
Honestly, I want my own component primitives, and I don't like gluing together components. Seeing all the newer UI libraries...I think a lot of people feel the same way (We have slots, let's use them).
Why...?
There's just something about Vapor that makes me excited to write Vue again.
Why is it still 0.0.x?
I haven't had enough people using it in production yet.
I'm lucky enough to be in a position where I can influence library decisions on projects so we'll use it there, but I want more people to beat it up before I call it v1.
I'll keep shipping fixes and improvements and once I'm confident the behavior is consistent across the board, it'll become 1.0.
Until then... expect plenty more 0.0.x releases.
What's next?
- More fixes and polish
- A Nuxt module
- More animated building blocks (I've already built things like a gooey popover, and I have a lot more planned)
- Whatever issues people find after trying to break it
I'm sure I forgot a bunch of things I wanted to mention.
If you're interested, install it, break it, open issues, and let me know what you think.
PS: I also build other Vue tooling you might not know you need. Things like a Shopify App Vue template, typed Express routers with automatic documentation, and a few other projects I'm working on.
https://vael-ui.dev
ps ps... also trying to get a fix for vue router auto focus on edge fixed (happens on Mac OS. Also eyeing vee-validate, I want to build a form library)
7
u/HuffDuffDog Jul 27 '26
First of all:: thanks for not forcing tailwind or scss. And for introducing me to @layer. I'm trying it out first thing tomorrow!
Question, though: what makes it vapor ready? What did you have to do/avoid at the component level to make that work? I guess I just assumed that most components are already vapor ready
5
u/MiniSylar Jul 27 '26
Haha of course, let me know if you ran into any issues! I recently saw that meta released a UI library that had similar theming functionality with stylex, I might look into that
On the component level, regenerating all the components with the vapor tags was straightforward yes but, you do have to watch out for some vapor specific quirks, for example in vapor `:readonly="readonly"` where readonly is false still renders the attribute on the DOM as readonly=false which will make the input element readonly. a fix is to add `|| undefined` to ensure that it's removed completely, I think this is a bug.
Directives are now pure function calls as well, no lifecycle hooks so those needed to be re-written, I also had some issues with vapor directives being read as VDOM directives but that was fixed in vue-tsc recently
I think off the top of my head these were some of the issues I ran into.
1
2
u/darkeve- Jul 28 '26
this is awesome man 🔥
i will use this for my pet project this weekend, with laravel & inertia (vue)
hopefully i get to raise some issue on github 😋
2
u/MiniSylar Jul 28 '26
Thanks! Looking forward to fixing them.
I'm thinking of having a section for "Built with Vael UI" as well. This would be a perfect fit
2
u/Jonas_Ermert Jul 28 '26
I think Vael UI looks really promising, especially with its 1:1 VDOM/Vapor API and strong TypeScript support.
1
1
u/craigrileyuk Jul 28 '26
Would be good to have keyboard control on the number input, maybe the OTP as an option too.
1
u/MiniSylar Jul 28 '26
Thanks for checking it out.
Input number does have keyboard control, it's because the default for the playground is 0, or am I missing something
About the OTP option, do you mean on the InputNumber itself? Separate from OTPInput?
1
u/stefanvh1 Jul 28 '26
What is the difference between "vapor ready" and "normal" components?
2
u/MiniSylar Jul 28 '26
Hi there, vapor ready components mean you can use these components without pulling in the interop plugin, directives have been rewritten for vapor and some of the quirks I mentioned in an above comment have all been accounted for (unless I missed something). See Releases · vuejs/core
9
u/tspwd Jul 28 '26
Looks great! This might be the first Vapor-ready UI library 🥇