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
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...
Having the fetch context (SSR) in a composable
Hello,
Currently if i'm using the following code in a page, it works.
```...
turnstile module where to set options globally
using turnstile module, ``` turnstile: {
siteKey: '<your-site-key>',
options: {
appearance: 'interaction-only',
},...
Issues deploying to Azure SWA with Universal Rendering.
Hello, I'm just looking for some direction as I've hit a wall. I'm moving a Statically Generated Nuxt3 site hosted on Azure SWA to use Universal Rendering hosted on SWA. So far I'm only getting a blank screen after deployment. Can someone point me in the right direction to debug this, as I'm not familiar with Azure and what I've found here and via Google has not been helpful, since I seem to have everything configured correctly, env variables loaded in Azure, etc. Thanks for any help and directi...
What happens if two modules have the same configKey?
Reading the docs (https://nuxt.com/docs/guide/going-further/modules), it's unclear what happens.
This line in the
defineNuxtModule section makes it seems like they get automatically merged?
"Support defaults and meta.configKey for automatically merging module options"...textarea round only left corners
```<UTextarea
ref="textareaRef"
v-model="content"
autoresize
:rows="1"...
Can I use useAsyncData for user interactions?
I'm working with a CMS or a third-party service that provides its own query layer. According to the documentation, I should use
useAsyncData for data fetching.
However, I also want to fetch data in response to user interactions, such as submitting a form or clicking a button.
In these cases, should I still use $fetch, or is it appropriate to use useAsyncData as well?...How to reference custom logic when adding a template in my own Nuxt module?
Hi, question for the module authors among us, I'd like to expose custom functionality in a template I am adding using
addTemplate({...}), right before it I am calling my addPlugin(resolver.resolve(...)). Since this is going to be accessible through #build I do not know how to import it correctly? I've looked at existing code and it seems to be possible to import stuff from # and stuff installed in your package.json. How could I make my own #my-module module and expose it through there? I hope my question makes sense, thanks in advance.
Here's the relevant code:
```ts
setup(_options, _nuxt) {...Loading local postcss plugins
Can't find any documentation or a way to load local postcss plugins. Is there any examples?
nuxt-seo - robots.txt error
Hello,
When installing and using nuxt-seo, I was expecting it to handle the robots.txt by itself, specially reading this :
https://nuxtseo.com/docs/robots/getting-started/installation
...
Data Fetching Composable Advice
We have an Organization entity in our app, and each organization has related Events. We’re expecting to reuse this fetching logic across multiple parts of our app.
Fetching the organization data alone is straightforward and nicely encapsulated:
```ts
// composables/useOrganization.ts...
Nuxt ui drawer set z layer to lower than that of another object?
I have a bottom menu stuck to the bottom of my screen on mobile and I want to use a drawer component as a sub menu which slides in from underneath this bottom menu. I tried manually setting z-10 on the UDrawer and z-20 on my bottom navbar stuck to the bottom of the screen on mobile however the drawer is always above it. is there a way to do this?