Login

r/vuejs

Akaza UI v0.0.3-alpha is out — Vue-first headless primitives that actually feels like Vue
▲ 11 r/vuejs+1 crossposts

Akaza UI v0.0.3-alpha is out — Vue-first headless primitives that actually feels like Vue

Hi Everyone,

About 3 months ago, I shared Akaza UI here — a headless component library for Vue built around a more Vue-native API.

Since then, I’ve been quietly testing it in a few of my own projects, taking feedback from fellow developers, and refining the API before pushing the next update.

v0.0.3-alpha is now released.

The main focus of this release is expanding Akaza UI beyond basic primitives into more form/control-focused components.

New primitives added:

  • Field
  • Fieldset
  • Form
  • Input
  • CheckboxGroup
  • Select
  • NumberField
  • Slider
  • ToggleGroup
  • Meter

Akaza UI now has 28 headless primitives in total.

The styling system has also been cleaned up across components:

  • ui.root for component roots where applicable
  • stable akaza-* semantic classes
  • data-akaza-state for primary state
  • granular data-akaza-* attributes for form/control state
  • data-akaza-side for floating placement

The idea is still the same: fully unstyled Vue primitives that use named slots and a ui prop instead of forcing everything into a sub-component tree.

So you can bring your own styling with Tailwind, UnoCSS, plain CSS, or whatever fits your project.

Docs have also been improved with anatomy, examples, props, events, slots, and styling hooks.

Links:

Docs: https://akaza-ui.com
GitHub: https://github.com/igris-labs/akaza-ui
Install: pnpm add akaza-ui

Would love feedback from Vue/Nuxt developers, especially if you’ve worked with Reka UI, Headless UI, Radix-style APIs, or Nuxt UI and have opinions on this slot-first + ui prop approach.

PS: I'm also updating Inspira UI with new components and improving website experience.

u/AlternativePie7409 — 9 hours ago
▲ 4 r/vuejs+1 crossposts

I built a structure-first form library for Vue

Hey r/vuejs,

I wanted to share DuploJS Form, a form library focused on composing Vue forms as a typed structure.

The idea is not to replace Vue patterns, force a design system, or turn forms into a black-box builder. The goal is simpler: keep the form structure, layouts, validation, and rendering templates clearly separated while still letting you fully control the UI.

It is mainly useful when forms start growing beyond a few isolated inputs: repeated layouts, nested fields, shared validation logic, reusable templates, and consistent rendering across a project.

The library is still young, so I would really appreciate feedback from Vue developers, especially on the API, the mental model, and whether the abstraction feels natural in real projects.

Docs here: https://form.duplojs.dev/

u/Emergency-Sundae-306 — 21 hours ago
▲ 11 r/vuejs

I built a free online UNO No Mercy game in Vuejs - play in your browser, no download, no login

I couldn't find a digital version of UNO No Mercy anywhere, so I built one. Every brutal rule from the physical deck is in there.

Play it: uno-no-mercy.com

What's in it:

  • Full No Mercy rules - Draw 6, Draw 10, Skip Everyone, Discard All, Color Roulette, hand swaps on 7, hand rotations on 0, elimination at 25 cards
  • Real-time multiplayer - create a room, share the code, play with 2-10 friends
  • VS Bot - solo mode against an AI opponent
  • No login required - click Play Now and you're in a game in seconds
  • Works on phone - fully playable on mobile, tablet, and desktop
  • Player stats - track your win rate, streaks, and rank up from Recruit to No Mercy King
  • Share your stats - downloadable stat card for Twitter/WhatsApp flexing

Draw cards stack on each other. Get to 25 cards and you're eliminated. No mercy.

It's also open source if anyone wants to contribute or host their own: github.com/alii13/Uno-no-mercy

Would love to hear what you think - especially if you find any rules I got wrong or have suggestions for new features.

https://preview.redd.it/ynl6koefbebh1.png?width=3006&format=png&auto=webp&s=25b76411f0ada8f09ab3fa6cbccfe096e394facd

https://preview.redd.it/zmpwubakbebh1.png?width=3008&format=png&auto=webp&s=3c0df2892945a8738782f8763976ac5f50ac6c8d

