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!

Just shipped an update to Filament Command Palette 🚀

Three layouts you can switch from config:
• standard: compact Filament modal
• groups:empty state + group headers
• preview: list + detail pane

Cmd/Ctrl+K navigation for Filament panels.

https://github.com/usamamuneerchaudhary/filament-command-palette

Author of Toastflow here. Instead of another wall of GIFs in the readme, I put together a short tour of the features people actually ask about: updating a toast in place, both pause strategies (resume vs reset), queueing with maxVisible, scoped containers, and headless rendering with your own markup.

Fun detail: the video itself is code - rendered with Remotion, reusing the library's actual CSS, so what you see is the real styling and timing.

🎮 Docs with live examples: https://www.toastflow.top/
👨‍💻 GitHub: https://github.com/adrianjanocko/toastflow

Hi everyone!

Over the past months I've been porting Mantine from React to Vue, and I'm excited to finally share it.

Docs
https://mantine-vue.dev

GitHub
https://github.com/mantine-vue/mantine-vue

The goal wasn't to build yet another component library. I wanted Vue developers to have the same experience that made Mantine so popular in React:

• Modern, consistent component API
• First-class theming
• Accessibility-focused components
• Dark mode
• TypeScript support
• MIT licensed
• Familiar developer experience for anyone coming from React

This is an independent community project(not an official Mantine release).

I'd really appreciate feedback from the Vue community:

• Which components are still missing?
• Does the API feel natural for Vue?
• Anything that should be more idiomatic?

Bug reports, feature requests, and contributors are all very welcome.

Hope some of you find it useful!

A few weeks back I shared nxui here (the copy-paste component library) — thanks for the response, it kept me building.

Just dropped 12 new animated ones (v0.0.15). All Vue 3 + <script setup>, motion-v for the physics, canvas/WebGL for the heavy stuff, light + dark out of the box:

• Dithered Logo — Floyd–Steinberg particle logo, cursor repulsion + click ripples
• Ripple Transition — WebGL image swap with refractive waves + chromatic aberration on click
• Dynamic Island Header — navbar that springs into a pill + reading-progress ring on scroll
• Curved Drawer — edge bulges with spring velocity while dragging, flattens at rest
• Drag Reorder List — lift, tilt, drop-cutout, spring settle
• Banknote Bento — intaglio duotone engravings + a thermal-cam card that types its own caption
• Podcast Player, Nostalgia (polaroid slide-viewer), Aurora Accordion, Visual Stepper, Animated TOC, Typer Text

No wrapper package — you install with the shadcn-vue CLI and the .vue file lands in your repo. And thanks to feedback from the last thread, every component now has a "view source" sheet (the </> button) so you can read and copy the actual .vue source right in the docs — no CLI required. Tailwind v4.

Demos: https://nxui.geoql.in
Install one: npx shadcn-vue@latest add "https://nxui.geoql.in/r/dithered-logo.json"

Open source, MIT. Happy to answer anything about the motion-v / canvas internals.

Why another one? The existing wrappers I found were unmaintained, Vue 2 era, or shipped with dependencies I didn't want. This one keeps it minimal:

- zero runtime dependencies (Vue is a peer dep, that's it)

- full TypeScript types

- useRecaptcha composable with reactive token and isVerified

- v-model works if you prefer that

- multiple widgets per page, theming, custom language

- ready-made Laravel + Inertia.js integration examples, including server-side verification

- 100% statement coverage, audited deps in CI, npm provenance

Install: npm install recaptcha-vue

npm: https://www.npmjs.com/package/recaptcha-vue

GitHub: https://github.com/Souhailmakni/recaptcha-vue

Feedback welcome, especially from anyone doing Inertia forms. And if it's useful to you, a GitHub star goes a long way for a brand new package.

👋 Hey folks, author of Toastflow here. I posted it here a while back and got a lot of useful feedback - the most common thing was "let me render my own UI without losing the behavior". The new version is my answer to that.

The problem with most "customizable" toast libraries is that customization means CSS overrides or a component prop here and there. The moment your design system wants a completely different UI, you either fight the built-in markup or you rewrite the whole thing: timers, queueing, pause-on-hover, ARIA from scratch.

So I split it into two levels:

Level 1: headless slot (stay in Vue/Nuxt)

ToastContainer exposes a default slot with the toast data plus a ui helper object. You write your own markup, but the wiring stays intact:

<ToastContainer v-slot="{ toast, ui }">
  <div v-bind="ui.wrapperProps">
    <article v-bind="ui.getRootProps({ class: 'my-toast' })">
      <strong>{{ toast.title }}</strong>
      <p v-if="toast.description">{{ toast.description }}</p>

      <button
        v-for="button in ui.buttons.items"
        :key="button.id"
        v-bind="ui.getButtonProps(button)"
      >
        {{ button.label }}
      </button>

      <div v-if="ui.progress.show" v-bind="ui.progress.getTrackProps()">
        <div v-bind="ui.progress.getBarProps()" />
      </div>

      <button v-bind="ui.getCloseProps()">Close</button>
    </article>
  </div>
</ToastContainer>

The part I spent the most time on: ui isn't just raw data. getRootProps() keeps roles, labels and live-region behavior, getButtonProps() preserves click handling and dismiss-on-click, and the progress.* helpers stay in sync with the actual timer (including pause/resume on hover). You replace the markup, not the behavior. That's the difference from "headless" libraries that hand you a state object and wish you luck.

Level 2: toastflow-core (no Vue at all)

The store itself is a separate zero-dependency package - state, queueing per position, timers, duplicate detection, a promise wrapper for loading toasts, and typed events via subscribe/subscribeEvents. The Vue package is just one renderer on top of it. If you want to build your own renderer (or use it outside Vue), you get the entire engine, not a stripped-down "core".

Everything is typed end to end - toast payloads, buttons, events, state.

🤝 Would love to hear your feedback.

🎮 Playground: https://www.toastflow.top/
📃 Documentation https://www.toastflow.top/docs (see headless section)
👨‍💻 GitHub: https://github.com/adrianjanocko/toastflow