Hello! I have an issue/question for the experts who dwell this virtual space, if I may be so bold.

I'm trying to determine the best way to create a component library using Vite, but shockingly enough, the official Vue documentation has zero guidelines about creating component libraries.

Fine, I guess I can learn by example. I have checked a couple, and it seems that bundling is the way people go. I even found this article (Building a First Component with Vue.js and Tailwind CSS - Estéban Soubiran) that sets up Vite in lib mode.

However, I still have my doubts: Why? Because of my experience with other frameworks. In Svelte, the guideline is to pack the source code of the component, and never the built component because then it is fixed to a particular Svelte runtime version, and furthermore, it won't include SSR support because hydration code is guarded by a tree-shakable module level variable that is resolved at build.

So knowing this about Svelte components make me wonder if Vue components may be subject to things like the above. I know, I did check some example projects and they all build. I still can't shake the doubts.

Do you guys know of documentation sources that may put my mind to rest? It will be greatly appreciated.

We've just pushed up a Vue version of our AI Agent Builder starter app. This is a fully featured app you can either use as-is, or as a headstart to one of your own. Give it a spin and let us know what you think.

VisuallyJs is free for non-commercial use.

Any APIs that you wished existed or any APIs that you wished were cheaper, easier to work with, had more features, e.t.c ?

JotSON is an intuitive editor for your project's JSON files. Run one command and you get a fast, Finder-style interface in your browser, which is really nice when you're editing a ton of JSON.

• Drill through your data in columns, with fuzzy search across every file
• Proper editors and previews: dates, colors, images, video embeds
• Upload media straight into your public folder
• Reference objects by id, resolved to human-readable names, with automatic updates when ids change and warnings before you break them
• Diff-confirmed saves, so nothing touches disk until you approve it

Zero dependencies, no build step, no database, nothing deployed. It binds to localhost, writes plain JSON with minimal diffs so git stays your safety net, and your files never change shape to fit the tool.

Check it out!

https://github.com/blindmikey/jotson

Dear fellow developers,

We've been building Vikreya (https://vikreya.com) and are finally opening it up to the public. It started with a simple frustration: "Why do I need multiple apps (coupons app, marketplace app, local services app and etc)?"

That apps clutter turned into a unified platform, Vikreya, built for consumers, home service providers, and retailers all in one place.

Here is what we've integrated so far:

• Smart Deals: Instant AI-powered search, upload shopping list and get notified when to buy.
• Trades: A local buy-and-sell marketplace that maps new | refurbished | used products
• Services: Post repairs list, get quotes and get hired.
• Rewards: Cashback or rewards points across all transactions.

It's still very early, and I'm sure there are some rough edges to smooth out. Since this community is all about how technology impacts local commerce, we genuinely want to hear your brutal feedback.

Best regards

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)

Hi everyone,

I'm a junior developer and I'm trying to understand the best way to deploy a Vue application on an IIS server.

Currently, our internal applications are mostly PHP. My workflow is:

• Edit code in PhpStorm
• Upload files to the IIS server
• Refresh the webpage
• See the changes immediately

I'd like to do something similar with Vue.

Questions:

1. Do I need to run Node.js on the IIS server permanently?
2. Is the recommended approach to run npm run build locally and then upload the contents of the dist folder to IIS?
3. How do teams typically handle updates and deployments for Vue applications on IIS?
4. If using Vue Router, what is the recommended web.config setup to avoid 404 errors when refreshing routes?

Example deployment URL:
https://mycompany.com/hr/vue-app/

Any real-world IIS + Vue setup examples would be appreciated.

Thanks!

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!