server/api/[route].ts doesn't work with dynamic route
I use Nuxt3 with Laravel to separate frontend/backend.
I catch every GET api routes with
server/api/[route].get.tsexcept auth routes.
However,when I use dynamic route such as /api/users/${id}, that route is considered as location in Nuxt3,not API route to Laravel.
Nuxt 3.15.4...country picker input
in the nuxt ui docs there's a country picker example which lazy loads the countries from /api/countries.json i want a country picker in my form in a modal which is rarely opened. should i just keep the countries list in the component directly or is this a better approach like in the docs where they're lazy loaded from the server route? what are the pros and cons in this context I feel like storing them directly in the component would be faster not requiring that api call?
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 vitesetting 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
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