reddit.com
u/Playful-Figure9632 — 2 days ago
▲ 47 r/vuejs+2 crossposts

nxui now has all 29 Paper Shaders as Vue/Nuxt components (they just went fully open source)

Paper Shaders (the WebGL shader library from paper.design, 1.7M npm downloads/month) dropped their restrictive license this week — it's now plain Apache-2.0, do whatever you like.

I'd been porting them to Vue 3 for nxui, so with the license cleared: all 29 shaders are now available as copy-paste Vue components — mesh gradient, liquid metal, god rays, dithering, metaballs, neuro noise, etc. Typed props, live playgrounds, installable via the shadcn-vue CLI. Works with Nuxt 4 out of the box (SSR-safe mounts).

Demos: https://nxui.geoql.in/docs/paper-shaders/paper-mesh-gradient

Repo (MIT, 210+ components total): https://github.com/vinayakkulkarni/nxui

Feedback welcome — especially on the WebGL/SSR handling.

u/vinayak-kulkarni — 4 days ago
▲ 145 r/vuejs+2 crossposts

Domternal: a rich text editor with first-class Angular components (signals, OnPush, zoneless-ready)

Domternal is an open-source (MIT) rich text editor built on ProseMirror, with first-class Angular components.

The clip shows one editor core as two surfaces: a Notion-style block editor and a classic toolbar editor.

The Angular part ("@domternal/angular")

- 6 standalone components (no NgModule): editor, toolbar, bubble menu, floating menu, emoji picker, Notion color picker
- Signals-driven, OnPush, zoneless-ready (the demo runs on zoneless Angular 21)
- The editor is a ControlValueAccessor, so it drops straight into ngModel or a reactive FormControl; outputFormat="json" emits JSON
- Toolbar and menus auto-render from whatever extensions you load, so there is no manual button wiring
- Works from Angular 17.1 through 21

Features

Notion-style blocks (drag handle, slash menu, smart paste, floating table of contents), tables, LaTeX math, images, @mentions, emoji, collapsible details, syntax-highlighted code blocks. 126 chainable commands, 70+ nodes, marks and extensions, all tree-shakeable. Light and dark theme via 160+ CSS variables. getHTML({ styled: true }) inlines the CSS so exported content still renders in an email client or a CMS.

Under the hood

Built on ProseMirror, strict TypeScript throughout. About 117 KB gzipped including ProseMirror. The same Playwright e2e suite runs green across all four framework wrappers, on top of 4,400+ unit tests.

It is MIT and currently at v0.11.2. I would love your feedback.

Site: https://domternal.dev
GitHub: https://github.com/domternal/domternal

u/Thomas_17188 — 5 days ago
▲ 1 r/vuejs

use vue3-sfc-loader with typescript

I have "screens" in my app (basically vue file).

Different clients will have their own version of screens. So instead of pre-compiling them into application i want to load them dynamically based on the login.

So want to use vue3-sfc-loader but not sure how to use it with typescript.

Is it possible? Or should i somehow compile/convert .vue file with typescript to .vue file with JavaScript and then feed to vue3-sfc-loader? If yes, then how can i convert .vue(ts) to .vue(js)?

reddit.com
u/gevorgter — 4 days ago
▲ 2 r/vuejs+1 crossposts

Headless toast rendering in Vue turned out way more powerful than I expected

Seven months ago I posted Toastflow here and got a ton of great feedback.

The biggest thing I wanted to improve wasn't adding more options or animations.

I wanted the renderer to get out of the way completely.

🔥 The New Era

The new headless slot exposes the entire UI layer, but you decide what gets rendered.

Instead of being locked into a predefined UI, you just use Toastflow as the engine and build your own layout on top of it.

Same system underneath.
Completely different UI.

❓ What This Means

You’re not styling a toast anymore.

You’re building your own notification system.

✨ Examples

Headless Slot - Full Examples

🔗 Links:

👨‍💻 GitHub: https://github.com/adrianjanocko/toastflow
🎮 Playground & docs: https://www.toastflow.top/ & https://www.toastflow.top/docs

