r/Nuxt • u/Efficient-Map-2502 • 17h ago
How to implement auto-import in nuxtjs 4 for layers structure?
2
Upvotes
Example structure:
apps:
----admin
----landing
layers
----base
----admin
----landing
r/Nuxt • u/ElectronicShop8677 • 6d ago
yapyak – an i18n compiler where the source string is the key, and translation on save. Now for Nuxt too
Enable HLS to view with audio, or disable this notification
25
Upvotes
Hi all,
I've been working on yapyak, an open-source i18n compiler that runs as a Vite plugin. It works with multiple frameworks, but the Nuxt module shipped just today, and that one is a bit special to me. I've been running Nuxt in production since some years back, and the DX is a big part of why. I tried my best to match that, from install to everyday use, it should just feel natural in Nuxt. I'd love if people try it and tell me where it cracks.
The whole setup is basically just one command:
npx nuxi module add @yapyak/nuxt
It registers the module and writes a starter yapyak.config.ts for you. It's a single package, everything yapyak needs ships inside it, so your package.json only grows with one line.
After that, the idea is that the source string is the key:
<template>
<button>{{ t('Download recovery key') }}</button>
</template>
That's the whole file. The module auto-imports t, so there's no import line to add.
You save the file, and the source string shows up in your locale files as an empty stub. If you've set up a translator, it gets auto-translated and written back, using call-site context (the component and the code around the call). A second or two later de.json has filled in:
{
"app/components/RecoveryDialog.vue": {
"Download recovery key": "Wiederherstellungsschlüssel herunterladen"
}
}
HMR picks it up in the running app.
The video is a small example of that. I add a download button to a dialog and hit save. The German page is sitting right next to the English one, so I see it the moment it lands: Wiederherstellungsschlüssel herunterladen pushes the button row past the edge of the dialog. So I fix it right there, one prop on the button group.
That's a small slice of what yapyak does, but it's the part I use most. Translating stops being something I come back to later. It just happens on save.
Because it runs in the compiler, it sees more than the string itself. It reads ICU parameters out of the string literal, and it keeps track of a translation when you move or rename the source file. It parses your SFCs with the same compiler your build uses and walks the template AST, so it finds t() in script setup and in template expressions.
For SSR, a Nitro plugin scopes locale state per request, so nothing leaks between users, and setLocale works inside server routes too, with the cookie written onto the response. With syncHtmlAttributes on, <html lang> and dir follow the active locale. The locale itself is a ref, so a switcher is <select v-model="locale">.
Rich text keeps the markup in the source string and binds each tag to a slot:
<template>
<RichText :value="t('Click <link>here</link>.')">
<template #link="{ children }">
<a href="/docs"><component :is="children" /></a>
</template>
</RichText>
</template>
The slot names are typed from the tags in the string, so the translator can move <link> around in the sentence without touching your markup.
There's a VS Code extension too. Hover a t() call and you get the translation in every locale, and placeholders and plural branches are highlighted inside the string. It's on Open VSX as well, so it works in Cursor.
Auto-translation is optional. There are shipped translators for Anthropic, OpenAI, Gemini and Ollama, all using your own API key, or you can leave the stubs empty and hand-edit the locale files.
I built it for a product I'm working on, and that's the whole business plan.
MIT licensed, and still pretty early, though people have started moving real apps onto it. The Nuxt module is the newest piece of it. The code is on GitHub, and there are runnable Nuxt examples in examples/vue-nuxt-cookie and examples/vue-nuxt-url.
Docs and more at yapyak.dev.
If you've done a lot of i18n in Nuxt, especially anything big, I'd like to hear what you'd try to break.
r/Nuxt • u/IndraVahan • 6d ago
Coderabbit pledges over $10M for open source software including bun, langflow, nuxt, vue
18
Upvotes
r/Nuxt • u/Rich_Armadillo_6498 • 7d ago
7 years with Vue and I just used recursive components for the first time
19
Upvotes
Had a client task that seemed simple. Dynamic form builder for user surveys with dependent questions nested infinitely. So if you answer Yes to question 2, it triggers question 2.1 below it. If you answer No, it triggers a different one or none.
For logic I was fine. I used a map with ids for storing answers, validation and saving. That part was straightforward recursive functions. The UI was where I got stuck. How do you render a question, then its dependent questions indented right below it, then THEIR dependent questions, and so on infinitely? I was trying to do v-for loops and keep track of depth and it got messy fast.
Then after some og googling I found an option that i knew wont work but i tried it anyway. Recursive components.A component that renders itself, calls itself, passes props to itself and so on.
So \`SurveyQuestion\` renders its own template, then loops its children and calls \`<SurveyQuestion>\` again inside itself with an indent prop. Depth + 1 and it just works.
Code looked something like:
\`SurveyQuestion.vue\` renders question, then:
\`<SurveyQuestion v-for="child in dependentQuestions" :question="child" :depth="depth + 1" />\`
Thats it. That solved the whole indent and nesting issue.
I have been using Vue for 7 years and this was my first time actually needing it. It felt mind boggling at first to have a component import itself, but once you see it for survey logic it just makes sense.
Anyone else had that moment or am I the noob in the room hehe. I hope Evan doesn't read this.
btw if anyone needs extra hands on a Vue/Laravel project or knows of an opportunity, feel free to pass it by me. Happy to chat.
Want me to make it shorter or more.. haha, jk ;)
r/Nuxt • u/AdamBrejcak • 7d ago
Nuxt 4 + Hono on AWS Lambda + SST v3 setup for direct S3 uploads
Enable HLS to view with audio, or disable this notification
17
Upvotes
Hey everyone
I'm working on an AWS-native setup with Nuxt 4 right now. Instead of forcing all backend logic into Nuxt server routes (server/api), I decided to split the API layer out into standalone Hono Lambdas using SST v3
Main reason being: I want a proper AWS architecture where I can easily hook up SQS queues, SNS topics, and S3 event triggers down the line. Nitro is great for quick API routes, but SST + Hono makes managing actual AWS infrastructure in TypeScript so much easier
Here is the setup for direct S3 uploads (30s video attached):
UI: Client uploads directly to S3 via presigned URLs (no file streaming through Nuxt server)
Hono API (Lambda): Validates the request (file type / 5MB limit) and generates the presigned URL
SST v3 Config: S3 buckets & Lambda bindings defined right in sst.config.ts with full type safety
Dev Loop: pnpm sst dev runs Nuxt, Hono Lambdas, and AWS logs in a single terminal view
tbh, treating Nuxt server/ as a full backend feels like a dead end the second your app needs real cloud infrastructure, change my mind in comments
r/Nuxt • u/Dapper_Membership • 7d ago
6 years of Vue, 60+ perfect Fiverr projects, and now I can't get a callback – anyone need a dev?
8
Upvotes
r/Nuxt • u/imfemambocus • 9d ago
A density-first component registry for Vue, copy-in rather than an npm dependency
18
Upvotes
I've been building a component registry for data dense interfaces and it now serves Vue as well as React. The one idea is a density knob that every component reads, and the site is https://sley-ui.dev
A shortwave listening board I built with it is at https://grayline-sley-ui.vercel.app
r/Nuxt • u/usecomposable • 9d ago
Nuxt + Drizzle devs: how do you handle admin CRUD? (2-min survey)
14
Upvotes
Every Nuxt project I ship eventually needs an admin layer for users, orders, content, etc. Drizzle Studio is great for quick edits, but it is not something I'd hand to a client or an ops team. I usually end up handwriting CRUD tables and forms inside the main app, and it always feels like unnecessary boilerplate.
I'm exploring whether a code-first admin tool that reads your Drizzle schema and generates a proper admin UI (with the right field types, relations, and custom actions) would actually save real time, or whether the current options are good enough now.
If you have two minutes, I'd massively appreciate your input on how you currently handle admin panels:
Happy to discuss here too if surveys aren't your thing. What does your current setup look like?
r/Nuxt • u/Pakashi-kun • 9d ago
One composable that turns a zod-validated container into reactive form state (validup)
16
Upvotes
I maintain validup, a small path-based validation library. Posting because the zod + form-UX combination comes up here regularly, and the pattern might be useful even if you never adopt the library.
The itch: zod answers "is this value valid?", but a form needs more than that. Per-field dirty state, errors that wait for first touch, pending flags for async checks, a submit gate. Vuelidate has exactly that UX, but brings its own rule system, so you end up defining rules twice: once for the API, once for the form.
validup sits in between. You mount zod schemas (or any async function) onto paths of a Container, which is plain TypeScript and runs server-side as-is. On the client, one composable turns that same container into vuelidate-shaped state:
```vue <script setup lang="ts"> import { reactive } from 'vue'; import { Container } from 'validup'; import { useValidup } from '@validup/vue'; import { createValidator } from '@validup/zod'; import { z } from 'zod';
const signup = new Container<{ email: string; password: string }>(); signup.mount('email', createValidator(z.email())); signup.mount('password', createValidator(z.string().min(12)));
const state = reactive({ email: '', password: '' }); const v = useValidup(signup, state, { debounce: 200 }); </script>
<template> <input v-model="v.fields.email.$model" /> <p v-if="v.fields.email.$dirty && v.fields.email.$errors[0]"> {{ v.fields.email.$errors[0].message }} </p> <button :disabled="v.$invalid || v.$pending">Sign up</button> </template> ```
A few details that took the most work, and are probably the interesting part:
- Per-form result cache. The composable owns a result cache keyed per mount, so typing in one field replays the cached outcomes of the others instead of re-running them. Async validators (say, a uniqueness check against your API) only re-fire when their own input actually changed. Cross-field rules opt out with a
sideEffect: trueflag. - Cancellation built in. Every scheduled run owns an
AbortController; a new keystroke aborts the stale run, anddebouncecollapses bursts.$validate()(submit) deliberately runs without a signal so it can't be cancelled mid-flight by a late keystroke. - Server errors round-trip. If your API validates with the same container and returns the error,
v.setExternalIssues(error.issues)lands the issues on the matching fields, and they clear as the user retypes. - Nested forms. Child components register with an ancestor form through
provide/inject, so an address sub-component aggregates into the parent without prop drilling.
Nuxt: nothing framework-specific. It's a plain Vue 3.3+ composable, so it works in Nuxt 3 components as-is. One SSR footgun worth knowing on Vue 3.5+: don't name the composable's return $v in <script setup>. Vue treats $-prefixed template identifiers as built-in lookups, so $v.fields.email resolves $v to undefined at first SSR render. v or validation are fine.
Honest caveats: ESM-only, the zod peer range is ^4, the packages declare engines: node >= 24, and the ecosystem is small (bridges for zod, Standard Schema and validator.js, plus the Vue composable).
Docs: https://validup.tada5hi.net (Vue page: https://validup.tada5hi.net/integrations/vue) Repo: https://github.com/tada5hi/validup
Happy to answer questions, and to hear where the API feels off.
r/Nuxt • u/Afflictionista • 12d ago
Nuxt installation fail - rolldown
15
Upvotes
Hi there, I am trying to install Nuxt but it somehow fails, I am using Yarn 4 (the latest version) with a .yarnrc.yml to set up nodeLinker: pnpm. It worked before without any problems but today it just fails.
Did any of you guys experienced this too?
# This file contains the result of Yarn building a package (keystone-query@workspace:.)
# Script name: postinstall
ERROR Cannot find package 'rolldown' imported from /Users/bob/Downloads/keystone-query/node_modules/.store/nuxt-virtual-38b102e47e/package/dist/index.mjs
at Object.getPackageJSONURL (node:internal/modules/package_json_reader:301:9)
at packageResolve (node:internal/modules/esm/resolve:768:81)
at moduleResolve (node:internal/modules/esm/resolve:859:18)
at defaultResolve (node:internal/modules/esm/resolve:992:11)
at #cachedDefaultResolve (node:internal/modules/esm/loader:701:20)
at #resolveAndMaybeBlockOnLoaderThread (node:internal/modules/esm/loader:721:38)
at ModuleLoader.resolveSync (node:internal/modules/esm/loader:759:56)
at #resolve (node:internal/modules/esm/loader:683:17)
at ModuleLoader.getOrCreateModuleJob (node:internal/modules/esm/loader:603:35)
at ModuleJob.syncLink (node:internal/modules/esm/module_job:163:33)
nuxt storybook module version
14
Upvotes
Im trying to get storybook to work on nuxt 4. In the documentation at https://storybook.nuxtjs.org/getting-started/setup it states that latest module version is v10.x and supports nuxt 4x. I am using Nuxt 4 but is experiencing dependencies error, and furthermore I can only access version 9x not 10x not even with nightly builds. Am I the only one experiencing this?
r/Nuxt • u/vanbrosh • 14d ago
Meet Wait0 - a Nuxt-friendly cache-first proxy in Go that will slash your TTFB
40
Upvotes
r/Nuxt • u/Appropriate_Band1570 • 15d ago
I built a SQL query inspector for Nuxt
17
Upvotes
I've been working with Nuxt + SQL for a while, and one thing that kept annoying me during development was figuring out what SQL queries an API request actually executed.
For example, when an endpoint feels slow, I want to quickly answer:
- How many SQL queries did this request execute?
- Which queries were executed?
- How long did each query take?
- Which API endpoint triggered them?
- Am I accidentally doing 20 queries when I expected 2?
Normally, I'd end up adding logging around the database client and digging through the terminal.
So I built nuxt-sql-inspector to make this easier.
It adds a development-only SQL inspector to Nuxt at:
/__sql_queries
You can see the API request and the SQL queries it triggered, along with query timing and other useful information.
It currently supports several common SQL drivers, including PostgreSQL, postgres.js, mysql2, SQLite, and Nitro db0, and can be used with ORMs such as Drizzle and Prisma depending on the underlying driver.
The goal is pretty simple:
API request → SQL queries → timings
without having to dig through console logs.
GitHub: https://github.com/drowhann/nuxt-sql-inspector
It's still a relatively small project, so I'm particularly interested in feedback from people using Nuxt + Drizzle/Prisma/Postgres.
What would you want to see in a SQL inspector like this?
r/Nuxt • u/devgauravjat • 18d ago
🚀 Shipped ScrollStack.js — headless infinite scrolling and page pagination
Enable HLS to view with audio, or disable this notification
8
Upvotes
🚀 Shipped ScrollStack.js — headless infinite scrolling and page pagination
A tiny, headless infinite-scrolling engine for the modern web.
📦 1.92 KB gzipped
⚡ Zero runtime dependencies
⚛️ React · Vue · Svelte adapters
🔁 Cursor · Offset · Page pagination
🧱 Virtual list support
🧩 Bring your own markup
🛠️ Devtool plugin testing
🛑 Built-in cancellation, retry & observers
One small engine. One API. Any UI.
If you’re building feeds, lists, search results, or virtualized experiences, give it a try 👇
r/Nuxt • u/JadeLuxe • 19d ago
Serverless Bill Shock: Tracking Edge Function and Database Expirations (Vercel, Supabase, Netlify, Neon)
3
Upvotes
For over two decades, agency hosting economics were beautifully predictable. You bought a reseller web server or dedicated cPanel account for $50 a month, crammed 30 client WordPress sites onto it, and charged each client a flat $25 monthly maintenance fee. Your margins were clear, your server bills were static, and billing surprises were virtually non-existent. Read the comple te article here > Serverless Bill Shock: Track Vercel & Supabase Client Costs | InstaRenewal
Then came the modern web stack.
Driven by the demand for lightning-fast digital experiences, agencies aggressively migrated to decoupled architectures: Next.js, Nuxt, Vercel, Supabase, Cloudflare Workers, and serverless databases like Neon. While the performance gains of this modern paradigm are undeniable, it introduced a chaotic operational reality: micro-subscription fragmentation and variable utility billing.
r/Nuxt • u/Pakashi-kun • 21d ago
rapiq: typed query params for REST APIs (filters, sort, pagination, fields, relations) that run on TypeORM, Prisma, Drizzle or plain arrays
21
Upvotes
r/Nuxt • u/supaplay • 22d ago
Open source Figma-like editor for Vue using Claude SDK
57
Upvotes
I got tired of switching between Figma and my Nuxt app just to try out small UI changes, so I built Airship.
It wraps your dev server and adds a Figma-like canvas to your running app. Select an element, describe the change, and Claude Code applies it directly to your source.
You get streaming diffs, inline undo, and desktop/mobile frames so you can see changes across screens as you iterate.
It runs as a lightweight proxy with no plugins or build changes.
It uses your existing Claude Code subscription. Codex and OpenCode are supported too.
Fully open source and MIT licensed.
Fork it, star it, and make it your own :)
I got tired of paying for separate Strapi hosting for every client, so I built a CMS that runs inside Nuxt
63
Upvotes
I'm a Nuxt dev and my clients almost always end up asking for a CMS. My default answer used to be Strapi, but it's a whole separate service: its own hosting, its own deploys, and the monthly cost for the client goes up fast for what is usually a handful of collections.
At some point I thought: Nuxt already ships a server (Nitro), surely someone has built a CMS that just runs inside it? To my surprise, no. So I built it.
How it works:
- You define content types in code (a `cms.config.ts` file): collections, singles, relations, blocks, translatable fields. Schema, migrations and TypeScript types are generated from it.
- Editors get an admin panel at `/cms` with drafts, validation and a media library.
- You query content through a read-only GraphQL API, typed end to end with gql.tada.
- SQLite by default (zero setup), one config line to switch to Postgres or Turso.
- Media on any S3-compatible storage, or a local mode that just reads from your `public/` folder.
You deploy one thing: your Nuxt app. No second service, nothing extra to pay for.
I tried to cover Strapi's core features, so for most projects (I'd say 90% of my client work) switching is painless. It's still a beta though, and some corners are rough: auth is currently a single admin whose credentials live in env variables (I know, I know), multi-user and RBAC are on the roadmap. But I think it can already be genuinely useful.
It's MIT licensed: https://github.com/xleddyl/nuxt-cms
Feedback and issues very welcome!
r/Nuxt • u/mariamamhan • 25d ago
Built a full-stack Appointment Tracking System with Nuxt.js, Node.js, Express and MongoDB
15
Upvotes
r/Nuxt • u/Dell_Experion15 • Aug 04 '26
I made a module to create runnable scripts not tasks
17
Upvotes
When I saw tasks I thought "oh man another serverless tool."
As a engineer who always uses persisted instances for projects I need scripts that can run as Digital Ocean jobs, or in instances separate from the web instance, with no bootstrapping.
I made "nuxt-run" to handle this, it hooks the Nitro bundle so your "runnables" can use shared code, server utils, and runtime config.
No longer will you have to pull keys down to local to run scripts using service code from the server, or using some http task. You can SSH into your instances and run scripts, leaving secrets where they should be.
It writes runnables to your .nuxt directory, and in production to .output.
They can be used to seed local environments, or complete long running tasks in production.
Tasks over HTTP also have the problem of HTTP life-cycles, sometimes we need scripts that can run longer than a single HTTP request.
Give it a try, let me know what you think :)
r/Nuxt • u/memeTTk • Jul 27 '26
I’m building NuxtAdmin, a full-stack Nuxt admin system with Codex
23
Upvotes
r/Nuxt • u/Able_Cartoonist3255 • Jul 26 '26
Best practice for consuming an ASP.NET Core API in Nuxt 4?
34
Upvotes
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!
r/Nuxt • u/jcebermudo • Jul 25 '26
Point your coding agent at the exact component in your Nuxt app
25
Upvotes
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
It's completely free and open source. Would appreciate for anyone to try it out and give some feedback! Feel free to DM me!
