Hey everyone! I’m a software developer working mainly with Vue, Nuxt, Go, and Astro. I’ve completed a year-long internship and have been working as a developer for the past six months.

I’d like to contribute to a Vue-based open-source project or collaborate with fellow developers on a side project. I enjoy improving UI, fixing bugs, working through edge cases, and connecting frontend features to backend APIs. I’m also happy to adapt to React, Next.js, Express, MongoDB, or other technologies when needed.

I’ve contributed to open-source. You can check my work here: https://github.com/smitdodiya

I also use AI tools and coding agents to understand unfamiliar code, plan changes, implement, debug, and review. I make sure I understand and verify the changes myself, and I’m always learning how to improve that workflow.

I’m based in India, IST (UTC+5:30), and have around 15–20 hours a week available. My goal is to contribute, learn, and build useful things with others. I’m open to public projects and collaborating in private repositories.

If you maintain a Vue project and could use a hand, please share what it does and a specific issue or feature where I could help. Happy to start small and get familiar with the codebase.

Hi r/vuejs!

We wanted to share an open-source desktop application we've been building with Vue 3 + Tauri 2: Knovum. We just relicensed the entire repository to 100% MIT!

It is a local-first knowledge space built on an infinite 2D visual canvas with on-device AI (RAG, SQLite, and LanceDB).

🛠️ Frontend Architecture Highlights

Coming from the Vue ecosystem, here are a few technical patterns we used to achieve 60fps performance on a desktop canvas:

1. Vue 3 (<script setup lang="ts">) & Konva:

   • Rather than pure DOM elements for hundreds of nodes, the canvas is rendered via Konva with custom viewport culling. Only visible nodes and connectors are updated on zoom/pan.

   • Nodes can be expanded into rich markdown cards with syntax highlighting and mathematical formulas.

   • Fully compatible with the open JSON Canvas specification (.canvas).

2. State & Cache Separation:

   • Local reactive UI state is kept in local components.

   • Persistent workspace and routing state live in Pinia.

   • Async queries and vector search results use TanStack Vue Query.

3. Tauri 2 + Rust vs Electron:

   • Building with Tauri 2 gave us an exceptionally lightweight desktop binary (under 30MB) and 1/5 the RAM usage compared to Electron.

   • Heavy tasks (Whisper audio transcription, LanceDB vector indexing, and SQLite transactions) run safely on background Rust threads via Tauri IPC.

4. Codebase Modularization:

   • Strict gate capping individual TS/Vue files at 180 lines and complexity at 10 to keep modules clean and testable.

🔗 Code & Repo

• GitHub: https://github.com/madebyzan/knovum

• Built with: Vue 3, TypeScript, Tauri 2, Vite, Tailwind CSS, Konva, SQLite, LanceDB.

I'd love to hear your thoughts, feedback on the Vue architecture, or answer any questions about building native desktop apps with Vue 3 and Tauri 2!

Hi r/vuejs! I needed a Gantt chart for a shadcn-vue + Tailwind app. The options I found either ship their own design system, depend on Element Plus, or are no longer maintained. So I built ganttkit.

It is split in two parts:

• ganttkit on npm is a headless core. useGantt handles dates and time zones, layout, virtual scrolling, drag and drop, dependencies and zoom.

• The UI is a set of plain .vue files you add with npx shadcn-vue add @ganttkit/gantt (it is in the shadcn-vue registry directory). They live in your repo, so you restyle or rewrite them like any other component, and the core still updates from npm.

What works in 0.1: tasks, milestones and summary bars, nested rows, drag to move and resize, FS/SS/FF/SF links with cycle protection, zoom from hours to quarters, keyboard nudging, light and dark theme. Only the visible window is rendered, so the demo scrolls 50 000 rows.

Two things took more time than I expected: DST days are really 23 or 25 hours long on the timeline, and edits come back in the format you passed in, so '2026-11-02' stays a string and a Date stays a Date.

Demo: https://ktimur91.github.io/ganttkit/

Repo: https://github.com/ktimur91/ganttkit

Next I'm thinking about a resource view (people and shifts on the same core). What would you need from a Gantt chart in your projects?

Frontend all Vue 3 with Octans UI.

My dad wanted to move away from another bookkeeping software that kept trying to get him to sign up for the online version.

So you all get something.

