Nuxt

N

Nuxt

Nuxt Community Chat Server

Join

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'])...

Problems setting up nuxt-auth-utils using custom provider

I'm having issues with this today. I followed @Atinux 's suggestion, and it seems to "want" to work, but it's creating excessive redirects, and on the Nuxt server logs it shows that it cannot find the env variables (even though I've added them), and it also logs that the callback url does not exist (even though I added it to /server/api/auth/custom-provider). I created the files in the suggestion, and they seem to be getting used, but my guess is that something is not configured correctly in nuxt.conf.ts In oauth key I have the following ```{ ['custom-provider']: { authorizationParams: { response_type: 'code', scope: 'profile email',...

nuxt v3.16.1 not rendering $refs when using LazyComponents

hey guys, im trying to "drilling" some $refs by using lazyComponents, how is the correct way to achieve this? if u look in the images that i uploaded, It will not work because i'm using lazy load in components, if i remove lazy, works. But if i need to achieve the refs values using lazyComponents, what i need to do?...
No description

UInputMenu creates a button, how to add an aria-label?

```ts <UInputMenu v-model="selected" :search="searchLocations" :loading="loading" selected-icon="" placeholder="Search for a location..." option-attribute="name"> <template #trailing> <UIcon name="material-symbols:search" class="w-5 h-5" aria-label="Search Stolpersteine"/>...

Where do other folders go if I have changed the root directory

Here is my nuxt config ```js export default defineNuxtConfig({ compatibilityDate: "2024-11-01", devtools: { enabled: false },...

Custom layout

Hi, i want to use nuxt ui pro to make a layout where i have a navbar on top of the screen sticky, then below that a collapsible chat on the right side of the screen and to the left of it a main content area. within that main content area i want to have my content slot at the top, below that a footer. so when the chat is closed the main content area takes up more space etc. also resizeable. what is the simplest and cleanest way to properly achieve this layout?

multiple awaited useFetch

Hello! Is it a good idea to have multiple useFetch-calls being awaited on a page after eachother? Or should I wrap them in something like Promise.all()? Does that approach have drawbacks? I feel like having them after one another might slow down loading of pages since they are sequential?...

[NuxtUI] Confused about 3.0.2 design system

Reading through the docs, it seems like I should be able to use classes like text-primary, text-secondary, bg-muted, bg-elevated, bg-accented, etc. out of the box, however that doesn't appear to be the case. Am I supposed to copy/paste the contents of the @theme default { ... } blocks from the Theme docs page into my main.css file for this to work? Thanks!...

Textarea `rows` prop on render

I'm setting the Textarea rows to 1:
<UTextarea :rows="1" />
<UTextarea :rows="1" />
...

[NuxtUI] InputMenu as Search window

Hi, I'm trying to use InputMenu for search bar in app. I'd like to display limited list of results in dropdown but I don't want dropdown to be open until there are at least 3 characters and fetch is initiated and done. I've tried mix "control open state" example with "witch fetched items", but dropdown is opening anyway. Did I pick a wrong tool or there is no way to block dropdown in any way?...

Can't build since migrate to Nuxt UI 3

I got this error when I try to build: ``` ERROR Nuxt Build Error: [vite:vue] [@vue/compiler-sfc] Failed to resolve extends base type. nuxi 9:54:55 AM If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:...

Input resetting after hydration is done

Hi, this might be a stupid question as I am not super familiar with Nuxt yet, but if I have the following setup (see image). If I would input anything in the textbox before the hydration is finished, it will just clear the whole textbox. I kind of expected the hydration to keep the value of the input in mind instead of resetting it. Am I doing something wrong here?
No description

UI v3 toaster position settings in app.config.ts

How to set default position in app.config.ts Is this right way? ```ts export default defineAppConfig({ toaster: { position: "top-right", duration: 0 },...

Layout with chat on the right side that can be closed with main content filling remaining space

Hello, I'm new to nuxt and nuxt ui pro so I've been trying to make a layout which has a chat on the right side of the screen that can be opened or closed. such that the navbar is on top with the chat below it stuck to the side of the screen. and where the main content grows to fill the space when the chat is closed. I tried to use dashboard sidebar and also tried dashboard panel but I must be doing it wrong as it wouldn't come out right. almost like this template example just with a navbar at the top too. https://chat-template.nuxt.dev/chat/73f3f17e-8484-4312-953a-0ca615a14502 '''<template> <div> <AppHeader /> <NuxtLoadingIndicator/> ...

Test SWR locally

reading the docs and i think swr is a good solution for me, but how can i confirm its working? i feel like my pages aren't loading as fast as i would expect. how/where do i check on the server if the pages have been rendered and stored is there a way to test this locally? with nuxt dev i don't see anything in the .nuxt/ folder...

Extremely low fps at page refresh / start

hey guys 👋 so i am working on my nuxt project, and i've been noticing that opening the page is extremely slow. so when i start the server, let it take its time and etc... then open the page on the browser, the fps starts out very low it starts at around 20 and then it keeps slowly going up over the next, approximately, 7 seconds to finally reach and stabilize at around ~160 ish. this also happens every time i refresh the page am wondering if i am doing something wrong for it to "cold start" like that, i really need guidance and advice here, thank you so much...

Fake Ref

Hey, I have code like this: ```javascript watch(tableStatus, (newStatus) => { if (newStatus === "success") { MAP_COLUMNS = tableData.value.columns...
No description