🔷 NPM (Vue): https://www.npmjs.com/package/vue-toastflow
🔷 NPM (Nuxt): https://www.npmjs.com/package/nuxt-toastflow
🔷 NPM (Core): https://www.npmjs.com/package/toastflow-core

u/Ill_Swan_4265 — 3 days ago
▲ 416 r/vuejs+1 crossposts

PrimeVue drops MIT license, paywalls Chart & Editor, and requires a license to upgrade to v5 ($599/dev for first year, free only for small teams)

primeui.dev
u/Perfect_Cry8753 — 8 days ago
▲ 8 r/vuejs+1 crossposts

Vue with unimport plugins or Nuxt?

Hey guys. Have a very big project (15+ nuxt layers) that is kinda insane to build - dev server is very slow, build takes around 15gb of RAM, and there's no ETA on nuxt 5 to adopt rolldown. also tests are slow because of nuxt/test-utils, which bring a lot of harness.

application is SPA, so im thinking of migrating it on clean vite + nitro (v3). i want to make tests faster (since no nuxt/test-utils) and optimize my build and dev server

is there any caveats i should be looking out for?

reddit.com
u/AmbassadorUnhappy176 — 6 days ago
▲ 23 r/vuejs+2 crossposts

GolemUI - The new Vue paradigm for forms

Hi Reddit,

After a decade of fighting complex form requirements, state management nightmares, and rebuilding the exact same inputs across different frameworks, our team of three finally built the library we always wished we had.

Meet GolemUI an Open Source headless library that turns your entire form into a single, plain data definition. One JSON definition renders as native components in Vue, React, Angular, Lit, or Vanilla JS. Because it's just data, you can store it in a DB, version it, and have an LLM generate it as validated JSON instead of code.

We ship a deterministic MCP that grounds and validates the model's output, plus 25+ headless widgets you style with CSS variables or your own kit.

You can find more information here:
https://golemui.com

Happy to hear any feedback from you and answer any question!

golemui.com
u/elecash — 7 days ago
▲ 0 r/vuejs

[Hiring] Part-Time Vue/Full-Stack TypeScript Developer — AI-First Workflow (~$1,000/month retainer, remote, US only)

I run a small software consultancy and I'm looking for a reliable part-time developer to help me deliver monthly feature work for an established client project.

The project: A production platform for a client in the e-commerce/inventory space. The primary frontend is Vue 3 / Nuxt 4, in a TypeScript Nx monorepo alongside a React/Next.js app and a NestJS backend, with Postgres/Supabase, deployed on Vercel and AWS. Mature codebase with docs, CI, and an extensive test suite already in place.

The arrangement:

- Fixed monthly retainer of ~$1,000/month, ongoing month-to-month. Payment schedule to be discussed.

- US-based workers only. Payment in USD via standard bank transfer/ACH — no crypto

- You work from a prioritized task board during the first three weeks of each month; I use the final week for review, polish, and delivery

- I handle all client communication and project management — you never talk to the client. You pick up well-defined tasks, ship PRs, and communicate with me

What I'm looking for:

— 3–5+ years of professional full-stack experience — strong Vue 3 (Composition API) plus Node/TypeScript backend; React familiarity is a bonus since you'll occasionally touch the Next.js app - strong reliance on AI assisted coding makes the framework experience less important as long as you understand what is being architected and built.

— Heavy, fluent use of AI coding tools (Claude Code, Cursor, Copilot, etc.). This is not optional — the economics of this role assume AI-accelerated delivery. I want someone who already works this way, not someone curious about trying it

- Strong async habits: clear PR descriptions, self-verifying work (builds pass, tests pass) before handoff

- Comfortable ramping into an existing codebase from documentation

Nice to have: Nuxt server routes/Nitro, Supabase/Postgres, Prisma, Nx monorepos, third-party API integrations.

To apply: Fill out this short form: Google Form. Please don't DM your resume — I'm reviewing applications through the form only. Applications from outside the US won't be considered.

Edit: a handful of comments have lead me to believe people are assuming I am asking for $1,000/month for 20 hours a week. That is not the case, this is more like like 20 hours a month with flexibility based on hourly rate which is asked for in the google form.