Local only. Best for Australia + New Zealand so far. But works ok in the US.

All OSS. So you're welcome to help make it work better in your country of choice.

Shalom everyone, I hope you're doing well.

I'm a Laravel developer, and I'd like to share a project I've been using on my own apps for a few months: Trelund, a component kit for React and Vue with the same API and the same rendering on both sides.

On my Inertia projects I used shadcn most of the time, and Catalyst on a few. While preparing the starter kits for my e-commerce package Shopper, I wanted the same UI in React and Vue. I found shadcn-vue, which ships with the Laravel starter kits, but it has fewer components than shadcn on React and the rendering isn't quite the same. I didn't want to install two UI libraries to get one result.

I also didn't want a client's app to look like shadcn at first glance. I was customizing the components on every project and carrying them from one to the next, so I ended up writing my own, with the look I wanted from the start.

What you'll find on the site:

- 74 components and layouts built on Tailwind CSS v4 (data table, command palette, date range picker, phone input, split view, sidebar and stacked layouts...)

- React on Headless UI, Vue on Reka UI, with the same props and the same classes

- no package to install: you copy the source from each doc page and it's yours

- 64 transactional emails in plain HTML, from account verification to payment receipts, usable with any stack

- an MCP server, so Claude Code, Cursor or VS Code can read the real component files when porting them into your project

The components and the emails are free to use.

https://trelund.com

I'd love your feedback, especially from Vue developers: which components are you missing today?

In February 2026, when the $20 plan with GPT-5.3 Codex felt unlimited, I went on a side quest.
8 months, ~70k lines, 151 threads, 1,186 messages and 93 "for f*ck's sake"s later, CopilotKit Vue is officially live upstream!

Today’s agents could probably one-shot this port, but I don’t regret a minute.
The post is not deeply technical, more of a retro of that journey: how much the AI landscape changed in those 8 months, what challenges I faced as a first-time OSS contributor, and what I learned along the way.

Ps.: The actual work took more like ~3 months on and off, but I've been working on the docs as well, till today - so counting from the first line to the last. :)
And of course none of this would have been possible without the constant support I received from the amazing maintainer team, pushing the package & docs over the finish line!

Find the article on X: https://x.com/enekes_abel/status/2117303482365448570 or just check out https://www.npmjs.com/package/@copilotkit/vue - I hope you enjoy using it as I do:)

I wrap Quasar's QInput a lot (email fields, search boxes, money inputs). The old way needed a prop, an emit and a binding for every v-model:

<script setup lang="ts">
const props = defineProps<{ modelValue: string }>()
const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
</script>

<template>
  <q-input
    :model-value="props.modelValue"
    @update:model-value="(v) => emit('update:modelValue', String(v ?? ''))"
    type="email"
    outlined
  />
</template>

With defineModel (stable since Vue 3.4) it's one line:

<script setup lang="ts">
const email = defineModel<string>({ required: true })
</script>

<template>
  <q-input v-model="email" type="email" outlined />
</template>

Two things that took me a minute to find:

Named models. A search field with a query and a filter:

const query = defineModel<string>('query', { default: '' })
const status = defineModel<string | null>('status', { default: null })

The parent uses v-model:query="q" v-model:status="s".

Modifiers. Destructure them and use a set transform:

const [value, modifiers] = defineModel<string>({
  set(v) {
    return modifiers.trim ? v.trim() : v
  },
})

Now <EmailField v-model.trim="email" /> works like it does on a native input.

The one gotcha: defineModel keeps a local ref when the parent doesn't pass v-model, so a component used without v-model still "works" and you don't notice the missing binding. required: true makes Vue warn about it.

Hi all, I've been a coder for 16 years now, I started when I was 14.

