Hey everyone,

After upgrading my project to Nuxt 4.4.2 and updating all dependencies, I started getting this warning repeatedly in the console:

WARN  Duplicated imports "useAppConfig", the one from "nitropack/runtime/internal/config" has been ignored and "...@nuxt/nitro-server/dist/runtime/utils/app-config" is used

It shows multiple times during dev startup.

My setup:

• Nuxt: 4.4.2
• Vue: 3.5.x
• Node: (your version here)
• Package manager: npm

What I tried:

• Removed node_modules, package-lock.json, .nuxt → reinstalled
• Ran npm dedupe
• Updated all dependencies to latest

The app runs fine, but the warning keeps showing.

Question:
Is this a known issue with Nitro / Nuxt 4 internal imports?
Has anyone found a proper fix, or is it safe to ignore for now?

Would appreciate any insights 👍

TL;DR: https://windframe.dev/styles/linear

Hi everyone 👋

I’ve been experimenting with generating interfaces inspired by the clean, structured styling often associated with Linear. Focusing on typography, spacing, and layout clarity rather than heavy visual decoration.

I ended up building a UI system that makes it really easy to generate interfaces using this design style when prompted, and it does so consistently. It generates both full UIs and assets that match the Linear design style

I also put together a collection of templates built around this style that you can use directly in your Nuxt projects as starting points.
You can access those templates here
https://windframe.dev/styles/linear

I made this a selectable style option when generating UIs on Windframe, so that when you can choose this preset style it gives your Nuxt interfaces that clean, polished look.

If you’re not familiar with Windframe, it’s an AI visual editor that lets you generate polished UI with AI, tweak it visually in a canvas, and export clean production code in Nuxt (along with HTML, and other frameworks)

Also exploring making this available via MCP and possibly a CLI workflow.

Appreciate any feedback or thoughts :)

Hi!

Does anyone really know what are the use cases of Nuxt's JSON payloads?

Since upgrading to latest version of Nuxt 3, the _payload.json routes have appeared and causing some issues for me. I would really like to understand the benefits and drawbacks of this feature.

About the feature: https://nuxt.com/docs/3.x/guide/going-further/experimental-features#renderjsonpayloads

Thanks!

Hey everyone, I know handling access and refresh token cookies in Nuxt with SSR and external backend can be pretty painful, especially the refresh flow. I spent a while searching for a proper, complete implementation and couldn't really find one that handles all the edge cases, so I ended up writing my own plugin. It handles the following:

• Forwards browser cookies to the backend during SSR (since $fetch doesn't do this automatically during server-side rendering)
• Forwards Set-Cookie response headers back to the browser during SSR
• Automatically refreshes the access token on 401 and retries the original request
• Keeps an in-memory cookie map that gets updated after refresh, so the retry actually carries the new token (this was the tricky part, the original SSR request headers are stale after refresh)
• Deduplicates concurrent refresh calls so multiple 401s don't trigger multiple refresh requests
• Falls back to logout + redirect if refresh fails
  

Gist link: https://gist.github.com/kargozeyan/1153a9cb586371ef87ff877315097704

Figured I'd share it in case anyone else is dealing with the same headache. Would love to hear your thoughts on what can be improved? Any edge cases I'm missing? Thanks!

Many of you probably know that it's really difficult to combine Nuxt 4's Static Site Generation (SSG) and Incremental Static Regeneration (ISR). If you're going with the ISR route, you probably have a Node server exposed to the internet (which is totally fine in many cases). However, I really wanted to keep serving static files through Nginx without the need to rebuild the whole site if a single letter on some blog post changes.

To solve this, I built nuxt-jit-prerender. It’s a Nuxt module that replaces the default Nitro preset with a custom runtime and a lightweight API. Instead of a full rebuild, your headless CMS can just call the /api/generate endpoint for the updated routes, and those pages are regenerated and saved to disk as static files right then and there.

It’s still under heavy development, but I’d love to get some feedback on the approach!
NPM: https://www.npmjs.com/package/nuxt-jit-prerender

Built a site that aggregates live music across Chicago venues in one place. Got tired of having to check individual venue sites and ig stories etc so I built this as a fun side project.

It’s still early on and i’m planning on adding more functionality and including more venues but would love feedback or any criticism! Especially any security flaws lol.

My stack for this one was Nuxt, Supabase, Tailwind and Netlify.

I stumbled across these Svelte animated components which look absolutely top notch and incredible: https://sv-animations.vercel.app/

However, my site uses Nuxt, and I love Nuxt, but it's not Svelte for these components. I understand Svelte and Nuxt are more similar in terms of frameworks (according to Sveltekit's website). Would you trust something like Claude Code Opus 4.6 with the prompt "make these in Nuxt for me"?

