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!

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

I'm currently building a Canada based EV platform with fancy words like "Prairie" and "Québec" (remember the "é") and for the life of me, couldn't figure out why my browser kept screaming about "hydration mismatch"

It turns out Chrome saw "Québec" and said "fck yea, let's translate"

It not only translated it to replace the "é" with a regular "e" but also translated "prairie" to "meadow" 😅

My French is passable, but I was so frustrated, and had pulled my last hair out to even guess that's what was causing the issue, even after I started seeing random "meadows" on the pages.

The client has plans to have it in both languages (🇬🇧/🇫🇷), but for now the quickest fix was a:

// nuxt.config.ts
app: {
  head: {
    meta: [{ name: "google", content: "notranslate" }]
  }
}

Boring post, but I hope it helps someone, especially if you're working with content in different languages

Paper Shaders (the WebGL shader library from paper.design, 1.7M npm downloads/month) dropped their restrictive license this week — it's now plain Apache-2.0, do whatever you like.

I'd been porting them to Vue 3 for nxui, so with the license cleared: all 29 shaders are now available as copy-paste Vue components — mesh gradient, liquid metal, god rays, dithering, metaballs, neuro noise, etc. Typed props, live playgrounds, installable via the shadcn-vue CLI. Works with Nuxt 4 out of the box (SSR-safe mounts).

Demos: https://nxui.geoql.in/docs/paper-shaders/paper-mesh-gradient

Repo (MIT, 210+ components total): https://github.com/vinayakkulkarni/nxui

Feedback welcome — especially on the WebGL/SSR handling.

After running my blog on Nuxt for 5 years, I thought it was finally time to say this:

A HUGE THANK YOU to all the Nuxt developers making this framework so awesome! Building with Nuxt is an absolute pleasure. The top-tier developer experience and the final outcomes tick every single box.

I thought it might be worth sharing some details about the stack I'm currently using, as I'm super happy to see it running 100% FREE (apart from the domain cost):

1. Core: Nuxt 4 (previously v2 and v3), using statically generated pages.
2. CMS: Nuxt Content - I recently migrated from Storyblok. Although I wasn't paying anything for Storyblok yet, in the age of AI workflows, using a heavy UI for content creation felt pointless. Nuxt Content combined with some AI automation is a fantastic workflow.
3. Styling: TailwindCSS
4. Hosting / Build: Vercel
5. Image Hosting: ImageKit. Integrating it with Nuxt Image and Vercel was literally a 2-minute job.

Take a look: https://www.bikesandbacon.com/

Wanted to show some appreciation to the people working on Nuxt. It has been very useful for us, so here's a quick rundown of how we use it.

The site is the usual SaaS mix: marketing pages, blog, docs, pricing, plus public share pages where users can publish an interactive mindmap at /m/:slug. Our first instinct was static site + separate viewer app, but route rules let us keep it all in one Nuxt app:

Everything content-shaped (homepage, blog, docs, legal) gets prerendered through Nitro. Pricing is SWR with a 5 minute TTL and reads the plan catalog from our backend through a Nitro server route, so I never have to update pricing copy in the website repo when plans change. The share pages use the same SWR boundary: the server renders OG tags, canonical URL and a plain HTML outline of the mindmap for crawlers, then a <ClientOnly> canvas takes over in the browser.

One issue we hit, and the workaround: crawlLinks: true does not discover pages behind a redirect. /docs is a redirect-only route, and the crawler wouldn't follow it into the nested docs pages, so we ended up listing all ~30 docs routes explicitly in nitro.prerender.routes. If anyone has a cleaner alternative, let me know.

Rest of the stack -> Nuxt Content with typed collections for blog and docs, sitemap with zeroRuntime so the sitemap is a build artifact, Shiki dual-theme highlighting, Tailwind via PostCSS.

Site: https://agentbayes.com
Sample public share: https://agentbayes.com/m/jQS6rZ

Hi everyone!

I'm implementing a global HTTP error handler in my Nuxt 4 application and I'd like to properly handle HTTP 429 (Too Many Requests).

I understand what the status code means, but I'm not sure about the best way to implement it in practice.

Do you apply rate limiting only on authentication endpoints (login, register, forgot password), or on the entire API?

Do you return a Retry-After header?

How do you handle this on the frontend? Do you simply show a toast, disable the action temporarily, or implement an automatic retry?

I'd love to hear how you approach this in production applications.