Hey folks.

I've spent the last few weeks building an app for putting together DJ mixes without sending audio to some cloud service. It came out of how annoying the usual workflow is: analyze tracks, order the set, get decent crossfades, export, generate metadata/cover art, and (if u needed) prep a YouTube upload, hopping between tools the whole time.

What I'm building is called Auto DJ (his dev name). It runs on your machine: you upload tracks, it analyzes BPM/key with Essentia (WASM), you can plan the set by hand or let OpenAI suggest order/crossfades, edit the arrangement on a timeline, and ffmpeg (+ Rubber Band) renders the mix. Optionally it generates cover art with NanoBanana and exports WAV/MP4 audios.

Stack, if you're curious: Nuxt 4 + Nitro in the same process, Bun, ffmpeg for all audio/video and no cloud backend, the state lives as JSON in a `data/` folder on disk, and the client polls while long jobs run (analyze/render). Timeline UI is built so zoom/scroll doesn't fall over at 60fps.

What I find interesting:

- Actually local-first: your audio or data doesn't leave the machine.

- Local-only mode with no API keys, plus an AI mode if you want help with the plan/metadata/cover.

- You can manually fix whatever the AI proposes; it's not just a magic button.

It's still rough in places and I'm iterating on a bunch of technical decisions (polling vs websockets, how to model the arrangement, beatmatch quality, etc.).

If you mix, produce sets, or upload mixes to YouTube: what part of the process slows you down most? Do you want full control, or a solid draft you can tweak? Any feedback, ideas, or "I solved that like this" stories are welcome.

Hey! Facing a tricky issue at work and wondered if anyone had come across anything similar or may know what could potentially be the issue!

I am using Nuxt 4.4.2, deploying on Vercel and use Wordpress to supply the content. We render a lot of the pages through ISR as we have hundreds of thousands of pages. We do some manual work to create more chunks in the build process, I won't share the nuxt.config just as it is work related! But essentially it has always worked, then when last week I went to release a tiny patch fix, the homepage and a lot of the pages fail to load any CSS or JS files, and in some instances they are pointing at my own local files rather than a Vercel static link.

As the fix I made was so insignificant I wondered if it was due to the content team creating more pages and as a result it's now maxxed out? Some pages do load perfectly, and there are no errors or warnings in the Vercel build logs.

I've tried a million things to get the CSS back up and running but failed so far. Any ideas anyone may have?

There is a new Nuxt UI release, and I am planning to update TaskView.
The main reason is the useTour composable. I want to use it to help new users understand TaskView and get started more easily.

GitHub: https://github.com/Gimanh/taskview-community

Is there any Nuxt content creators here streaming on any platforms?

An inaugural Nuxt hackathon is happening this weekend. Contribute to Nuxt and maybe even win a prize while you're at it 😃

New components:
Charts
OTP Input
Phone Number Input
Integration with AI Agents
Search Input with results

Available free on Mood UI

Following up on the earlier nxui posts here — just shipped a bigger component batch.

Since the last posts, nxui now has 15 new animated components, including the original 12 visual/demo components plus 3 new navigation/product UI components from the latest PR.

They install into a Nuxt project with the shadcn-vue CLI, drop in as .vue files you own (no black-box dependency), and work in light + dark

The visual / motion-heavy ones:

• Dithered Logo — particle logo with cursor repulsion + click ripples
• Ripple Transition — WebGL image swaps, refractive waves + chromatic aberration on click
• Dynamic Island Header — springs into a compact pill with a reading-progress ring on scroll
• Curved Drawer — edge bulges with drag velocity, flattens at rest
• Drag Reorder List — lift, tilt, drop-cutout, spring settle
• Banknote Bento — vintage engraved cards + thermal-camera caption effect
• Podcast Player, Nostalgia, Aurora Accordion, Visual Stepper, Animated TOC, Typer Text

And newly added:

• Notification Center — frosted notification panel with a badged bell trigger, spring-animated rows, live relative timestamps, and add/read flows
• Frosted Navigation — bottom navigation with progressive frosted-glass blur, a serif search pill, and spring-animated tabs
• PlayStation Navbar — XMB-style cross-media navigation with a sliding category rail, glowing cursor, and arrow-key control

Tailwind v4, motion-v, VueUse, all Nuxt/Vue 3.

Every demo now also has a “view source” sheet (the </> button), so you can inspect/copy the actual .vue component source directly from the docs — no CLI required.

Demos + docs: https://nxui.geoql.in