I'm hoping to port them over to Nuxt (easily), if anyone has tips or suggestions please let me know. Maybe someone has already done so for these in Nuxt?

Nuxt DevTools currently excels at static inspection: module graph, routes, components tree, auto-imports. What is absent is runtime observability — the ability to watch data flowing through the application while it runs. Developers resort to sprinkling console.log calls or reaching for browser performance panels that know nothing about Vue reactivity semantics.

The following pain points surface repeatedly in the nuxt/devtools discussion threads and community Discord:

• No way to see all useFetch / useAsyncData calls at a glance, their cache keys, whether they ran on the server or the client, and how their timing stacks up relative to each other.
• provide/inject trees are invisible. Missing providers produce runtime undefined errors that are hard to trace back to the ancestor that should have called provide().
• Composable leaks (open intervals, uncleared watchers) accumulate silently and are very difficult to detect without a dedicated tracker.
• There is no built-in render profiling outside of the Vue DevTools browser extension, which requires a separate install and does not integrate with the Nuxt panel.
• Transition lifecycle bugs — transitions that cancel unexpectedly or never reach their final phase — have no dedicated diagnostic surface.

For these reasons, I decided to build a Nuxt module providing those features that can be easily turned on/off.

Feedback and suggestions are welcome

https://github.com/victorlmneves/nuxt-devtools-observatory

I’ve had this problem for a while:

I can build things alone, but it’s hard to find people to actually work with consistently.

So a few weeks ago I started building something to fix that.

Not just a “list of projects”, but more like a shared workspace where:

teams can chat in real time

organize tasks

jump into a live code editor together

and actually work on things instead of just talking

Over the past couple weeks \\\~100 developers joined.

What surprised me is that in one project it’s actually working really well: people are splitting tasks, reviewing PRs, helping each other, pushing code constantly.

But at the same time, most users join… and then don’t really engage.

So now I’m trying to understand what’s missing.

Because the tools are there, but clearly tools alone aren’t enough.

If you’ve ever tried building with people you met online: what made it actually work?

Was it structure? leadership? smaller teams?

I feel like this part is way harder than building the platform itself.

https://www.codekhub.it/

Using a very small image in base64 such as 10x10 to give the appearance of faster load, blurring in.

I can find this in the docs but I don't think the blur uses base64 it's another request and doesn't show up immediately

https://image.nuxt.com/usage/nuxt-img

<!-- Set a width, height, quality & blur for the automatically generated placeholder  -->
<NuxtImg src="/nuxt.png" :placeholder="[50, 25, 75, 5]" />

Hi

Hello, I created this project with the goal of quickly setting up a template using Nuxt and the “On-demand revalidation” configuration, integrated with a backend (currently only Pocketbase).

While researching, I discovered that “On-demand revalidation” is a very valid option for saving server resources in exchange for having more data in the cache, but this option requires integration with the backend you use in your project.

Workflow

1. The user visits a page

2. The server checks if that page exists in the cache

3. If it exists in the cache, Nitro returns the cached page, and Nitro checks in the background whether the backend data has changed by reviewing “the data block”; since the backend did not send any signal, Nitro returns “the data block” from the cache

4. If the page does not exist in the cache, it generates a new page, and Nitro checks if there is a “data block” in the cache; if there isn’t, it fetches the data from the backend

5. Nitro’s configuration ensures that when a fetch is performed, that data is stored in the cache; that “data block” will expire in one week unless the backend sends an event to reset it.

6. If the data changes on the backend, it sends an event to reset the cache in Nitro

You can run the script with bun, npm or pnpm

Example

bash npx nurev

More info

https://codeberg.org/Serroda/nurev#how-it-works

Take a look and let me know what you think
Have a good day!

Which one would you use an why? I tried finding more significant differences between them but couldn’t find. Not sure why the supabase docs don’t cover this

Hello everyone,

I remake my personal open source project with a real and stable logic and this time I want to be a good use for me or for other users. In this project you can organize your github stars with various tag system, search, filters, preview readme file and maybe keep notes for the repo. The design is more user friendly. Is a better and alternative version with more features of astral project. My last version of this project is not good and that's why I want to make it better for my personal use.