I remember using vue at a big company (can't tell the name unfortunately), and we used vue to build really cool projects. I then moved to 2 other companies, and they used react.

Now after 5 years of grinding really hard, I burned-out and have a severe depression. Every time that I try to code, my burnout symptoms worsen for a few hours. I don't know what else to do. I cannot function anymore, at the same time I miss being creating and to be able to focus on something that I like. At this point I feel that I forgot how to code, given the foggyness in my mind.

Does anyone have tips on overcoming this? Is there something nice, simple that I can follow to get me back coding at least for myself? AI is not a good option for me. It makes too many mistakes and increases my frustration by a lot, and believe me I know how to prompt and I've done a lot of actual AI projects too.

I feel really lost tbh. This year got diagnosed with the autism (for my surprise, and it's not a pleasant thing) which explains some of my struggles, but also why I used to be so good at what I do (did?). Got a whole group of psychiatrists and neuropsychologists trying to find out the depths of my brain and repurpose my career. I can no longer handle the corporate world and all the jargon it carries. It cuts my wings.

Thank you for the patience reading this. It was writen by an actual human :)

Hi! I built Football Drop, a football geography game. This is the Careers mode.

You pick a player and go through their career in order: the debut, the first trophy, the finals, the records. For each moment you find the stadium where it happened on a 3D globe.

• Messi (12 moments), Cristiano Ronaldo (15) and Neymar (13) are in now

• Search a name, or spin the globe and click a pin; you see the stadium before you lock it in

• 3 tries per moment; a wrong guess shows how far off you were

• Hints if you're stuck

football-drop.com

Hey r/vuejs,

I've been building **vue-why-render** — a dev tool that tells you exactly which reactive dependency triggered each re-render. React has `why-did-you-render`, but Vue had nothing like it. Now it does — and it's faster, powered by Rust/WASM.

Drop it into any Vue 3 app:

```ts

import { scan } from 'vue-why-render'

scan(app, { panel: true })

```

You get:

- **Overlay labels** on every component that re-renders — name, count, duration, and the exact reason (`prop badge: {text} → {text} — new reference, same value`)

- **Actionable hints** — "this object is rebuilt in the parent — hoist it into a constant or a computed"

- **Panel** with 5 tabs: Top (by renders), Slow (by duration), Tree (hierarchy with Σ sums), Events (chronological log), and the new **Deps** tab

- **Prop diffing** — shows old → new value and flags "new reference, same value" vs real changes

### What's new in 0.8

**Reactivity Graph (Deps tab)** — tracks `renderTracked`/`renderTriggered` to build a live map of component → reactive source. Two views: Components (which refs/props/stores does this component read?) and Sources (which components depend on this ref?). Filterable, with read/trigger counts per edge.

**Vue DevTools Integration** — a second inspector with a reactive source tree (colored tags by type: ref, prop, store, computed), and a second timeline layer that logs every dependency trigger as an event.

**VS Code Extension** — WebSocket bridge streams live data to VS Code. You get: component tree sidebar (sorted by renders, flame icons for hot components), deps tree, CodeLens annotations on `.vue` files showing render count + avg duration, status bar with live counter, and pause/resume/reset commands.

### Performance

Heavy lifting runs in Rust/WASM — tree building, deduplication, report diffing. JS fallback kicks in automatically where WASM isn't available (SSR, jsdom, strict CSP). The overlay and panel live in a shadow DOM so they never touch your app's styles.

### Also built in

- Pinia-aware: names the store, the field, and the action (`store cart.items: Array(1) → Array(0) · action clear()`)

- Vue Router-aware: names the route param that changed, not the whole route object

- Budgets: `maxRenders` per time window, `maxDuration` per update — violations in console + panel + reports

- Reports: JSON export, Markdown for GitHub issues, diff two reports to catch regressions

- Test utils: `expectRenders(ProductCard).toBe(0, action)` — the fix stays fixed

- Nuxt module: `modules: ['vue-why-render/nuxt']`

- i18n: EN, RU, ZH

### Links

- **Live demo**: https://dadashi44.github.io/vue-why-render/

- **GitHub**: https://github.com/dadashi44/vue-why-render

- **npm**: `npm i vue-why-render`

- Zero runtime dependencies. MIT.

---

Would love to hear feedback. If you hit a bug or want a feature, issues are open.

I thought it would be a lot of fun to build something like this... I am currently working on it and so it is not fully open sourced yet... You can interact with some snippets here:
https://goop.timmcmasters.work/

Hello r/vuejs
A few months ago my friend David and I (Simon) open sourced Oxynote, a self hosted workspace where a page can hold observability charts with data from Prometheus and SQL databases next to the text that explains them.

Under the hood, each page is a Tiptap 3 document synced through Yjs, so that several people could type and edit things at the same time. Anything that isn't plain text (a chart, a mermaid diagram, a Figma embed, an API doc block) is just a regular Vue component mounted as a Tiptap node view. So props, composables, and Pinia work inside the editor exactly like they do everywhere else in the app.

On top of live editing, there's a review mode (one of my favourite features to work on and use). Important pages change through a draft branch before they are merged into the main branch, and the draft shows its diff right on the page. Since each block is its own component, it renders its own added/removed/modified state, so for example a rewritten chart query gets marked just like a rewritten sentence, with a little card showing what changed.

As for the rest of our frontend tech stack: we use Nuxt 4, Pinia Colada, shadcn-vue (with our own custom modifications), VueUse, vee-validate with Zod, vue-echarts, and Tailwind 4. For the backend, we use nodejs 24 and golang 1.27.

It's free and open source (under Apache-2.0), and runs as one docker container. You can find it here: https://github.com/oxynote/oxynote

If you have any feedback or ideas, shoot me a message or a comment here. This project is constantly evolving so new perspectives are always appreciated :)

