r/Nuxt

Nuxt DX is about to get much faster - tooling roadmap around Vite, Oxc, TypeScript, Nitro, pnpm and Vize
▲ 46 r/Nuxt

Nuxt DX is about to get much faster - tooling roadmap around Vite, Oxc, TypeScript, Nitro, pnpm and Vize

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

norbiros.dev
u/Norbiros — 1 day ago
▲ 45 r/Nuxt+2 crossposts

nxui now has all 29 Paper Shaders as Vue/Nuxt components (they just went fully open source)

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.

u/vinayak-kulkarni — 3 days ago
▲ 32 r/Nuxt

Hydration mIsMaTcH 🫪

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

reddit.com
u/HumanOnlyWeb — 3 days ago
▲ 2 r/Nuxt+1 crossposts

Headless toast rendering in Vue turned out way more powerful than I expected

Seven months ago I posted Toastflow here and got a ton of great feedback.

The biggest thing I wanted to improve wasn't adding more options or animations.

I wanted the renderer to get out of the way completely.

🔥 The New Era

The new headless slot exposes the entire UI layer, but you decide what gets rendered.

Instead of being locked into a predefined UI, you just use Toastflow as the engine and build your own layout on top of it.

Same system underneath.
Completely different UI.

❓ What This Means

You’re not styling a toast anymore.

You’re building your own notification system.

✨ Examples

Headless Slot - Full Examples

🔗 Links:

👨‍💻 GitHub: https://github.com/adrianjanocko/toastflow
🎮 Playground & docs: https://www.toastflow.top/ & https://www.toastflow.top/docs

🔷 NPM (Vue): https://www.npmjs.com/package/vue-toastflow
🔷 NPM (Nuxt): https://www.npmjs.com/package/nuxt-toastflow
🔷 NPM (Core): https://www.npmjs.com/package/toastflow-core

u/Ill_Swan_4265 — 2 days ago
▲ 32 r/Nuxt+39 crossposts

Made a free iOS app to open and read raw Markdown (.md) files on iPhone/iPad — handy for peeking at Logseq pages outside the app

Logseq stores everything as plain .md files, but if you ever open one of those files directly on iOS (from Files, iCloud, Dropbox, a backup, etc.) you just get raw text. I built a small viewer to read them rendered on a phone.

Md Preview:

• Renders GitHub-Flavored Markdown — headings, tables, task lists, footnotes

• Code blocks with syntax highlighting, plus LaTeX math and Mermaid diagrams

• Opens .md / .markdown / .mdx / .rmd / .qmd from Files or the Share Sheet

• 100% on-device — no account, no uploads, no ads, no subscriptions

Free on the App Store: https://apps.apple.com/app/id6760341080

Details: https://markdown.cybergame.ai/

Not a Logseq replacement at all — just a quick way to read loose .md files when you're away from the desktop app. Curious how you all read your graph on the go.

u/Fujima4Kenji — 5 days ago
▲ 61 r/Nuxt+2 crossposts

I redesigned my bikepacking blog - looking for opinions

Hello all! I've just launched v2 of my personal bikepacking/gravel riding blog: https://www.bikesandbacon.com/

I posted in this sub before with v1 and had a great feedback, so I'm trying again 😄

What do you think, what would you improve, what am I missing?

Most importantly: what sort of content would you like to find? Rides? Guides? Gear reviews? Something else?

On my roadmap are:

  • search functionality
  • dark mode
  • potentially newsletter signup, but not sure if this will stick given that my content updates are not very regular
u/RealBass — 4 days ago
▲ 7 r/Nuxt+1 crossposts

Vue with unimport plugins or Nuxt?

Hey guys. Have a very big project (15+ nuxt layers) that is kinda insane to build - dev server is very slow, build takes around 15gb of RAM, and there's no ETA on nuxt 5 to adopt rolldown. also tests are slow because of nuxt/test-utils, which bring a lot of harness.

application is SPA, so im thinking of migrating it on clean vite + nitro (v3). i want to make tests faster (since no nuxt/test-utils) and optimize my build and dev server

is there any caveats i should be looking out for?

reddit.com
u/AmbassadorUnhappy176 — 4 days ago
▲ 8 r/Nuxt

How we set up hybrid rendering in Nuxt for a SaaS site

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

reddit.com
u/Ok-Lab-7347 — 4 days ago
▲ 16 r/Nuxt+1 crossposts

Full application designed with Mood UI

I am building a SaaS for business owners across any industry where appointment scheduling is the core feature. I developed Mood UI to avoid relying on external libraries; it has been downloaded a few thousand times via npm, in case you’d like to try it out.

Is available for both, Vue and Nuxt.

It has premium features for free such calendar functionalities:
Month View
Week View
Day View
Agenda
Scheduler

You can check the library documentation on: https://mood-ui.com/
You can use it via npm: https://www.npmjs.com/package/mood-ui

Components used for the onboarding (video):
https://mood-ui.com/composables/use-color-mode
https://mood-ui.com/composables/use-modo-config
https://mood-ui.com/composables/use-local-storage
https://mood-ui.com/data-display/card
https://mood-ui.com/forms/input
https://mood-ui.com/forms/textarea
https://mood-ui.com/forms/number-input
https://mood-ui.com/forms/combobox
https://mood-ui.com/forms/color-picker
https://mood-ui.com/forms/phone-input
https://mood-ui.com/forms/switch
https://mood-ui.com/forms/checkbox
https://mood-ui.com/navigation/stepper
https://mood-ui.com/feedback/tooltip
https://mood-ui.com/forms/button
https://mood-ui.com/feedback/progress-bar

u/MaintenanceOld2216 — 4 days ago
▲ 52 r/Nuxt+6 crossposts

I built a canvas-based timeline visualisation library with virtualised rendering in Typescript

I wanted a library like vis.js but needed it canvas-based for server-side rendering without a headless browser in node, so I built one. I'd love to get some feedback.

tempis.dev
u/Material-Gold7483 — 6 days ago
▲ 17 r/Nuxt+3 crossposts

Would a PrimeVue → Vuetify compatibility layer make migration easier?

After the recent PrimeVue announcement, I've seen quite a few discussions from developers exploring alternatives.

I'm a contributor working closely with the Vuetify ecosystem, and I'm exploring an open-source project to reduce the migration effort from PrimeVue to Vuetify.

The current idea includes:

  • Aura-inspired theme (WIP - Img-1)
  • PrimeVue component aliases (Img-2)
  • Props mapping (PrimeVue ↔ Vuetify)
  • Migration guide

The goal is not full compatibility.

The goal is reducing migration friction.

I'm trying to validate whether this solves a real problem before investing a lot of time into it.

If you're considering moving away from PrimeVue:

  • What's your biggest blocker?
  • Which components would you need first?
  • Would something like this actually help?

I'd really appreciate honest feedback.

https://preview.redd.it/ksodszx1vfah1.png?width=2424&format=png&auto=webp&s=a2c4f0ac906391fccdcbd2b7ab91d1ccd0258159

https://preview.redd.it/oa32oyx1vfah1.jpg?width=2140&format=pjpg&auto=webp&s=2fefeb3e9be59bb3aae4c58b44d0631c062a5b17

reddit.com
u/juanjcardona — 5 days ago
▲ 7 r/Nuxt

How do you handle the HTTP 429 (Too Many Requests) error in your Nuxt applications?

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.

reddit.com
u/Physical_Ruin_8024 — 5 days ago
▲ 9 r/Nuxt

Has anyone successfully used Cloudflare Sandbox with Nuxt.js?

I would like to see your setup.

reddit.com
u/bansal10 — 6 days ago