docs.google.com
u/SnooRobots8750 — 5 days ago
▲ 51 r/vuejs+6 crossposts

I built a canvas-based timeline visualisation library with virtualised rendering in Typescript

I wanted a library like vis.js but needed it canvas-based for server-side rendering without a headless browser in node, so I built one. I'd love to get some feedback.

tempis.dev
u/Material-Gold7483 — 8 days ago
▲ 17 r/vuejs+1 crossposts

Full application designed with Mood UI

I am building a SaaS for business owners across any industry where appointment scheduling is the core feature. I developed Mood UI to avoid relying on external libraries; it has been downloaded a few thousand times via npm, in case you’d like to try it out.

Is available for both, Vue and Nuxt.

It has premium features for free such calendar functionalities:
Month View
Week View
Day View
Agenda
Scheduler

You can check the library documentation on: https://mood-ui.com/
You can use it via npm: https://www.npmjs.com/package/mood-ui

Components used for the onboarding (video):
https://mood-ui.com/composables/use-color-mode
https://mood-ui.com/composables/use-modo-config
https://mood-ui.com/composables/use-local-storage
https://mood-ui.com/data-display/card
https://mood-ui.com/forms/input
https://mood-ui.com/forms/textarea
https://mood-ui.com/forms/number-input
https://mood-ui.com/forms/combobox
https://mood-ui.com/forms/color-picker
https://mood-ui.com/forms/phone-input
https://mood-ui.com/forms/switch
https://mood-ui.com/forms/checkbox
https://mood-ui.com/navigation/stepper
https://mood-ui.com/feedback/tooltip
https://mood-ui.com/forms/button
https://mood-ui.com/feedback/progress-bar

u/MaintenanceOld2216 — 5 days ago
▲ 42 r/vuejs

I built an open-source alternative to Figma's official MCP server

Hi everyone,

I've been working on a free, open-source tool called Figwright as an alternative to Figma's official MCP server, and I thought some of you might find it useful.

The biggest pain point for me was the usage limits. The official MCP server only includes 6 free requests per month. If you need more, you have to purchase a Dev seat, and even then there are still daily request limits (around 200–600 requests depending on the plan). Figwright runs entirely on your local machine, so there are no usage limits and no subscription fees.

Another thing I wanted to improve was making the generated code actually fit an existing project. Instead of producing generic output, Figwright reads your current tech stack and reuses your existing components, design tokens, icons, and project conventions. The generated code is meant to integrate into your codebase instead of becoming another template that needs rewriting. Since everything runs locally, your Figma files never leave your machine.

It's also bidirectional. The official MCP server only reads Figma into code, while Figwright can also write back to the canvas. You can ask your AI agent to create a pricing section, build an Auto Layout hierarchy, or add new UI directly inside Figma, and it'll actually construct the design for you.

One feature I personally like is that it isn't a black box. The plugin includes an Activity tab where you can inspect every MCP tool call along with the raw payload sent to the AI, so it's easy to see exactly what context was shared. If something goes wrong, the Debug tab can generate a complete diagnostics bundle that you can paste into a GitHub issue, making bugs much easier to reproduce.

It works with AI coding agents like Claude Code, Cursor, and other MCP-compatible clients.

If you're interested, give it a try on a real project. Feedback, bug reports, feature requests, and GitHub stars are all greatly appreciated.

GitHub:
https://github.com/awdr74100/figwright

u/Strong_District_9922 — 6 days ago
▲ 17 r/vuejs+3 crossposts

Would a PrimeVue → Vuetify compatibility layer make migration easier?

After the recent PrimeVue announcement, I've seen quite a few discussions from developers exploring alternatives.

I'm a contributor working closely with the Vuetify ecosystem, and I'm exploring an open-source project to reduce the migration effort from PrimeVue to Vuetify.

The current idea includes:

  • Aura-inspired theme (WIP - Img-1)
  • PrimeVue component aliases (Img-2)
  • Props mapping (PrimeVue ↔ Vuetify)
  • Migration guide

The goal is not full compatibility.

The goal is reducing migration friction.