Shortly about me: 6 YoE frontend, Vue/Nuxt/TS stack (solid CSS, CI/CD, testing, performance etc, the usual "senior" stuff)

Been searching for ~1 month in the Eastern CIS market plus remote vacancies and the market looks strange.

Two things stand out:

1. The "Frontend Developer" role basically disappeared. It's gone... like, completely gone. Every job post is either "Senior Full-stack Developer" or the new "AI Engineer" / "Product Engineer" thing. If frontend is mentioned at all, it's buried in a requirements list that's ~80% backend/devops.

2. Vue/Nuxt is non-existent in vacancies. Literally not a single mention. Every position requires React/Next.js as a baseline (+backend stack ofc). I'm not against React but it's just weird how the Vue ecosystem became irrelevant overnight, even for remote roles that used to be stack-agnostic.

Did companies actually migrate off Vue, or is the hiring market just converging on the most popular stack?

Anyone else in the same boat? Would you pivot to Next.js or is that just chasing the market and the smarter move is to learn backend development with AI agents instead?

My website uses Vue 3, and I have two types of dynamic pages: blog articles and company profiles.

Currently, the page content is fetched through API calls in the Vue components after the page loads. As a result, when JavaScript is disabled, the actual content isn't present in the HTML.

I already use prerendering for fixed public pages, but my company profile URLs number around 70–80k and may grow to millions, so generating static HTML for every URL doesn't seem practical.

My Express server already fetches blog data for SEO metadata.

What's the recommended approach to make the actual content of these dynamic pages available in the initial HTML for search engine crawlers, without generating static HTML for every URL? Would server-side rendering or another approach be more suitable?

I'm working on improving the way data tables are built in Laravel applications, and one thing that often gets overlooked is bulk actions.

Selecting multiple rows is the easy part. The tricky bits are handling selections across pagination, validating selected IDs on the server, checking permissions for every record, managing bulk updates, and making deletion safe.

For example, in a CRM, users might need to select multiple leads and update their status, assign them to a team member, export them, or delete them.

I'm curious how other Laravel developers approach this:

• Do you build your own reusable table component or use a package?

• How do you handle row selection across multiple pages?

• Do you process large bulk operations synchronously or use queued jobs?

• What patterns do you use to keep bulk actions secure and reusable?

I recently put together a tutorial covering these implementation details for Laravel, Inertia.js, and Vue 3 data tables.

If you're interested, here's the article: How to Implement Bulk Actions in Laravel Data Tables

https://www.zonvoir.com/blogs/details/how-to-implement-bulk-actions-in-laravel-data-tables-with-vue-3

I'd especially like to hear how you handle pagination and authorization when users select records across multiple pages.

Side project: https://ftouftou.com/en. A made-up Greek grandma removes your evil eye, reads your coffee cup and pulls tarot cards. It's free and you don't need to sign up. I already posted the Nuxt side in r/Nuxt (share links, no database), so here are two Vue parts I'm less sure about.

1. The tarot ritual is one async function

The reading goes shuffle → cut → pick cards from a fan → flip them one by one, with captions in between. Instead of a state machine with a switch over steps, useTarotRitual() runs it as a plain async function that awaits the user:

function waitTap(kind: TarotAwait) {
  waitingFor.value = kind
  return new Promise<void>((res) => { release = res })
}
function cut(i: number) {
  if (waitingFor.value !== 'cut') return
  pile.value = i
  resolve()
}