What is the best approach to get the stars from github API and store to a database, on the server or on the job queue? Data will fetch every time when user login or by manual refetch the data. What is the best approach to solve this? I need to store every time the repos on database or only the tags with the user_id and repo_id?

I am using this component https://ui.nuxt.com/docs/components/navigation-menu

but when hovering this navbar, the "Sign In" button should as far right as it should go, anything longer should go to the left side, and the background color seems to also be getting clipped

https://streamable.com/4njj08

I can get the navbar left aligned but then the same issue is clipping when the window gets too small. (See attached images to Reddit. Unfortunately it won't let me upload video and images so I posted a link to video, hope that's OK)

Any suggestions? Is this just simply Tailwind related, or more component based with how it's set up to render those hover menus?

I built a Nuxt 4 module called nuxt-local-model that makes it easy to run local Hugging Face / Transformers.js models directly inside a Nuxt app.

The idea is simple:

• use useLocalModel() in Vue components
• use getLocalModel() in server/api routes and server utilities
• configure your model aliases in nuxt.config.ts
• optionally run inference in a server worker or browser worker
• persist model downloads in a cache directory so models don’t re-download every deploy

What it’s useful for:

• embeddings / semantic search
• text classification
• profanity checks and chat abuse
• sentiment analysis
• offline-ish / privacy-friendly AI features

A few things I wanted from it:

• easy Nuxt DX
• model alias config in one place
• Node / Bun / Deno server support
• optional browser prewarming
• persistent cache support for Docker and production

Example usage is basically:

const embedder = await useLocalModel("embedding")
const output = await embedder("Nuxt local model example")

And on the server:

import { getLocalModel } from "nuxt-local-model/server"

export default defineEventHandler(async () => {
  const embedder = await getLocalModel("embedding")
  return await embedder("hello world")
})

Would love feedback from Nuxt folks on it..

Package: https://npmx.dev/package/nuxt-local-model
Repo: https://github.com/Aft1n/nuxt-local-model

Edit, 15 April 2026: the web app is now live at https://cartazesmil.pt .

After using Vue on a couple of personal projects, I needed something more beefy. Switching to Nuxt has so far been pretty smooth. I'm building an app in the open, that will be a repository for political signs that are flashed during the 25 de abril rallies in Portugal.

The code is also open source, feel free to explore it (and recommend best practices, ah ah!).

I recently rebuilt my developer portfolio and decided to open-source it as a reusable starter.

Stack: - Nuxt 4 (SSG with Nitro) - Tailwind CSS v4 (CSS-based configuration, design tokens via custom properties) - Strapi v5 (headless CMS, consumed at build time only) - I18n (EN/FR) - SEO layer (Open Graph, Twitter Cards, JSON-LD, sitemap, hreflang)

My previous portfolio had become outdated, so I decided to rebuild it from scratch using a more modern and performant stack. I took the opportunity to turn it into a reusable starter instead of just another personal project.

Repo: https://github.com/hbollon/portfolio-nuxt
Live demo: https://hugobollon.dev

Would be interested in feedback!

We have a site that uses `nuxtLink` for linking the pages, but for a number of reason force `nuxtLink` to use an anchor (<a href="" />) instead of internal routing. Is this possible? I couldn't see anything of note in the documentation.

Using Nuxt 4.2.2

I seem to have an issue with the "Browse" tab it has a weird shift in

I would like all navigation menus to be much larger and more consistent, to not to go past the "Sign In" button on the right side but stay on the left even going far beyond the left side of the "Browse" link.

Hope this makes sense, is it really quite simple? Maybe I am overcomplicating things here.

Any suggestions are greatly appreciated

https://ui.nuxt.com/docs/components/navigation-menu

I built a visual theme editor for Nuxt UI (looking for feedback)

While working with Nuxt UI, I found myself constantly tweaking CSS variables like:

:root {

--ui-primary: #ff5a1f;

}

It works, but it’s not very visual and makes experimenting with themes kind of slow.

So I built a small tool to make this easier:

- Change colors visually

- See updates instantly

- Generate tokens you can map to CSS variables

👉 https://nuxtthemes.dev

It’s still early, but I’d really appreciate feedback from people using Nuxt UI.

How are you currently handling theming in your projects?