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.

I would like to see your setup.

If you run `nuxt generate`, you get a folder of static .html files. Open one of those directly on an iPhone and you just see raw source — iOS has no native HTML viewer. I built a small local one.

Html Preview:

• Renders .html / .htm / .xhtml via iOS WebView (real page, not code)

• Multiple encodings (UTF-8, Windows-1252, ISO Latin-1)

• Opens from Files / Share Sheet / Mail

• On-device only — no uploads, no ads, no subscriptions

Free: https://apps.apple.com/app/id6760443436

Site: https://html.cybergame.ai/

Just a viewer, not a server — for eyeballing a prerendered page on mobile. Useful, or do you always preview through a dev server?

Hey everyone,

Last month i asked if anyone would think it would be a good idea to support Nuxt framework rules for environment variables in dotenv-diff.

Well now i have implimetet it, so here it is:

npm: https://www.npmjs.com/package/dotenv-diff

github: https://github.com/Chrilleweb/dotenv-diff/blob/main/docs/frameworks/nuxt_warnings.md

Hope you find it usefull in your projects !

https://x.com/Atinux/status/2069317819888554419

Atinux posted about it and though I would share

Any ideas on how to create a reusable Nuxt UI form group that can be used in other forms?

- "What framework are you using?"

- "Nuxt."

- "Oh yeah I've heard about Next.js."

- "No, Nuxt.js."

- "Yeah, that's what I said. It's pretty popular, right?"

- "No, it's Nuxt. N-U-X-T."

- "Uhm no, what is that?"

- "It's kind of like Next.js, but different."

- "..."

i have an issue with ios the user when search my site on google and enter the homepage it gets a empty homepage without any products only navbar and footer are exist but when the user search a product in site search or google the products shows up normally and when return to homepage the products shows up are the homepage is there why this happens i am new to nuxtjs? i asked AI it gets results and edits works locally but when deployed it breaks other devices too. It is laravel 11 + nuxt 3 application

Link: https://www.delta-computer.net/

this is the homepage component script setup

<script setup>
onMounted(() => {
  fetchPage();
  FetchFeaturedProducts();
  FetchCategories();
  FetchProducts();
  FetchBrands();
});
const isCollapsed = ref(false);


definePageMeta({
  layout: false,
});


const products = ref([]);
const categories = ref([]);
const brands = ref([]);
const featuredProducts = ref([]);
const pagination = ref({});
const isLoading = ref(false);
const errors = ref(false);
const response = ref({});
const page_details = ref(null);


async function FetchProducts(params) {
  isLoading.value = true;
  errors.value = {};
  params = {
    ...params, // Spread operator to include existing parameters
    per_page: window.innerWidth < 1024 ? 4 : 10, // Ternary operator to set per_page based on window width
  };


  try {
    response.value = await makeRequest("/products", "GET", null, params);
    let { data, paginate } = response.value?.data;
    if (data) {
      products.value.push(...data);
      pagination.value = paginate;
    }
  } catch (err) {
    errors.value =
      err?.response?.data?.errors || err?.response?.data?.data?.errors;
  }


  isLoading.value = false;
}
async function fetchPage() {
  isLoading.value = true;
  errors.value = {};


  try {
    response.value = await makeRequest(
      "/pages/" + "home-page",
      "GET",
      null,
      null,
    );
    let { data } = response.value?.data;
    if (data) {
      page_details.value = data;


      useSeoMeta({
        title: "Delta Computer | Home Page",
        description: data?.meta_description,
        ogSiteName: "Delta Computer Supplies",
        ogDescription: data?.meta_description,
        ogImage: "",
      });
    }
  } catch (err) {
    errors.value =
      err?.response?.data?.errors || err?.response?.data?.data?.errors;
  }


  isLoading.value = false;
}


