Nuxt

N

Nuxt

Nuxt Community Chat Server

Join

404 page not found content pages unless i hard refresh page

I have a few nuxt content pages like a privacy-policy however if i navigate using a nuxtLink to these pages i get an error 404, if i refresh my browser it however works and fidplays my page. what's the recommended solution to this? I have a catch all page [...slug].vue for rendering these pages do i need to manually specify their urls?

Close fullscreen UModal by clicking on overlay

I can't figure out how to dismiss a UModal in fullscreen except with the close button or esc key

Lenis Nuxt Module `scrollTo` issues

I'm using Lenis' Nuxt module on a site i'm working on but I can't figure out how you're suppose to use the scrollTo method and access the Lenis Instance created by the <VueLenis> component. I've tried to import and use useLenis but it doesn't seem to do anything? Here's my Scroller Component:...

FormField (horizontal layout)

How can I layout the FormField horizontally? That is, so that the label is next to the input field and not above it.

Using index.vue in component folders

I wonder if it's possible to have index.vue components in a subfolder of the components folder be recognized as a component with the folder's name? Let's say I have the following structure: ``` - components - form - form.vue...

UCalendar (change week days)

Hello! Can someone please give me an example of how I can display the weekdays in a different language in the UCalendar component? I saw that there's a week-day slot for this, but with <template #week-day="{ day }">{{ day }}</template> I get the first letter of the english weekdays and not the indices 0-6....

Using rspack instead vite-builder

How do I use tailwindcss with builder: rspack, it gave errors if I also used vite

setting CSP headers on server

I am a bit in the dark here. Our server admins are setting CSP headers and the Nuxt app breaks on production. Am I right in assuming the CSP headers can be set only in the Nuxt APP (with nuxt-security module) and not at all on the server?

svg logo

I tried to make a component and paste my svg logo inside the template but i get this error "plugin:vite:vue] Tags with side effect (<script> and <style>) are ignored in client component templates." my svg logo also has whitespace around the edges, what's recommended to clean this up to display my logo svg nicely

navigationmenu parent not highlighted when vertical nor clickable?

I have a UNavigationMenu which is horizontal on desktop and vertical on mobile. on desktop the parent has a link to my main page say "/store" and it has children like "/store/popular" etc on desktop this works great i can click the parent or children and the parent is highlighted if im on /store. however in the vertical orientation the parent is no longer clickable as it only toggles showing or hiding its children nav items. and in the vertical orientation the parent is not highlighted as active...

Self-Hosted Supabase & Nuxt

I’m planning to use Nuxt 3 with Supabase (self-hosted) as the database. What are the best practices for setting up the development environment? Should I use a single docker-compose.yml for both Nuxt and Supabase, or is it better to run Supabase in Docker and start Nuxt separately with npm run dev?...

handle uploaded profile pics

I'm building a component to let users upload profile pictures. should i be using the sharp node library to resize and convert them to webp before storing in supabase storage? or is there something better with nuxt

I'm struggling with pausing YouTube videos in a Nuxt carousel when navigating between slides.

``html <iframe v-if="slide.type === 'video'" :src="${slide.mediaUrl}?enablejsapi=1`" :title="slide.title"...

How to get asset URLs in api event handlers?

I'm trying to dynamically retrieve the URL of some assets using an api endpoint. Something similar to this: ```typescript export default defineEventHandler(async (event) => {...

supabase module, sign in and sign up server side. how to notify client to update session & user?

so i have the supabase module, and my client side form for login and signup calls a server route which uses server client to sign in or up the user. however the client isn't notified of this so no session is set etc until i refresh my page. what's the recommended solution?

Nuxt OgImage Error on Cloudflare Workers

I'm using a custom component where I have an img tag, and it can't load the image inside it even though the image file is in the public directory :\
Can't load image https://<domain>.org/images/og-image.png?1747482715691: Unsupported image type: unknown
Can't load image https://<domain>.org/images/og-image.png?1747482715691: Unsupported image type: unknown
...

USelectMenu event search

Is it possible to catch the event when searching in Selectmenu?

udrawer scroll when content is very long

I'm using a udrawer, if the content in the #content slot is very long by default is that scrollable or not? as it doesn't seem to be scrollable. can I set it to be scrollable or would it not work

useFetch return values are undefined

I have a call to my backend to retrieve data from a database. ``` const headers = useRequestHeaders(['authorization']) const { data, pending, status } = await useFetch('myEndPoint', { headers,lazy: true, server:false})...

nuxt ui form validation, zod, validate only specific field not whole form

Hi I have a nuxt ui form using zod error validation, one of my fields is a cloudflare turnstile token which is validated to ensure it's not empty. however once the error appears if i complete the turnstile challenge the zod error wouldn't disappear until resubmitting the form. so I added a watcher to check when the turnstile token isn't empty to validate the specific field in order to clear the error. however this seemingly triggers my whole form validation. ```formRef.value.validate('cfTurnstil...