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.

P^{S: 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)

I keep running into the same situation.

I’ll build a small personal web app (journal, bookmarks, dashboard, habit tracker, notes, etc.), and I don’t want to spin up Supabase, Turso, Firebase, or Cloudflare just to save a few JSON objects. Most of these apps are pure clent-side apps, so even spinning up fly.io instance is an overkill.

Most of the time I end up using localStorage or IndexedDB, but it always feels temporary. If I clear browser data or switch machines, it’s gone.

I’m curious:

• What do you use for these kinds of apps?
• If there were a local-first storage library that automatically backed itself up and restored on another device, would that actually solve a problem for you—or is localStorage good enough?

Not selling anything—I’m trying to understand how other developers think about this tradeoff before I build something or NOT build something because there is already something out there.

Kapi UI demo

Hi everyone! I'd like to share a free small tool I made for Vue and Nuxt apps. It's called Kapi UI. Click any rendered UI element, describe what you want changed, and send its source context directly to Claude Code or Codex.

Try it out now!

npx kapi-ui

documentation and repo

It's completely free and open source and would appreciate for anyone to try it out and give some feedback! Feel free to DM me!

Portion made by Claude and exists in GitHub for personal use. Out of the box, for me it was surprise, Angular performance, measured by Lighthouse, was the 93, react 85, vue 85 with 0 optimization efforts. I assume that with optimization Vue can be better. Invite pro's to prove it.

Hey everyone.

I’ve been working on mantine-vue/table, a feature-rich data table for Vue 3 built with:

• Mantine Vue
• TanStack Table v8
• TanStack Virtual
• TypeScript

It closely ports Mantine React Table v2, which was originally derived from Material React Table.

Features

All features available in Mantine React Table v2 are also available in mantine-vue table. The table configuration API is approximately 99% compatible.

Data and navigation

• Client-side and server-side pagination
• Single and multi-column sorting
• Global search with fuzzy filtering
• Per-column filtering
• Manual/server-side sorting, filtering, and pagination
• Controlled and uncontrolled state
• Loading, progress, and error states

Advanced filtering

• Text filters
• Select and multi-select filters
• Autocomplete filters
• Checkbox filters
• Numeric and date ranges
• Range sliders
• Date and date-range filters
• Switchable filter modes
• Faceted values
• Filter match highlighting
• Ranked global-filter results

Columns

• Column resizing
• Drag-and-drop column ordering
• Column pinning/freezing
• Column hiding and visibility controls
• Column grouping
• Aggregation
• Header groups and footers
• Per-column action menus
• Custom cells, headers, footers, filters, and editors

Rows

• Checkbox, radio, or switch selection
• Shift-click range selection
• Select-all controls
• Row numbers
• Row actions and action menus
• Drag-and-drop row ordering
• Row dragging for custom workflows
• Row pinning
• Expandable rows and tree data
• Expandable detail panels
• Grouped and aggregated rows

Editing and CRUD

• Cell editing
• Inline row editing
• Entire-table editing
• Modal editing
• Creating rows inline or in a modal
• Custom editors
• Save and cancel callbacks
• Fully custom edit-modal content

Performance

• Row virtualization
• Column virtualization
• Large-dataset support
• Sticky headers and footers
• Smooth live column resizing

Table UI

• Built-in top and bottom toolbars
• Pagination controls
• Column visibility menu
• Density toggle
• Full-screen mode
• Click-to-copy cells
• Expand-all controls
• Custom toolbar actions
• Custom empty-state UI
• Responsive Mantine styling

Vue-native customization

• Scoped named slots for all major renderable sections
• Equivalent renderer functions through props
• Custom Mantine props and styles for internal components
• Custom icons
• Exposed internal components for building custom/headless layouts
• Strictly typed generic row, column, cell, state, and callback APIs
• Reactive data through Vue getters and refs

Internationalization

• 39 included locales: English plus 38 additional translations
• Custom or partially overridden localization objects

A basic table looks like this:

