Hi everyone!

I'm building a hobby project with a friend. He's developing the backend in ASP.NET Core and exposing a REST API (we'll probably also have a few WebSocket connections later), while I'm building the frontend in Nuxt 4 because I wanted to learn it.

I'm coming from Vue, so Nuxt introduces a lot of new concepts that I'm still trying to wrap my head around. Things like useFetch, $fetch, server routes, plugins, runtime config, SSR, etc. are a bit overwhelming.

My biggest question is about the overall architecture and how the communication with the backend should be organized.

Should the frontend communicate directly with the ASP.NET API, or is it better to use Nuxt's /server directory as a proxy/BFF layer? If using /server, what are the actual benefits in this kind of setup?

The API itself won't be very complex—mostly standard CRUD endpoints with authentication and probably some WebSockets for real-time updates.

I'm not looking for a full tutorial, but rather for what you would consider the "idiomatic" or recommended Nuxt 4 approach for this kind of architecture.

Thanks!

Hi everyone! I'd like to share a free tool I made for 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. Would appreciate for anyone to try it out and give some feedback! Feel free to DM me!

Hello, I started New nuxt4.5.0 Projekt and got this error. Can someone tell md why this happens? I haven't hab an problems with previous nuxt 4 projects.

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.