r/vuejs

I've been working on Vuzeno, a component registry built on top of shadcn-vue. The idea is simple: shadcn-vue gives you the foundations, but there's a whole layer of components that real-world apps need that simply don't exist yet in the Vue ecosystem. Vuzeno fills that gap.

What it is: A collection of production-ready, composable, and fully customizable components built for common use cases you actually run into when shipping apps. Drop them in, adapt them to your design system, and move on.

The philosophy behind it:

Vue deserves a richer ecosystem. Vuzeno is about giving Vue developers the tools to build beautiful, functional applications by solving real-world problems.

What's inside right now:

• 🔤 Autocomplete > smart, accessible input with suggestions
• 📋 ActionSheet > mobile-style action menus
• 🎨 Color > set of color picker components
• 🔍 Filters > composable filter UI for lists and tables
• 🖼 Gallery > image grid with layout options
• 🖼 Image > enhanced image component
• 🔍 ImageViewer > lightbox / fullscreen image viewing
• 🔑 PasswordField > password input with visibility toggle
• 📱 PhoneField > phone number input with formatting
• 📚 StackMenu > layered navigation menus
• ⏱ TimeField > time picker input
• 📅 Timeline > timeline for events and history

Links:

• web: https://vuzeno.com
• github: https://github.com/fontanaen/vuzeno

TL;DR: https://windframe.dev/styles/linear

Hi everyone 👋

I’ve been experimenting with generating interfaces inspired by the clean, structured styling often associated with Linear. Focusing on typography, spacing, and layout clarity rather than heavy visual decoration.

I ended up building a UI system that makes it really easy to generate interfaces using this design style when prompted, and it does so consistently. It generates both full UIs and assets that match the Linear design style

I also put together a collection of templates built around this style that you can use directly in your Vue projects as starting points.
You can access those templates here
https://windframe.dev/styles/linear

I made this a selectable style option when generating UIs on Windframe, so that when you can choose this preset style it gives your Vue interfaces that clean, polished look.

If you’re not familiar with Windframe, it’s an AI visual editor that lets you generate polished UI with AI, tweak it visually in a canvas, and export clean production code in Vue (along with HTML, and other frameworks)

Also exploring making this available via MCP and possibly a CLI workflow.

Appreciate any feedback or thoughts :)

New release of Toastflow, my open-source toast library for Vue 3 and Nuxt. Here's what changed:

API

• 🎨 CSS variable overrides directly on toasts, inline theming without custom CSS classes
• 🔘 Boolean prop to show/hide the toast icon per-toast
• 🖌️ Custom theme support per toast instance

Performance

• ⚡ Progress bar now uses transform instead of width (GPU composited, no layout thrash)
• 📱 Mobile: hold to pause progress bar (previously tap, which was awkward)

Fixes

• Color now cascades correctly to title and description
• Deep merge in #update, all fields optional since title/description already exist
• z-index fix so dismissed toasts won't appear above active ones
• All package.json entrypoints point to dist/ outputs

👨‍💻 GitHub: https://github.com/adrianjanocko/toastflow
🎮 Playground: https://toastflow.top
📕 Docs: https://docs.toastflow.top/guide/live-examples
🆚 Comparisons: https://docs.toastflow.top/comparisons/overview

I built this productivity app in django + vue.js & hosted on vps with nginx as reverse proxy.

I'm using
celery - for auto moving incomplete task to next & other periodic tasks.
django channels - publishing tasks updates back to vue.js frontend

fernet - for encrypting tasks

resend - for emails ( provides a generous free tier )
uvicorn - async server

postgres - database

vue specific libraries:

vuedraggable: for dragging tasks b/w kanban columns

dompurify: prevent xss

fullcalendar: calendar sidebar

floating-ui/dom: for floating buttons

vue3-popper: show tooltips in a better way

hosted on https://lazyplanner.app

Hey all,

I kept running into the same problem: staying up to date with Vue.js & Nuxt without constantly checking GitHub, Twitter, blogs, and event pages.

So I built VueDigest 👉 https://vuedigest.com

It brings everything into one place:

• 📦 Latest releases from Vue, Nuxt, and key ecosystem projects (with AI summaries)
• 🗓️ Upcoming Vue/Nuxt conferences & events
• 📚 Latest articles & videos from a curated list of quality sources