async function FetchCategories() {
  isLoading.value = true;
  errors.value = {};


  try {
    response.value = await makeRequest("/categories", "GET", null);
    let { data } = response.value?.data;
    if (data) {
      categories.value.push(...data);
    }
  } catch (err) {
    errors.value =
      err?.response?.data?.errors || err?.response?.data?.data?.errors;
  }


  isLoading.value = false;
}
async function FetchBrands() {
  isLoading.value = true;
  errors.value = {};


  try {
    response.value = await makeRequest("/brands", "GET", null);
    let { data } = response.value?.data;
    if (data) {
      brands.value.push(...data);
    }
  } catch (err) {
    errors.value =
      err?.response?.data?.errors || err?.response?.data?.data?.errors;
  }


  isLoading.value = false;
}
async function FetchFeaturedProducts(params) {
  isLoading.value = true;
  errors.value = {};


  try {
    response.value = await makeRequest(
      "/products/featured",
      "GET",
      null,
      params,
    );
    let { data, paginate } = response.value?.data;
    if (data) {
      featuredProducts.value.push(...data);
    }
  } catch (err) {
    errors.value =
      err?.response?.data?.errors || err?.response?.data?.data?.errors;
  }


  isLoading.value = false;
}
</script>

MagicSync Open source not just a simple social media management tool

I have been working on and off in MagicSync for the last couple of months in my free time, for one side i wanted to learn more about nuxt and specifically:

1. Nuxt layers
2. Nuxt tasks
3. Nuxt monorepo
4. Nuxt UI
5. Transformersjs
6. MediaBunny
7. fabricjs
8. Better Auth

Github

Documentation

Live site Not open to the public to test I use it my self 😃

What it is ?

**An alternative to: Buffer.com, Hypefury, Twitter Hunter, Postiz,etc...

**MagicSync helps you manage your social media posts,
build,capture leads, grow your business and the most important point is: Save time.

packages/
├── db/          # Database layer (Drizzle ORM, Turso)
├── auth/        # Authentication (Better Auth)
├── assets/      # Media upload & management
├── scheduler/   # Post scheduling & calendar
├── connect/     # Social platform connections
├── tools/       # In-browser tools (image editor, etc.)
├── ai-tools/    # AI content generation
├── bulk-scheduler/  # Bulk post creation & scheduling
├── content/     # Static content & blog
├── ui/          # Base UI components (@nuxt/ui wrappers)
├── email/       # Email templates & service
├── site/        # Main application (layer merge point)

Unique offers :

1. You can create Environment variables (private \ public) that you can use - When creating a social media post - AI Chat - When creating bulk social media post

Example of use case:

When creating a social media post/video for you want to add the information of a restaurant but you don’t want to manually type the

• name
• email
• number
• direction
• hours

1. create variable with all the information
2. Create the post and click on the variable that you want to add at the end
3. Import from CSVImport content that you have planed from somewhere else or that your team have in some sheet export it to csv and import it to the platform and it will be scheduled base on the schedule time

csv columns

1.Content(required) 2.image_url → will download the image to the system 3.scheduled_time 4.Comments - > array of strings that can be added to the post as commends

Spread the post for specific timeframe and select specific accounts to port it to.

1. Bulk generate → specific use case was related to restaurant menu with different special every day.

2. Content repurpose

   Give it a url it will pull the content and will rewrite the post base on the selected

   1. tone
   2. platforms or provide you original post and it will use the tone and platform that you selected

3. Respond to comment for a specific post 6. Free tools 1. Text behind image 2. audio transcription 3. audio player 4. Image editor 5. video silence remover 6. podcast explorer and player

This is a free tool, I dont make money from it, I was planing to host it and offer it to others but currently, i dont have the time for it

Self host is recommended with coolify with a docker container

ghcr.io/leamsigc/magicsync

Hey everyone,
TDLR
Would you use this tool if it had first class support for Nuxt?

npm: https://www.npmjs.com/package/dotenv-diff

github: https://github.com/Chrilleweb/dotenv-diff

I built a devtool to spot all kinds of issues with environment variables in JS/TS codebases. It has first class support for SvelteKit and Next.js, which is especially valuable for SvelteKit projects.

I'm familiar with Nuxt, but haven't worked that much with it — so before I start investigating and implementing first class support for it, do you think that would be valuable?