Install one:

npx shadcn-vue@latest add "https://nxui.geoql.in/r/notification-center.json"

I've been using Meilisearch in several Nuxt projects and kept wanting a simple admin UI to inspect indexes, edit documents, run searches, and manage everything without writing scripts.

So I built Search Admin:
https://github.com/bansal/search-admin

Current features:

• Browse all indexes
• Search documents with filters
• Create, edit, and delete documents
• Manage indexes
• View document JSON
• Lightweight and self-hostable

It's completely open source.

I'm using it alongside Nuxt projects, but since it talks directly to the Meilisearch API, it should work with any stack.

I'd love feedback from anyone using Meilisearch.

I'm building a game engine based on Nuxt 4. I've always dreamed about creating my own game, but man I'm bad at pixel art ... 😅

It's like Construct 3 (GUI based) but totally free. Looking for beta testers https://acmengine.cc/

Hey r/Nuxt!

Over the past year, I’ve been building and refining a suite of open-source Nuxt modules. I originally created these to solve my own problems and scratch my own itch when spinning up e-commerce and backend-heavy Nuxt apps—specifically around authentication, route security, rate limiting, and cart state management.

Since they've been incredibly useful for my own workflow, I wanted to share them here in the hope that they might save some time and hassle for others too!

Here is what I’ve put together:

1. 🔐 nuxt-users

This is a full-featured user authentication and management module designed seamlessly for Nuxt 3 and Nuxt 4. Instead of manually writing boilerplate for user sessions, it packages everything out-of-the-box.

• Database Support: Multi-database support (SQLite, MySQL, PostgreSQL) powered by automatic migrations via db0 and schema tools.
• Features: Full registration, secure login/logout (bcrypt), password resets, and session management.
• RBAC: Built-in Role-Based Access Control middleware to cleanly protect routes.
• UI Included: Comes with pre-built, responsive authentication forms and user management dashboards.
• AI Ready: It even includes an Agent Skill so if you use AI coding assistants (Cursor, Claude Code), you can run npx skills add rrd108/nuxt-users to feed it exact procedural knowledge!
• GitHub: rrd108/nuxt-users

2. 🛒 nuxt-cart

I got tired of the endless e-commerce headaches and boilerplate required just to manage a cart, so I built this. It's a lightweight, no-nonsense cart state management tool designed explicitly for Nuxt.

• Simple Integration: Makes adding, updating, and removing items completely painless without needing heavy, opinionated storefront configurations.
• Persistent State: Handles tracking the user's cart state efficiently so you can focus on building out your unique checkout or product pages.
• GitHub: rrd108/nuxt-cart

3. 🛡️ nuxt-api-shield

A robust rate-limiting and brute-force protection middleware for your Nuxt API endpoints.

• IP-Based Blocking: Tracks individual IP addresses to prevent malicious bots or scraping scripts from overwhelming your server.
• Granular Customization: You can set maximum request thresholds, sliding time windows, and ban periods. It handles response delays and injects appropriate Retry-After headers automatically.
• Wildcard Precedence: Smart pattern matching ensures your exact routes or specific wildcards are evaluated with absolute priority control.
• GitHub: rrd108/nuxt-api-shield

4. 🪙 nuxt-token-authentication

If you don't need a heavy UI-bound auth stack and just want a lightweight, header-based token system, this handles it.

• It hooks into HTTP headers to streamline token validation against a lightweight backend database (like SQLite/Postgres via UnJS db0).
• Features simple config properties like noAuthRoutes to easily ignore query params and bypass public endpoints.
• GitHub: rrd108/nuxt-token-authentication

Why build these?

The goal was to focus on great DX, modularity, and avoiding heavy vendor lock-in. A lot of these tools heavily leverage the incredible UnJS ecosystem (db0, Nitro, etc.) to keep things blazing fast and highly compatible with serverless/edge environments.

Again, these were born entirely out of my own project requirements, but they are fully open-source and ready to go. I'd love to hear your thoughts, and if they happen to solve a headache or save you some development hours on your next project, that's even better!

PRs, issues, or stars are always highly appreciated!

Why another one? The existing wrappers I found were unmaintained, Vue 2 era, or shipped with dependencies I didn't want. This one keeps it minimal:

- zero runtime dependencies (Vue is a peer dep, that's it)

- full TypeScript types

- useRecaptcha composable with reactive token and isVerified

- v-model works if you prefer that

- multiple widgets per page, theming, custom language

- ready-made Laravel + Inertia.js integration examples, including server-side verification

- 100% statement coverage, audited deps in CI, npm provenance

Install: npm install recaptcha-vue

npm: https://www.npmjs.com/package/recaptcha-vue

GitHub: https://github.com/Souhailmakni/recaptcha-vue

Feedback welcome, especially from anyone doing Inertia forms. And if it's useful to you, a GitHub star goes a long way for a brand new package.

Hey Nuxters :) I'm working on a theme editor for the Nuxt UI docs, I'd really love your feedback on the ux, missing settings or ideas!

We use Pinia Colada at work, and optimistic updates kept turning into the same boilerplate in every mutation: snapshot the cache in onMutate, restore it in onError, invalidate in onSettled. Multiply that by every query key that holds the same record — a list, a filtered list, a detail view — and it gets tedious and easy to get wrong.

So I moved the whole lifecycle into a Pinia Colada plugin. A mutation declares what it does and which keys it affects:

ts const { mutate: renameProject } = useMutation({ mutation: (input: { id: string; name: string }) => api.projects.rename(input), optimistic: { action: OptimisticAction.update, key: ['projects'] } })

The plugin then:

• finds every cache entry under ['projects'] (prefix match)
• applies the update to each one — built-in updaters cover plain arrays, paginated { items, total } objects, and single records, matched by id
• snapshots the previous data and rolls back if the mutation fails
• invalidates the affected queries once the mutation settles, so the cache converges to server state either way

delete works the same way. create requires a custom updater, since the shape of a new record can't be inferred from mutation variables — there are helpers for generating temporary IDs so the UI can tell placeholder rows from persisted ones.

On the TypeScript side, the package augments UseMutationOptions, so the optimistic option is typed on every useMutation call without extra setup.

Repo (MIT): https://github.com/Prains/optimistic-colada npm: npm install optimistic-colada

Feedback is welcome, especially on edge cases around concurrent mutations and on cache shapes the built-in updaters should support.

Hello,

As my business focus has shifted, I currently lack the time to continue developing the first theme builder created for Nuxt UI. The domain ranks first on Google for the keyword "Nuxt UI Theme Builder" and others. I would like to sell the project, including the domain. Please get in touch if you are interested.

Just write your Drizzle schema and AutoAdmin generates the admin panel from it. Configure custom field types like files, images, and rich text.

Runs as a Nuxt layer. Works with SQLite (including D1, libSQL) and Postgres on Node and Cloudflare Workers.

Built with Nuxt, Drizzle, Zod, and Nuxt UI.

https://github.com/awecode/autoadmin

I've been building siteplay.ai, an AI website builder that generates production-ready Nuxt websites.

Once you've finished planning, prototyping and designing your site, simply choose Nuxt from the frameworks dropdown and download the complete project.

The goal isn't just to generate code quickly. It's to help developers plan, prototype, and design websites with AI while still producing codebases that are easy to understand, maintain, and scale.

I've spent more than 10 years building frontend applications across different companies.

Over the last few years I've been using AI coding assistants almost every day, and I'm guessing many of you have too. They're great at writing code, but I kept running into the same problems:

• Planning a website often takes longer than writing the code.
• Starting from a blank prompt without a clear structure is difficult.
• Too many prompt iterations just to get the right section.
• No visual workflow to refine AI output.
• Inconsistent design systems across generated pages.
• Weak content generation.
• AI has very little understanding of the website as a whole.
• If you skip reviewing a few AI-generated commits, it becomes difficult to understand what was actually built.

After dealing with this repeatedly, I wanted a better workflow, so I started building one.

The workflow

Instead of jumping straight into your IDE, everything happens step by step in one place:

1. Plan – Generate the sitemap and pages with AI.
2. Prototype – Edit content and images visually.
3. Design – Apply your branding, colors, typography, and design system.
4. Optimize SEO – Configure SEO for each page.
5. Download – Export a production-ready Nuxt project.

You can visualize your entire website before writing a single line of code.

How AI generates the website

The website is assembled from reusable sections such as Hero, Features, Pricing, Testimonials, FAQ, CTA, and more.

These sections are handcrafted by experienced developers. AI doesn't generate Vue or Nuxt components from scratch.

Instead, it:

• chooses the most appropriate section,
• generates structured content,
• fills the existing component,
• and lets you edit everything visually afterward.

You can guide the generation with:

• Site prompts
• Page prompts
• Section prompts

Because AI only generates structured content instead of rewriting component code:

