middleware on nested routes
I have an
admin/ route with its index.vue page and algo nested routes:
admin/users
admin/users/[id]
I added a middleware in the root admin page but the nested routes don't inherit the middleware...Set layout in routes
Hello
Kapa told me about a legendary appLayout in the nuxt.config.ts but it doesn't seem to exist
```ts
routeRules: {...
Failed to fetch urls with sitemap.xml
I am getting the following error when trying to get all valid urls for my webapp.
[@nuxtjs/sitemap] Failed to fetch source. { url: 'https://api.kingsburyandpartners.ae/sitemap/urls.json',
error:
{ FetchError: [GET] "https://api.kingsburyandpartners.ae/sitemap/urls.json": <no response> fetch failed...
useRequestFetch does not pass cookie when path is not "/" on ssr
I have a refresh token API in the backend. The refresh token is saved to cookie storage during login with path specific to the refresh token API (e.g. path=/api/refresh-token). However, whenever I try to call this API during SSR in frontend and debug with the backend refresh token API, refresh token value from cookie is always empty.
This is how I make a request with
useRequestFetch.
```ts...tests are queued but never run
I am trying to add unit tests but vitest would never actually run the tests. Here are the list of relevant files:
how to send original request from onResponseError?
1. response fails with a 401
2. within onResponseError, perform refresh and get new bearertoken
3. from here, how do i retry my request with the new headers? ive tried..
```typescript...
Vue Router warning for valid server route
I've a server route configured at
/server/routes/images/[...path].get.ts but when called in the frontend, I get these warnings in the terminal:
WARN [Vue Router warn]: No match found for location with path "/images/properties/photos/01JR5W6KCRXZ21CYE4HGTKEEV0"To be clear, the called URL is a working URL and returns the image correctly in the frontend....
Cannot find 'nuxt.mjs' during build in Dockerfile
Hey all,
I'm trying to build my Nuxt application via Docker, but my Dockerfile is giving me the following error:
```...
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&...