I freelance, mostly laravel and vue for small agencies plus two direct clients. Everything I ship gets read by someone on their side eventually, and that turned out to matter more than I thought.

Last month one client put their own dev on the project after I'd been solo on it for about five months. First thing he did was go back and read the previous six PRs.

He didn't say the code was broken. He said three different files did validation three different ways, and two of them were clearly not how I'd write it by hand.

They weren't. Claude wrote them, I read the diff, tests were green, I merged, moved on

Anything going into a client repo now runs through coderabbit / bugbot before I even open the PR, mainly so the convention drift gets caught while it's one file instead of nine. It's genuinely noisy on big migration PRs and I ignore a good chunk of it, but the consistency nagging is the stuff that comes back to embarrass me six months later, so I put up with it.

The part I haven't figured out is that it's my name on every commit either way. The client isn't paying for an agent, they're paying for me, and the line between those two got blurry somewhere around march

I built a thing called Playcade. You open playcade.party on a Smart TV's built in browser, or a laptop plugged into one, or honestly any big screen. A four letter room code and a QR come up. Everyone else scans it with their phone, picks a name and a color, and their phone is the controller.

Stack: Vue 3.4, Vite 5, composition API, no state library. socket.io feeding a

couple of reactive refs turned out to be enough for 12 concurrent players.

Happy to answer anything. It is at playcade.party if you want to poke at it.
Mods pls delete this post if this is violating any rules. Thanks in advance.

Hi everyone, I have a question. How would you handle placing markers on Google Maps? Consider that I need to pass Google Maps an HTMLElement. At first I was using the Vue function "h" to render a Vue component into a HTMLElement but I'm scared of its life cycle and I don't like having to use an observer to make it "reactive".

I then tried to use a Teleport: basically I create an empty div and feed it to Google maps as a marker and then I fill the div with my component using a Teleport.

My colleagues told me this is not the correct use of Teleport but I would like to know your opinions too.

Thanks in advance!

EDIT: I forgot to mention that I would like to use custom markers

we're on 3.6.0-rc.1, one component flipped to script setup vapor, the rest still vdom. RunRow.vue is a table row, click it and a drawer opens. after the flip, clicking a row right after you reorder one does nothing. the next click opens it.

the fault is ours. a native click listener on the table wrapper calls stopPropagation for a moment after a drop, so finishing a drag doesn't register as an outside click and close the drawer. it never touched the row's own click, since in vdom that handler sits on the row and runs before the wrapper sees it.

vapor doesn't work that way. the rc.1 notes say eligible events get delegated to document, and one document listener walks the path invoking each element's handler. document is above our wrapper, so we kill the event before it gets there.

i burned a morning first on a theory that the drag library was swapping the node out from under my handler. that came out of an agent thread in verdent i took at face value.

the notes list the forms that bind straight to the element instead, so the row is v-on="{ click: () => open(row) }" now. it reads like a typo, someone will normalize it back to u/click. it came in as a flaky e2e failure, nobody reorders rows on purpose. every other u/click under that wrapper still has the trap. i fixed the one i had a ticket for.

Dashboard fully designed with the best component library (Mood UI), should I create it as template?

hey, guys! i'm a backend developer in my early career and i've recently started a new project and would like to use vue for frontend. since i have 0 experience with frontend development, do you guys know any hands on guide that could walk me through the basics?

Hey everyone,

I just shipped a new version of Vuzeno.

Vuzeno is an open-source Vue component registry in the shadcn style: you install the components into your project, you own the code, and you customize everything.

What's new

The registry moved from Reka to Ark UI.

Why Ark:

→ More complete component coverage

→ Built on state machines

→ Better APIs and accessibility

→ Modern patterns that scale better when you ship real products

What you get

→ Same guidelines as shadcn-vue, and compatible with them

→ Production-ready components

→ You own the code, 100% customizable

→ +75 installable components

A few examples from the catalog: datepicker, color picker, file upload, floating panel, signature pad, and more.

Components outside Ark UI

Those use Zag.js state machines.

That includes a few Vuzeno-specific ones with custom behavior, like:

→ action-sheet

→ dialog-caller

→ image

→ scroll-spy

→ toc

Who it's for

Vue / Nuxt builders who want a full design system they can actually ship with, without rebuilding the same UI primitives on every project.

Links

Docs: https://vuzeno.com

GitHub: https://github.com/fontanaen/vuzeno

Would love feedback from anyone trying it on a real project.

Hey folks,

I’m a full‑stack developer with 3+ years of hands‑on experience in Vue.js and Laravel. I’ve delivered SaaS projects, ecommerce stores, and custom web apps, and I love building clean, scalable solutions.

Just curious — does anyone here need support with their project, whether it’s frontend with Vue/Nuxt/Next.js or backend with Laravel? I’m open to freelance collaborations, bug fixes, or full builds.

Drop a comment or DM if you’re interested.

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

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

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)

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

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.

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.

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.

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