I'm trying to validate whether this solves a real problem before investing a lot of time into it.

If you're considering moving away from PrimeVue:

  • What's your biggest blocker?
  • Which components would you need first?
  • Would something like this actually help?

I'd really appreciate honest feedback.

https://preview.redd.it/ksodszx1vfah1.png?width=2424&format=png&auto=webp&s=a2c4f0ac906391fccdcbd2b7ab91d1ccd0258159

https://preview.redd.it/oa32oyx1vfah1.jpg?width=2140&format=pjpg&auto=webp&s=2fefeb3e9be59bb3aae4c58b44d0631c062a5b17

reddit.com
u/juanjcardona — 7 days ago
▲ 4 r/vuejs

Is it safe to use early exit OR expressions in templates when it isn't safe in computeds?

Since computeds are said to shadow the second variable since the first one returned early, eg:

// bad
const canShow = computed(() => isSetA.value || isSetB.value);

// good
const canShow = computed(() => {
  const a = isSetA.value;
  const b = isSetB.value;
  return a || b;
});

Do templates suffer the same problem?

<div :class={ canShow: isSetA || isSetB } />
reddit.com
u/aliassuck — 7 days ago
▲ 3 r/vuejs

Going 'Back' on SPA's

I use vuejs for my web apps. Users go to mydomain.com, they login, and then they are sent to mydomain.com/application.

How do people handle the back/forward navigation buttons on the browser? Currently when users are at /application and they hit 'back', it sends them to the homepage.

I'm thinking of preventing this behavior, or maybe having a popup that says 'are you sure you want to leave?'.

How do others typically handle this?

reddit.com
u/MonkeyOnARock1 — 7 days ago
▲ 0 r/vuejs

I’d like to find and hire someone who has full stack development skills as well as UI design experience

I have 2 guys on my team who are both UI-focused full stack developers. They both started off in UI / UX before moving onto development. Both of these guys are weapons at what they do as they are also able to contribute significantly into the product vision.

I like working with UI-first developers as it takes a lot of weight off my shoulder. I like when the developers take more control over the creative vision of our projects rather than me bossing them around.

That being said, I’m looking for some more full stack developers who have the creative eye for good design as well. If you think you are a good fit, please DM me with links to your designs on dribbble, behance etc…..

Even better if you have team management and other relevant leadership skills.

I have not got a fixed rate in mind, but I am happy to work something out with you based on your skill set and performance on an initial onboarding project.

reddit.com
u/helpmepls626 — 10 days ago
▲ 65 r/vuejs

There's no open-source visual page builder for Vue like Puck, so I started building one

Puck is the best open-source visual editor for React — you register your own components, users drag them onto a canvas, you get JSON back. The maintainers have said they're not porting it to Vue, and I couldn't find a Vue equivalent at that quality. So the options for devs were a proprietary SaaS builder or building one. I started building one and it's called Gissen, MIT-licensed.

The idea: you register your existing Vue components with a typed config (fields, types, defaults), then drag them onto a canvas. The output is plain JSON you render back into real Vue components. No iframe, because components mount directly into the same DOM, so your scoped styles just work and the canvas looks exactly like production.

What works right now: the editor canvas, drag from a palette, reorder, nesting into containers, select/delete, the typed config, and JSON output via v-model:data.

What doesn't yet: editing prop values (the properties panel is still a stub), the MCP server for agents (skeleton only), and a production render helper to turn the JSON back into Vue outside the editor. It's pre-alpha, please don't ship it.

The part that ate the most time was syncing SortableJS with a reactive Vue store: index translation between Sortable's final position and the store's insert index, reverting the DOM before mutating state so Vue patches from a clean baseline, and preventing a container from being dropped into its own descendant. I wrote up those gotchas in more detail if anyone's interested (link below).

Repo: github.com/gissen-dev/gissen
npm: npm install gissen
The SortableJS write-up are linked in the README.

Question for the sub: for those who've used Puck or built something similar — what would actually make a Vue page builder useful enough for you to reach for it instead of hand-coding? Trying to prioritize what comes after the properties panel.

u/gissen_dev — 12 days ago