[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'])...
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?...
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?...`useFetch` not reactive after redirection when SSR is disabled and used in a layout
Do you have any idea what might be causing this issue? https://github.com/nuxt/nuxt/issues/31875
[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?
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 },...