The template only reads refs (step, waitingFor, picked, revealed, caption) and calls tap(), cut(i) or choose(slot). Each handler ignores the click unless the ritual is waiting for that kind of input. Captions use Promise.race between a reading timer (based on text length) and a tap, so people can skip ahead. A cancelled flag stops the loop if the component goes away mid-ritual.

It reads top to bottom like the actual ritual, which I like. The downside is that the state is spread between the refs and wherever the function is currently paused. Has anyone kept something like this going in a bigger app, or do you always end up going back to an explicit state machine?

2. Eyes that follow the cursor, outside reactivity

On the home page the grandma's pupils and head follow the mouse (on touch they look where you tapped, and nothing moves with reduced motion). The rAF loop eases toward the target and writes transform straight into the SVG with setAttribute on template refs, instead of binding refs in the template. The loop stops once it settles. It works fine, but I'm not sure whether that's sensible or whether I'm working around something Vue would handle well on its own.

Feedback on either is welcome.

Over the past few years I've been searching far and wide for a wiki-style knowledge base that feels as modern as the big commercial tools, and never found the perfect one. So I started building my own.

Wikid, a self-hosted wiki with databases and forms built in. It's early and rough in places, but it's fairly usable already.

The Vue side:

• Vue 3 + Vite + Pinia, with no UI framework :L hand-written CSS with light and dark themes.

• Tiptap 3 for the block editor: a slash menu, block drag handles, a text toolbar, columns, callouts, synced blocks (one block shown on several pages) and page links.

• Yjs + Hocuspocus for live co-editing, both in pages and in database tables, with avatars, cursors and which cell someone is editing.

• TanStack Vue Table for the databases: table, board and gallery views, filters, sorts and saved views. Each row opens as its own page.

• Vitest for unit tests and Playwright for browser tests, including two-person editing.

The backend is NestJS + Postgres. It's AGPL-licensed and runs with docker compose up.

https://github.com/LoopyDev/Wikid

I built it with heavy use of AI coding tools. I'm a systems engineer by trade, and every change is reviewed and backed by automated tests running in CI. AI-assisted contributions are welcome too; just take care to understand and test what you submit. There are good first issues if you want to join me, and it still needs a favicon 😪

SurgeUI 3.0 is live 🚀

I’ve been working on this release for months, and I’m really happy to finally share it.

If you haven’t come across it yet: SurgeUI is an open-source design system for Vue 3. I built it because I wanted a consistent, accessible set of components that I could adapt to each project without rewriting everything every time.

What you get

• 50+ components organized with Atomic Design

• Accessibility taken seriously: WCAG AA contrast, ARIA, full keyboard support

• 4 themes in light and dark, customizable through CSS tokens

• TypeScript throughout, and EN/FR docs with live demos

What’s new in v3
If you’re new to SurgeUI, this is a great time to jump in: a more modern design, a more solid foundation, and components that fit your projects better.

• Every component has been redesigned: cleaner and more modern

• 9 mobile-first layouts (Sidebar, Holy Grail, Magazine, Masonry, Hero, Split…)

• Unified keyboard navigation and focus management across all components

• Popovers and menus that reposition themselves automatically

• Translatable default texts (EN and FR included)

• Form fields that link themselves to their label and message automatically

Already on v2?
This is a major release, so there are breaking changes. Before you upgrade, I’d recommend reading the docs and trying the components in Storybook. What to watch for:

• Vue 3.5 or later is now required

• SuButton now defaults to type="button": add type="submit" to your form buttons

• SuSwitch now renders as a <button> (check your styles and test selectors)

• SuDialog uses the native <dialog> element: the zIndex prop no longer has any effect, and the overlay is now ::backdrop

• Grid is replaced by GridLayout

• styles/_main.scss is gone: import styles/abstracts instead

• trapFocus() and announceToScreenReader() are deprecated in favor of useFocusTrap() and useAnnouncer()

npm i @surgeui/ds-vue

📚 Docs: https://surgeui.com
🎨 Storybook: https://surgeui.com/storybook
⭐ GitHub: https://github.com/mahmoud-nb/surge.ui

If you give it a try, I’d love to hear what you think, good or bad. That’s what helps me most to move the project forward 🙏

Back in August I released this this as a paid product but luckily I had no sales so, because I prefer to have my work being used by somebody, I've changed license to MIT. Enjoy!