The idea is to cut through the noise and make it easy to quickly see what matters.

Would love your feedback — anything missing that you’d want in a tool like this?

Domternal, an open-source rich text editor built on ProseMirror with a new Vue 3 wrapper. Built from scratch, not a Tiptap fork.

What's included

• Compound component - <Domternal> provides editor via provide/inject, subcomponents (Domternal.Toolbar, Domternal.Content, Domternal.BubbleMenu) connect automatically. No prop drilling
• Composables - useEditor for full control, useEditorState with selector support for granular reactivity (useEditorState(editor, ed => ed.isActive('bold')) only triggers when the value changes)
• VueNodeViewRenderer - turn any Vue component into a ProseMirror node view. Full appContext forwarding so inject/provide chains work inside node views
• v-model support - <DomternalEditor v-model="html" /> with format-aware comparison that prevents cursor jumping
• Context-aware bubble menu - shows different items based on what's selected (text, heading, code block, table cell). Not in Tiptap
• Full table support - merge, split, resize, row/column controls, cell toolbar. Free and MIT licensed
• ~38 KB gzipped own code, ~108 KB total with ProseMirror. 57 extensions, 140+ chainable commands, fully tree-shakeable

API

Extensions define what the toolbar shows:

<script setup lang="ts">
import { Domternal } from '@domternal/vue';
import { StarterKit, BubbleMenu } from '@domternal/core';
import { Table } from '@domternal/extension-table';
import '@domternal/theme';

const extensions = [StarterKit, BubbleMenu, Table];
</script>

<template>
  <Domternal :extensions="extensions" content="<p>Hello from Vue!</p>">
    <Domternal.Toolbar />
    <Domternal.Content />
    <Domternal.BubbleMenu
      :contexts="{ text: ['bold', 'italic', 'underline'], codeBlock: null }"
    />
  </Domternal>
</template>

That's it. The toolbar renders bold, italic, headings, lists, tables, and more automatically based on the extensions you pass. The bubble menu shows contextual formatting options when you select text, different items per node type.

Need more control? Use useEditor composable directly:

<script setup lang="ts">
import { useEditor, DomternalToolbar, EditorContent } from '@domternal/vue';

const { editor } = useEditor({ extensions, content });
</script>

<template>
  <DomternalToolbar v-if="editor" :editor="editor" />
  <EditorContent :editor="editor" class="dm-editor" />
</template>

8,500+ tests (2,677 unit + 5,800+ E2E across 120+ specs). Everything MIT licensed.

Would love feedback from the Vue community, especially on the composable API design.

Web: https://domternal.dev/ GitHub: https://github.com/domternal/domternal

TL;DW:

ScreenLab, listed in the Chrome Web Store and Firefox Add-ons.

No subscription needed. Free tier is solid and most users won't need anything beyond it. One-time payment unlocks unlimited screens.

Works on standard and rotated monitors.

Supports Tailwind breakpoints natively.

DM me anytime with feature ideas.

Hello, I created a portfolio website using VueJS, Firebase, Cloudinary and to add some flair, TSParticles.

Would love your feedback and critique on it. I uploaded the live link and repo link for ya’ll to check it out.

Love VueJS, I wish it could have more love.

Live Link: https://jherogr.github.io/portfolio-website

Repo Link: https://github.com/JHeroGR/portfolio-website

https://github.com/codedthemes/mantis-free-vuetify-vuejs-admin-template

Recently, I was on a flight and got hooked on a simple puzzle game in the entertainment system. The concept was straightforward: flood-fill the board, but make sure you end on a specific color.

After touching down, I tried to find it online… but couldn’t. So I decided to recreate it myself.

The webapp is fully coded in Vue.js with Composition API. No server-side data, everything is stored locally, client-side.

Since the original game looked old and only had a few levels, I expanded on the idea and made 3 modes:
- daily-level generator
- random-level generator
- some hardcoded classic levels

I'm still working to make sure every random level can be solved - the move limit is now quite arbitrary. That is also the main reason why the daily level does not have a move limit, but more a move-suggestion.

Hope you can check out the game, would love some feedback!

https://www.huedrops.io/