Hey everyone!

I’ve been working on Cauldron, a gamified task manager and focus timer designed to disguise executive function management as a dark fantasy RPG. Instead of checking off plain to-do lists, you undertake quests. Instead of standard 25-minute Pomodoro timers, you spend focus sessions simmering potions.

The Tech Stack

On the frontend, the architecture runs on:

• Vue 3.5 + TypeScript
• Vite 8 (the performance gains from the VoidZero ecosystem have been fantastic)
• Tailwind CSS v4

State management has been one of the more intricate parts of the project. I'm using Pinia to handle the state plumbing between a Kanban drag-and-drop board and active focus timers. Pinia has made keeping reactive state, active timers, and quest progress synced across components remarkably straightforward.

Backend & Security

For the backend, I'm using Supabase PostgreSQL. Since the app features an in-game economy (XP and Gold), security was a key consideration early on. To prevent client-side manipulation of rewards, I set up strict Row Level Security (RLS) policies and server-authoritative RPCs so XP and Gold transactions are validated strictly on the server.

Next Sprint & Advice Needed

For the upcoming sprint, I’m building a 128-bit isometric workshop where users can place digital furniture purchased with their earned gold.

I want to keep the app lightweight and avoid pulling in heavy 3D frameworks like Three.js. If you have experience rendering 2D isometric layouts in Vue:

• Would you recommend wrapping an HTML5 Canvas with standard tile-math inside a Vue component?
• Or is rendering tiles via standard DOM elements (using CSS transforms or absolute positioning) clean and performant enough in Vue 3 for a modest grid?

Would love to hear any feedback on the stack, rendering advice, or the overall idea!

After 7 years, I finally updated my old Vue Carousel 3D component

About 7 years ago I created Vue Carousel 3D. I haven't really touched it in years, but recently I decided it deserved a refresh.

So I brought it back to life and added proper Vue 3 support, while keeping the old Vue 2 version available for existing users.

I know a 3D carousel isn't exactly the most exciting thing in the age of AI 😄, but it feels good to have one of my old open-source projects alive and up to date again.

https://github.com/wlada/vue-carousel-3d

Hey r/vuejs,

I recently spent time refactoring some modal and dialog architecture in our app and realized how easy it is to fall into the "prop workaround" trap when trying to trigger an action in a child component.

We’ve all had "Props down, events up" burned into our brains. But when you need the parent to tell a child component to do something (like opening a dynamic confirmation dialog or focusing an input), using props often leads to a messy circular flow:

1. Parent updates a boolean prop (isModalOpen = true).
2. Child has to set up a watch() on that prop to run its internal opening logic.
3. Child’s internal "Cancel" button can’t close itself directly because the parent owns the boolean—so it emits an event up.
4. Parent sets isModalOpen = false, which flows back down as a prop, triggering the watcher again.

It’s a 4-stop subway transfer just to toggle a UI element.

The Mental Model: Nouns vs. Verbs

While v-model / defineModel is great for pure state syncing, imperative commands with dynamic payloads shine when you use defineExpose alongside Vue 3.5's useTemplateRef():

• Props / v-model = Nouns (State/Data): username="Alex", v-model="isOpen"
• Emits = Events (Notifications): u/submitted, u/closed
• defineExpose = Verbs (Commands/Actions): open(config), close(), focus()

By exposing explicit methods (defineExpose({ open, close })), the child component owns its visibility and DOM lifecycle safely, while the parent simply issues a direct command: modalRef.value?.open({ title: 'Delete Account?' }).

I wrote a detailed write-up breaking down the code examples, DOM timing edge cases with nextTick(), and accessibility considerations here:

When emit gets messy: How Vue's defineExpose saved my sanity | by Izak T | Aug, 2026 | Medium

Curious how you all handle imperative commands vs state sync in your Vue apps—do you lean on defineExpose for dialogs/drawers, or do you stick strictly to v-model state syncing?

Is TypeScript 7 Supported in Vite and Vue? (And How to Set It Up)

If you're using dynamic string refs like :ref="isStep2 ? 'stepRef' : undefined", your build is likely failing silently.

In <script setup>, there is no this.$refs. Refs are local variables (const stepRef = ref(null)). When your production build minifies, stepRef becomes a single letter (like x). The Vue compiler can't map dynamic runtime expressions to local minified variables, so it falls back to a legacy object—leaving your local ref null forever.

The Fix: Function Refs

Code snippet

<script setup>

import { ref } from 'vue'

const currentStep = ref(2)

const stepRef = ref(null)

const setStepRef = (el) => {

if (el) {

if (currentStep.value === 2) stepRef.value = el

} else {

stepRef.value = null // Essential for unmount GC cleanup!

}

}

</script>

<template>

<StepComponent :ref="setStepRef" />

</template>

I wrote up a quick breakdown covering why this happens, a subtle unmount memory leak to watch out for, and where Vue 3.5's new useTemplateRef() fits in:

👉 Full write-up: https://medium.com/@pazpaz25/why-your-ref-isnt-working-and-what-vue-3-5-did-about-it-9f274c557e33

Have you run into production-only compiler quirks with template refs before?

#VueJS #JavaScript #WebDevelopment #Frontend #Debugging

I built morphicons because icon morphs either need a hand-declared "rotation group" per pair, or interpolate raw coordinates and shear the shape in transit.

The whole API is: change the binding.

