Nuxt UI 3 useOverlay() not showing modals
Header.vue
```typescript
<script setup lang="ts">
import { LoginModal, RegisterModal, SubmitProductModal } from '#components';...
Form with components containing FormInputs
I am using a UForm for a bigger form we have, it has multiple steps which are separated into their own components.
Each component is conditionally rendered inside the UForm and they share a common schema and state (the same one that the form uses).
my current Idea is to trigger the validation manually once the user presses the next step button but still keep the normal FormInput error display.
...
Nitro URL template
Hi all
Is there a way to fetch the URL template from within a nitro event handler?
For example, say I have some file
/api/book/[id].get.ts....Deployment to Firebase App Hosting
According to the docs, now the recommended way to deploy Nuxt 3 to Firebase is by using the new Firebase App Hosting (https://nuxt.com/deploy/firebase).
In my case it doesn't seem to work. The deployment fails, with Firebase not finding the '/workspace/.output/server/index.mjs' module.
I suppose App Hosting doesn't run a yarn build before yarn start or that Nitro's preset has some issues.
Anyone made it work successfully? If it's marked as "Recommended" way in the docs I assume it's been tested before and someone can help....
Reached heap limit Allocation failed - JavaScript heap out of memory
Hi, a few days ago I started making some content changes, and after building the site, it never completed the build anymore. Just out of nowhere, the build starts failing. I have tried a lot of solutions on the internet that did not work out unfortunately. I think it has something to do with any package that has updated, however I cannot verify this, or don't know how.
What I tried:
1. Tried adding this code block in my nuxt.config.ts (with NODE_ENV set to production)...
Nuxt site deployed on Cloudflare Pages suddenly having issues loading?
My site hosted on Cloudflare pages is suddenly not loading properly. No changes have been made and the last deployment was nearly 30 days ago.
I set up pages rules today thinking redirects are the issue (wasn't using 301 for HTTP -> HTTPS or WWW -> non-WWW). So far it seems iffy if the propagation is loading properly. Once the browser caches, it seems to be okay? But the minute I test in another browser or on mobile I have a loading issue again. Once it finally loads, I get a 404 page. If I clear errors, I can then see the homepage again....
I set up pages rules today thinking redirects are the issue (wasn't using 301 for HTTP -> HTTPS or WWW -> non-WWW). So far it seems iffy if the propagation is loading properly. Once the browser caches, it seems to be okay? But the minute I test in another browser or on mobile I have a loading issue again. Once it finally loads, I get a 404 page. If I clear errors, I can then see the homepage again....
useAsyncData - opt out of reactive error handling
I haven't done much research yet on this topic. However, I am hoping you have the experience and can help :)
Motivation
My job is making sure business brings money. Component-level error boundaries are cool, no question about it. Business and practical UX wise not so much. Details do not matter, what matters is that they are also more costly to design and develop, compared to the old school full page error.
...
Does anyone know how NuxtImage and it's 'sizes' attribute works?
Let's say we want something that is full width as a simple example. But we don't want a 2500px wide image downloading on mobile.
First, for testing purposes, we can set
densities to just x1.
To handle the sizes, one would think you could do something like this sizes attribute:
```
sizes="xs:400px sm:640px md:768px lg:1024px xl:1280px 2xl:1920px"...Set default full-width for <UInput> in Nuxt UI
How can I make all <UInput> components default to w-full without manually adding the class each time?
Looking for a global/default override—ideally via app.vue, a plugin, or config—so that all input fields stretch full width by default when wrapped in FormField.
Any clean solutions?...
vuetify-nuxt-module - How to define a custom theme? The "createVuetify" is nowhere to be seen.
Using nuxt3, vue3, vuetify3 stack
layout shift issue after switching to kubernetes and nginx ingress
I've just switched my site to kubernetes with a nginx ingress.
There's a weird layout shift thing.
Do you have any idea what could be causing this?
https://cdn.discordapp.com/attachments/748897200955981904/1358961237513470032/20250408-0025-29.6664366.mp4?ex=67f5bec7&is=67f46d47&hm=4b2e9fe95e7af7530e517e6cd8eafe571dd8380748796a8924e7f3e686b7ccd8&...
redirect?
[Vue Router warn]: Detected a possibly infinite redirection in a navigation guard when going from "/dashboard" to "/auth/login". Aborting to avoid a Stack Overflow.
Are you always returning a new location within a navigation guard? That would lead to this error. Only return when redirecting or aborting, that should fix this. This might break in production if not fixed....
I just need help from the nuxt ai
I am getting this error in browser console after settingup nuxt project:
runtime-core.esm-bundler.js:7013 <Suspense> is an experimental feature and its API will likely change.
hook.js:608 [Vue warn]: Hydration node mismatch:
- rendered on server: <!--[--> (start of fragment)
- expected on client: html ...
Eslint: error using withNuxt & antfu config
Hey guys, I'm having trouble configuring eslint in a new nuxt project. I want to use a custom config based on antfu's and use withNuxt.
I've tried this:
```
export default withNuxt(...
Trying to use pinia store in plugin provided by custom module
I have a custom module that has begun to fail outside of it's own playground since updating to nuxt 3.16.2. The problem is that when workign on the module the playground runs as expected. After building and importing into a local project we get the dreaded:
Uncaught Error: [:pineapple:]: "getActivePinia()" was called but there was no active Pinia. error from pinia.
Our plugin looks like this:
```typescript...Mongoose 'Cannot overwrite `PhotoRequest` model once compiled.'
I have this Mongoose model:
```js
import mongoose, { type ObjectId } from "mongoose";
...
Devtools shows layout instead of the devtools view
Hi! My devtools show the index (I assuem it's the layout) instead of the devtools view, I used Nuxt Vitesse starter.
Show nuxt 404 page on server side network request
I am using useAsyncData to get the page data on the server, how i can show nuxt 404 if the request returns 404
callOnce loses Nuxt context after first await
I have a setup like this, where
quote is a pinia store and it works
```typescript
await callOnce(async () => {
await quote.loadQuote(); // This calls useNuxtApp() somewhere
});...