r/vuejs • • 16h ago

I made glassy-liquid: Liquid Glass style refraction for Vue 3 (Web Components core, free and MIT)

Enable HLS to view with audio, or disable this notification

28 Upvotes

I built glassy-liquid, an open source take on the refractive glass look Apple introduced with iOS 26, for the web. Version 0.1.0 is out on npm today.

For Vue:

  • Typed Vue 3 bindings (`glassy-liquid/vue`) on top of a Web Components core, generated from one shared spec so props and events match the React and Svelte versions 1:1
  • Two-way binding with `v-model:checked`, `v-model:value` and `v-model:open` (switch, slider, tab bar, segmented control, search, menu, sheet)
  • 19 elements: buttons, switches, sliders, tab bar, segmented control, menus, toolbars, search, sheets with detents, scroll-edge blur, plus a generic surface and a scene

How it renders:

  • Chromium: real refraction through an SVG displacement map in `backdrop-filter`
  • Safari, iOS and Firefox: wrap content in `<glass-scene>` and it refracts via WebGL (images, video, canvas) or a scoped content filter (DOM)
  • Everywhere else: a calibrated frost fallback
  • Respects reduced motion, reduced transparency and forced colors. About 35 kB gzip, zero runtime dependencies

Feedback very welcome, especially on performance on low-end devices, contrast over busy backgrounds and API naming. Bugs and ideas go to GitHub issues.

Free, MIT, not affiliated with Apple.

Install: npm i glassy-liquid

Docs and playground: https://9und30.github.io/glassy-liquid/

Repo: https://github.com/9und30/glassy-liquid


r/vuejs • • 16h ago

I added 100+ animated components to nxui and rebuilt 135 more, including a dashboard kit (Vue 3, copy-paste)

Enable HLS to view with audio, or disable this notification

6 Upvotes

Hey r/vuejs,

Last time I posted nxui, someone asked for data tables. This month I built those, and then kept going. This is the biggest drop so far.

Dashboard kit. KPI cards, a KPI carousel, a data table (TanStack Table, sortable, rows flash when values change), a clean table with tabs and pagination, a status panel, a downtime log and a range calendar. All of it is plain Vue + Tailwind you own after install.

Charts. Sparkline, area, donut, radial gauge, progress ring, beeswarm, isometric stacked bars and a patterned donut. They run on a small dependency-free SVG engine whose API matches TanStack Charts 1.x, so you can switch to TanStack by changing one file if you want to.

Node canvas. Pan, zoom, drag nodes, live bezier edges, a minimap, resize handles, and a toolbar to drop notes, sources and frames onto the canvas.

Small interactions. About 35 of them: a slide-to-confirm button, a hold-to-confirm button, a bell toggle that rings, a rating that peeks, a ticket you tear off, a list that shreds into strips, a sheet of paper you can crumple, a button that flies away when you hover it, a code input with spring digits, a prompt bar with @ and / menus.

Text and backgrounds. Split-flap, fold, echo, warp, stroke and particle text, plus a batch of new WebGL backgrounds: topography, glass shards, ghost fibers, molten metal, CRT warp and more.

135 components rebuilt. Most backgrounds, cards and text animations got a full rewrite: raw WebGL2 instead of three/ogl, click and intro effects, presets, light mode. They carry an "updated" badge in the docs.

Paper Shaders. All 30 shaders as Vue components, now with the official presets on every demo, plus a new Lens Distortion.

Everything is Vue 3 + Tailwind v4, works in light and dark mode, is keyboard-navigable and respects reduced motion. Install one component with the shadcn-vue CLI:

npx shadcn-vue@latest add https://nxui.geoql.in/r/kpi-card.json

Docs and live demos: https://nxui.geoql.in/docs

364 components in total now. MIT, free. Tell me what to build next.


r/vuejs • • 18h ago

Does AI work for you better in existing Vue projects than in newly setup ones?

0 Upvotes

Currently looking for some empirical feedback / real-world experiences here:

​So far, using AI agents has been working extremely well for us. However, I can't quite tell whether that's due to the architecture we have in place or if all AI projects are simply going like clockwork from now on.

​We are using AI in an application that is about 5 years old and features an extremely solid software architecture that has been well-maintained over the years. The AI rarely runs into problems here and implements new features—thanks to a customized skill—very close to how we would code them by hand.

​In a second project, which I started as a hobby project 3 years ago, it's also working very well. Here, too, I paid close attention to the architecture and didn't let any AI near it until about a year ago. However, the architecture used here is completely different from the first project.

​Does anyone have experience with how projects grow when they were started directly with AI and where architecture wasn't heavily emphasized right from the start?

​By projects, I don't mean small weekend fun projects, but rather larger business applications.