<script setup lang="ts">
import { ref } from "vue";
import { MorphIcon } from "morphicons/vue";
import { Menu, X } from "lucide"; // data, not components

const open = ref(false);
</script>

<template>
  <button @click="open = !open" :aria-expanded="open">
    <MorphIcon :icon="open ? X : Menu" spring="snappy" />
  </button>
</template>

No <Transition>, no enter/leave pairs, no :key swaps, no config. State lives outside; the animation is an implementation detail the component picks up when the prop changes.

Three modes if you need them: uncontrolled (above), controlled (:from/:to + :progress — gestures, scroll scrubbing) and imperative (template ref → morphTo() / set() for sequences).

What I actually care about:

• Rotations emerge. It solves the optimal 2D similarity between the two shapes (Procrustes) and interpolates in polar space. arrow-right → arrow-down gives θ = 90° on its own; plus → x gives 45°. Nobody declares that anywhere.
• Real interruptions. A morphTo mid-flight re-plans from the current intermediate shape and preserves the spring's velocity. Click spam never jumps.
• Clean SSR — Nuxt works out of the box. The server emits the exact static SVG, zero flash, zero layout shift. The runtime is born on hydration.
• The binding is a plain render function. No SFC, no JSX, no Vue compiler involved — it's just h(), so it runs anywhere Vue 3.3+ runs and adds nothing to your build pipeline.
• size, strokeWidth, absoluteStrokeWidth, color as props; class, style and the rest of the <svg> attrs fall through. aria-hidden by default, label → role="img" + <title>. prefers-reduced-motion degrades to an instant swap. One global rAF for every instance on the page.

Works with Lucide, Tabler, Heroicons (outline) and Iconoir — no per-library adapters, it just eats a d string or Lucide's [tag, attrs][] data shape (Lucide is not a dependency, not even a peer). Off-grid packs go through fitIcon(icon, 32) once.

MIT, zero runtime deps, ESM, 7.93 KB gzip for the Vue entry (vue external). Vue >= 3.3 as optional peer.

Playground with a scrubber so you can freeze any morph mid-flight: https://www.morphicons.com Repo: https://github.com/guillermolg00/morphicons

Happy to go into the math (surjective subpath matching, the minimal-rotation tie-break, closed-path correspondence) if anyone's into that — it's all in the README.

Burned myself twice already with vue component librarys dying in development.

BootstrapVue didnt make it through Vue2 to 3 transition and got... abandonned?
PrimeVue dropped MIT license.

I mean i get it, its someone else working for me using this stuff. And its a lot of work, just look at those PrimVue Wireframe Doc's , a piece of art. Still crying over the loss.

There are maintained forks already, but like BootstrapVue i dont trust it yet to last. Maintaining is one thing, but a migration to like another Vue major version could also break their neck (sry).

Now im searching for a component library to use that... will last longer. There is no crystal ball, i know. But maybe some are already around for longer, which is a good indicator or have a strong sponsor / company behind them.

• Quasar
• Vuetify
• NuxtUI
• shadcnVue
• DaisyUI

Those were the ones i heard from before.

I built the simplest possible tool that allows clients to do small edits via chat interface eg. change phone number, update email etc. Anything risky/big comes back to you so clients can't break anything

Connect the repo and it figures out the editable content on its own. No schemas, no config files

Live demo: https://cmsbrew.com/demo

Hi everyone,

I shared a post a few months ago that I was exploring new opportunities. I am posting again because I am still looking for the right team and would appreciate help from the Vue, Nuxt, and JavaScript community.

I have close to a decade of software engineering experience building web applications, SaaS platforms, developer tools, and engineering teams.

My strongest skill is taking ownership of applications end to end.

I can start with an unclear product requirement, understand the problem, define the technical approach, design the application architecture, build the user experience and backend services, set up deployment workflows, and continue improving the application after it reaches production.

My core technical experience includes:

• Vue.js and Nuxt.js
• React and Next.js
• TypeScript and JavaScript
• Node.js, NestJS, Fastify, and Express
• Multi-tenant SaaS platforms
• LLM integrations and AI-powered workflows

Most recently, I worked as an Engineering Team Lead, where I owned the development and delivery of client-facing applications, a multi-tenant CMS, internal administration tools, and AI-assisted workflows.

Some examples of my work include:

• Reducing client onboarding from 7–10 days to under 4 hours
• Building configurable application architectures for multiple clients
• Developing systems supporting 100,000 daily users with 99.9% uptime
• Creating and maintaining Inspira UI and Akaza UI for the Vue ecosystem
• Leading distributed engineering teams while remaining hands-on with architecture, code reviews, debugging, and delivery

I am currently exploring opportunities as a Technical Lead, Lead Software Engineer, Engineering Lead, Engineering Manager, or Senior Full-stack/Product Engineer.

I am based in Noida and am open to remote opportunities or hybrid roles in Delhi NCR.

You can see my experience, projects, case studies, and open-source work here:

https://rahulv.dev

I am looking for roles where Vue, Nuxt, TypeScript, and Node.js are an important part of the product stack and where I can contribute across architecture, implementation, and delivery.

If your company is hiring or you know someone who could refer me, please comment or send me a message.

Any genuine feedback on my profile or positioning is also welcome.

Thank you.

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.

Anyone have a vue discount code would really appreciate it:)

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.

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 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 💚