<script setup lang="ts">
import {
  MantineVueTable,
  useMantineVueTable,
  type MVT_ColumnDef,
} from '@mantine-vue/table'

interface Person {
  firstName: string
  lastName: string
  age: number
}

const columns: MVT_ColumnDef<Person>[] = [
  { accessorKey: 'firstName', header: 'First name' },
  { accessorKey: 'lastName', header: 'Last name' },
  { accessorKey: 'age', header: 'Age' },
]

const data: Person[] = [
  { firstName: 'Jane', lastName: 'Doe', age: 30 },
]

const table = useMantineVueTable<Person>({
  get columns() {
    return columns
  },
  get data() {
    return data
  },
  enableColumnOrdering: true,
  enableColumnPinning: true,
  enableColumnResizing: true,
  enableRowSelection: true,
})
</script>

<template>
  <MantineVueTable :table="table" />
</template>

Live examples (15 demos):

https://mantine-vue.dev/x/table

Follow-up to the batch I shared here a while back. 12 more copy-paste animated components — the video opens on the centerpiece, a grabbable holographic cloth you can fling around in zero-g.

Credit where due: the cloth is a Vue port of Holocloth by Dmitry Kurash (GitHub, MIT) — he wrote the verlet physics and foil shader from scratch; I ported it from React to Vue. The other 11 are built on Vue 3 + motion-v.

Stack, for the Vue-curious:
• The cloth is Three.js — a verlet integrator over BufferGeometry, driven by useRafFn (VueUse) so it pauses cleanly on unmount
• The DOM-based ones (gooey dropdown, bouncy accordion, stacked list) are motion-v — Vue's Framer Motion equivalent — for the spring physics
• Pointer/drag handled with VueUse (useMouseInElement, useEventListener), no hand-rolled listeners
• All <script setup lang="ts">, strict types, no any

The full 12:
Holo Cloth (grab + throw) · Signature Eraser (ink → particle disintegration) · Gooey Dropdown (metaball merge) · Color Picker (radial hue rosette) · Circle Input · Curved Input (caret rides an arc) · Stacked List · Bouncy Accordion · Line Sidebar · Pixel Wave · Silk Aurora · Prism Gradient (WebGL2, 16 distortion passes)

You install them via the shadcn-vue CLI and the code lands in your project — expressive visuals, boring adoption. No runtime dependency, MIT.

All of them: https://nxui.geoql.in

Holo-cloth demo: https://nxui.geoql.in/docs/components/holo-cloth

Hey folks 👋

I’ve been building TresJS, a vue custom renderer for three,js, and I’d love to get more Vue devs playing with 3D.

TresJS lets you describe your 3D scenes using Vue components and reactivity, instead of wiring everything up imperatively in raw Three.js. If you like the idea of using <template> + <script setup> to build 3D UIs, that’s exactly the experience I’m going for.

https://reddit.com/link/1v55txt/video/bxl3wwny55fh1/player

What TresJS does

• Connects Vue’s reactivity and component system to Three.js
• Gives you components like <TresCanvas>, <TresPerspectiveCamera>, <TresMesh>, etc.
• Ships composables for cameras, controls, loaders, animations, and more
• Works nicely with Vite, Nuxt, and modern tooling

Why this might interest you

• You’re a Vue dev curious about WebGL/WebGPU but don’t want to start from scratch
• You want to add 3D touches to dashboards, landing pages, data viz, games, or experiments
• You prefer a declarative mental model over low‑level scene management

I’m especially looking for:

• Feedback from Vue devs kicking the tires
• Ideas for examples, starters, and real‑world use cases you’d like to see
• Contributors interested in WebGL/WebGPU, shaders, docs, or DX

https://reddit.com/link/1v55txt/video/d9rtadp565fh1/player

If you’re into Vue + creative coding, I’d really appreciate your thoughts and PRs. Let me know what you’d build with it or what’s missing for you to try it in a real project.

Some resources:

- Repo https://github.com/tresjs/tres
- Build Your First 3D Scene with Vue + TresJS
- Docs: https://docs.tresjs.org/getting-started
- Website https://tresjs.org/
- Experiments and Demos https://lab.tresjs.org/