• the output stays consistent,
• components remain maintainable,
• token usage is much lower (so there's no AI credit pricing),
• generation is faster,
• and it avoids many of the code quality issues common with fully AI-generated projects.

Every section is responsive, and fields can be edited, hidden, or reordered directly in the visual editor.

The hierarchy is intentionally simple:

Sections → Pages → Website

After downloading the Nuxt project

The code is completely yours.

• No proprietary runtime.
• Uses only open-source dependencies.
• Standard Nuxt project structure.
• Built with Tailwind CSS, Shadcn, and Nuxt.
• Easy to extend manually or with your favorite AI coding assistant.
• Generate new sections whenever you need them and copy them directly into your IDE.
• New templates and sections are added regularly, so your projects can continue evolving over time.

There's also detailed documentation explaining the project structure and how to continue developing after downloading.

Looking for feedback

I'm sharing this here because I know the Nuxt community values maintainability just as much as development speed.

I'd really appreciate feedback on:

• the workflow,
• the generated project structure,
• the developer experience,
• or anything else you think could be improved.

Thanks for taking a look!

Hey r/Nuxt, I'm building UIPKGE, an open-source shadcn-vue-style UI registry for Vue/Nuxt.

It is not an npm package. You copy components, blocks, charts, and templates into your app through registry URLs, then you own/edit the source directly. No package lock-in.

Vue/Nuxt links:

https://uipkge.dev/vue/components

https://uipkge.dev/vue/blocks

https://uipkge.dev/vue/templates

Nuxt boilerplate:

https://github.com/uday-a/nuxt-boilerplate

The part I'm trying to get right is real app surfaces, not just buttons: dashboards, tables, charts, auth/payment states, AI chat, templates.

Would love feedback from Nuxt builders: what block/template would actually save you time, and what would make you avoid using a registry like this?

Hey r/Nuxt,

I wanted to share DuploJS Form, a form library focused on composing Vue forms as a typed structure.

The idea is not to replace Vue patterns, force a design system, or turn forms into a black-box builder. The goal is simpler: keep the form structure, layouts, validation, and rendering templates clearly separated while still letting you fully control the UI.

It is mainly useful when forms start growing beyond a few isolated inputs: repeated layouts, nested fields, shared validation logic, reusable templates, and consistent rendering across a project.

The library is still young, so I would really appreciate feedback from Vue developers, especially on the API, the mental model, and whether the abstraction feels natural in real projects.

Docs here: https://form.duplojs.dev/

I wrote a roadmap-style post about why the developer experience for Nuxt developers should get much faster over time. It covers Vite 8/Rolldown, Oxc (oxlint and oxfmt), TypeScript 7, the pnpm Rust engine, Nitro v3, and possible future improvements like Vite’s full bundle mode and Vize.

The post connects work happening across VoidZero, NuxtLabs, and the wider Vue/Nuxt ecosystem, and explains what is usable now, what is coming soon, and what is still experimental - so you can better understand what may affect yourr projects and which tools are worth watching.

It is my first blog post, so feedback, or other thoughts from the community would be very welcome.

https://norbiros.dev/blog/nuxt-dx-is-getting-faster

Hi everyone,

Stack: Node.js / Nuxt (Nitro) backend, TypeScript, PostgreSQL. DB schema is already settled, so I'm not looking for feedback on that — I need help with the backend implementation logic itself.

Context: personal finance app. A `recurrences` table stores rules (amount, frequency, due day, total installments if applicable, start date). Real transactions live in a separate `transactions` table with a nullable `recurrence_id` FK. Future occurrences are NOT pre-generated in the DB — they should be calculated on demand as "virtual" projections (e.g. "show me all transactions, real + projected, for July 2026"), and only turned into a real row when the date arrives or the user confirms it.

What I need help with, specifically:

1. How would you structure the function/service that takes a recurrence rule + a date range and returns the list of projected occurrences? Any concrete approach or pseudocode.

2. Would you reach for a library (date-fns, rrule.js, luxon) to generate the occurrence dates, or roll your own date math? If a library, which one and why.

3. How do you merge real transactions and virtual projections into a single list for the frontend without confusing the two (flags, separate response shape, IDs)?

4. Once a projection needs to become a real row (date arrives, or user confirms), what's a clean way to do that without duplicating logic between the "projection calculator" and the "materializer"?

Not looking for database/schema advice — just the backend implementation approach. Any pseudocode, patterns, or library recommendations are welcome. Tha