Nuxt

N

Nuxt

Nuxt Community Chat Server

Join

Supabase Auth getSession or onAuthStateChange to getUser

I've added supabase otp authentication and noticed in the console that I am getting the following error. Using the user object as returned from supabase.auth.getSession() or from some supabase.auth.onAuthStateChange() events could be insecure! This value comes directly from the storage medium (usually cookies on the server) and may not be authentic. Use supabase.auth.getUser() instead which authenticates the data by contacting the Supabase Auth server....

Unable to use nuxt-ui's tailwindcss in my custom module.

I'm building a nuxt module, in which I need to use nuxt-ui components and tailwindcss. I've followed the documentation and setup my plugin environment with playground. When installing, i choose to use @nuxt/ui. The nuxt UI components are working from inside my module but any tailwind classes which are not present elsewhere, is not processed. I know that somehow I need to provide my module's components directory to look for the classes. but unfortunately, everything I'm doing is not working. ...

Unable to trap focus within a Nuxt UI Drawer

I have buttons inside a drawer, and when opening the drawer, page focus is not on the drawer, instead I can see focus changing on background elements as I hit tab. Eventually hitting tab enough times brings the focus onto the drawer content. What needs to be done to get: 1. Focus to be on the first element in the drawer when it opens...

How do I purge cache defineCachedEventHandler

I use defineCachedEventHandler in a few API's but how do I purge it?

Getting route params after changing route

Hi guys, u are my last chance before using vanilla javascript options or middleware + localStorage... I am having trouble with getting params from useRoute() from my dynamic URL routes. :1_check: Whenever I visit the URL directly OR reload the page I get the params correctly. :1_cross: I don't get the params on page, where I get by await navigateTo() (or await router.push()), which is my goal......

Multi Line Runtime Config from Env

I am trying to load a certificate from runtime config. It works fine locally (windows), but when i deploy it (dockerized) the runtime config value is set to empty string. ```nuxt.config.js export default defineNuxtConfig({...

What are the differences between preloadComponents and prefetchComponents

Does one only download a component, meanwhile the other downloads-and-pre-renders it?

UDrawer with inset doesn't fully animate off the edge of screen

Given NuxtUI's drawer (UDrawer) with the inset option... When closing the drawer, the drawer does not animate fully off the screen. Instead, as an end-user, I see the drawer animate to zero but is still visible for a moment, before ultimately just disappearing. Instead, the drawer should fully animate off the screen, just like when not using inset....

Could not resolve component "default"

Hi guys, I've got a big Nuxt App, and i randomly got an error Coule not resolve component "default" at /folder/:id(). I've this randomly in production, but not at all in dev. I have this since i migrated to 3.16. ...
No description

Running code at runtime only

Hi, I have some server-side code I need to run ONLY during runtime, not during pre-render / buildtime etc. How can I do?

How to deploy a static nuxt app

```ts export default defineNuxtConfig({ compatibilityDate: '2024-11-01', devtools: { enabled: true }, ...

Nuxt UI Icon size

I'm using the latest versions of Nuxt UI / Nuxt UI Pro, but I'm finding my icon sizes (and maybe my text too) are all considerably smaller than the Nuxt UI Pro Dashboard template. Is there any reason why this might be?

[NuxtUI] NavigationMenu - How to style active state

I've got small side menu and for this on default active state styling dosn't work for me. I've tried to style active state trough :ui prop but can't find proper way to change for example bg color. I know it's before element. I've tried following object formats: active:link, active:true:link, then both of those with variants: around. Nothing seems to work. Wrong approach or a template bug in NuxtUI?

Docker, Traefik, Nuxt, Laravel

hello there! I have a pretty complex docker compose file. I use Traefik as reverse proxy, Nuxt app for frontend, Laravel+Filamentphp for backend and laravel provides API endpoints. I use the Nuxt app in SSR mode. I set up some api in server folder to fetch the data from backend's api. On local machine it works fine, but on my VPS i get 502 error. I don't know how. i had to set a proxy routeRule for Nitro because the url paramteres didn't work before. If I set the localhost or the actual domain it's working on my local machine, but not on the server. it's wierd, i'm stuck, AI can't help. ...

SSR vs Client sided rendered

I am building a web app and have a server written in another language and want to write the frontend in vue/nuxt. I'm having problems understanding SSR and where it should apply and where not. In my case, an external api, where every page is protected, no public page. If I understand correctly SSR servers the html and so the page gets rendered as a static site which in turn turns up the SEO, absolutely great for public sided pages, but what about protected pages? Is it in my best interest to just turn of ssr for simplicity, e.g. all middleware etc....

Does Nuxt UI ship its own form library?

I'm coming from React and always needed a UI library + form library ( e.g. React Hook Form ) + a custom schema parser ( e.g. Zod ) I thought Vue people would be using https://vee-validate.logaretm.com/v4/ as their form library but it seems with Nuxt UI you only need a custom schema parser. Is this correct? 🙂 Maybe Nuxt UI is using vee validate under the hood? Is Nuxt UI capable of handling complex forms, e.g. field arrays with indices?...

Sourcemap in devTools in Nuxt 2

How can I enable sourcemap for debugging in Chrome devtools (Perfomance Tab)? I want to see '/component/alert.vue' instead of something like 'b4f815a.js'

Help With Nuxt Hub Database

I am using the Nuxt Hub database in my app, but am getting a "Server Error" when trying to execute a query using db.prepare('SELECT * FROM accounts WHERE email=?1').bind(body.email).all() (db is the hubDatabase()) More info on stack overflow...

Confusing useFetch behavior

The line calling useFetch doesn't always run. I've noticed it doesn't talk to my backend on starting the project and on refreshing it. But when I make a edit and save it then it runs. Whats going on? I think this is a async issue but I am unsure of where to go from here. ``` <script setup> const headers = useRequestHeaders(['authorization'])...
Next