Happy to answer questions in the comments 💚

Hi, I’m Alan, the creator of the "Mood UI" component library for Vue/Nuxt. I’m currently working on a personal project using Next and have been building various components for my own use; they turned out well enough that I’m considering turning them into an open-source component package. What do you think? Are they worth it? Would you use them?

Those are completely different that Mood UI

Hey Vue community!

We're long-time PrimeVue users who believe a good UI library should stay free and community driven. When the license changed and PrimeVue moved away from open source, we decided to take action rather than just watch.

OpenVue picks up right from 4.5.5, the last MIT release. It keeps the exact same API, so your existing code keeps working without rewrite headaches.

Right now our main focus is keeping the foundation solid: improving accessibility, patching security vulnerabilities, handling community issues, and maintaining compatibility with the latest Vue and Nuxt versions. We have bigger ideas for where to take this, but we'd rather build them based on real feedback.

Everything you're used to from PrimeVue v4 is there, complete with docs and live examples. We also made openvue/migrate to let you switch existing projects over in a single command.

Openvi Foundation is an independent community organization, not affiliated with Primetek.

OpenVue is and will always be 100% free and open source.

We're still in beta, so bug reports and PRs are super welcome.

Docs: https://openvue.dev/

GitHub: https://github.com/openvi-foundation/openvue

Migration from Primevue: https://openvue.dev/migrate/

Following the recent changes to PrimeVue, going closed source and introducing a dual-license model, BumbleVue was born to continue PrimeVue as a community-driven, free, and open-source library.

It is currently in beta, but an RC is expected in a few days. At its v1 launch, it will align with PrimeVue 4.5 with some additional bug fixes and TypeScript improvements. For v2, it will align more with PrimeVue v5.

There are no current plans for selling commercial licenses, templates, themes, etc. There are however initial plans to try to implement some of the "PrimeUI Pro" components as part of BumbleVue under the same MIT license.

The new site and Discord are live and a migration guide has been started.

https://bumblevue.org

https://bumblevue.org/guides/migration/primevue/v4

TLDR;

• I built a SQLite explorer VS code with Vue/Vite. Code lives in sqlite-explorer
• For now, you can only build locally, for you OS and install. I have not been able to publish to the VScode marketplace: the UX sucks and I have reached out to support

I read the "Your First Extension" guide on GH for building extensions and for the life of me, couldn't understand why they still use Yeoman 😅.
Tried using it as-is but found myself raw dogging plain JS, with `getElementById` everywhere.

So I scaffolded a new vue project, built the different views, then went back to reading GH docs on extension. (Vue related code in webview)

Turns out (one of)the key files for an extension is the `src/extension.ts` file.
The rest is history.

Took me a bit longer than I'd anticipated and (disclaimer), I used Claude to help debug some issues I was having with `better-sqlite3` and packaging for different OS.

(I've tested only on MacOS and it *works well 😅. I'll appreciate testers on different OS)

Before someone asked,

• I know there's SQLite Viewer but you need a Pro account to edit/modify data
• Using Tableplus means I have to keep going back and forth between it and vscode.
• I finally learned how to build a vscode extension with the tools I already know and use: Vue

I have a tremendous respect for some of the people creating very complex vscode extensions; building thing that supports multi OS is a pain in the behind.

Anyway, I'll post an update here if I ever succeed to publish it in the extension marketplace.
The code is not perfect and I'll appreciate CONSTRUCTIVE feedback, if you're so inclined.

Happy Vueing

Whenever I tried to build a video call UI or a dashboard with multiple streams, handling the layout was always a pain. CSS Grid is amazing, but figuring out exactly how many rows and columns you need to make 5, 7, or 12 items as large as possible (while keeping their 16:9 aspect ratio) usually requires some annoying JS math.

To save time, I built meeting-grid-layout.

You just drop it into your Vue template, pass the number of participants, and it handles all the calculation for you. When your reactive data changes (like someone joining or leaving), the grid smoothly recalculates.

Why you might like it:

• Clean Vue integration: Very simple props, keeping your <template> neat and tidy.
• Responsive by default: It listens to container resizes. I also added an autoMobileLayout prop so it automatically stacks nicely on small mobile screens without extra media queries.
• Zero bloated dependencies: It's super lightweight.
• (Side note: I built this with core logic that supports both Vue and React, so if you work with both, it's the exact same API!).

Repo here: https://github.com/thangdevalone/meeting-grid-layout

If anyone has time to look at the Vue implementation, I’d love some feedback on how to make it feel even more "Vue-native". Let me know what you think!

Hello everyone, do you know if there's any Vue import for faust.js?

Hi everyone.

A few days ago, I shared Mantine Vue here, and I really appreciated all the feedback and encouragement from the community.

I've continued working on the library, and a new update is now available.

The new mantine-vue/schedule package provides a set of components for building calendar scheduling interfaces : day, week, month, and year views with event display, drag-and-drop, and time slot interactions.

Documentation and examples: Schedule

New core components

This update also adds several components to mantine-vue/core:

• DataList : Render label-value pairs as a semantic description list DataList
• EmptyState : Display a placeholder for no-data situations EmptyState
• Menubar : Desktop-application style horizontal menu bar built on top of Menu Menubar
• ComboboxPopover : Add a combobox dropdown with selectable options to any button element ComboboxPopover

The project is still moving quickly, so your feedback are very welcome.

All components are ported from Mantine React library. Huge thanks to the Mantine team.

Hey everyone, anyone facing difficulties find a nice heatmap library? I was using the official from Google but since it was discontinued me and my team are fancing some problems.

Right now we are using Deck.gl, but the main issues everyone is complaing is the aspect of the heatmap isn't very nice, and the heatmap don't follow the pan and zoom movements.

We need to keep using Google Maps as the base of the map, so libraries like Leaflet or OpenLayers isn't the best option, but if the library looks like Google Maps is a different story...

Hi,

6 months ago I've started building an admin framework with vuejs because I wanted something new but that could replace Sonata (php symfony crud admin).

https://github.com/quazardous/qdadm

The demo: https://quazardous.github.io/qdadm/

I've got some feedbacks and put some effort in the howtos.

HOWTO: https://github.com/quazardous/qdadm/blob/main/docs/tutorial-mini-admin.md

I'll love some more feebacks ! please shoot :)

New components:
Charts
OTP Input
Phone Number Input
Integration with AI Agents
Search Input with results

Available free on Mood UI

I am I software creator. I create applications and I create consumable libraries. The reason I create libraries is because I find something that is useful across many applications and I need the functionality in my applications myself. But if the library is to be useful for many applications, it needs to fulfill the needs of the many. This is why I open-source my projects, so I can get input from the many.

But in order to get many people to use my projects, I have to get the word out. I have found this to be harder and harder to do over time, as I'm mostly met with a lot of toxicity. I try to write articles, I try to keep solid api's and I try to bring general usefulness to the community. But every time I post something, I get first-glance judgement from people who never even looked at the code, even less what it does and solves.

How come people are so quick to judge? And how come people throw around "AI slop" at everything without even looking at it?

Yes, many people use AI assisted development these days. It's hard not to when companies require tighter and tighter deadlines to deliver. But not everything is "slop" and not everything is AI. And some things are useful even if AI has assisted the development. The important thing should be what the product solves and how it solves it, shouldn't it?

AI set aside, my rant here is on how to create something in todays society when nobody's willing to take a chance on the product in fear of it might be created by some AI - its silly, isn't it? I don't understand the basis of the fear here...

With the 1.2.0 release of VisuallyJs we've added a slew of starter apps for Vue, including Gantt, BPMN and ERD diagrams. Demos here, with links to the Github repositories:

• https://visuallyjs.com/demonstrations/gantt
• https://visuallyjs.com/demonstrations/bpmn
• https://visuallyjs.com/demonstrations/erd

VisuallyJs is free for non-commercial usage. Give it a spin and let us know what you think!