Nuxt

N

Nuxt

Nuxt Community Chat Server

Join

nuxt ui page help

need help creating a wiki-style page

iphone zooms on input field click nuxt ui

Hi im using nuxt ui to make my site and im testing it on my phone currently and the default input fields when clicked cause my iphone to zoom my screen in onto it. is this standard or is there a way to prevent it from happening?

Hydration Mismatch Error on dev/demo envs, not locally

@kapa.ai and whomever else - I have a newer SSR Nuxt 3 app that uses Nuxt Apollo, and in particular I'm using useAsyncQuery. When I go to a couple of my routes directly or reload those pages, I receive the following hydration mismatch error: Dr-3uGvq.js:14 Hydration completed but contains mismatches. That's the only error feedback I'm given. Some of my routes have very similar code but the error doesn't happen, while it does on a couple other routes. NOTE: I'm not getting this error locally, only in my dev and demo environments (I haven't checked prod yet). Using Tailscale and GCP for hosting. 1. I am using new Date() in one of the components, but this error still occurs even when I remove that and hardcode the date....

cachine requests

can you explain the different options and what a pro would choose for diaplying the amount of discord members on a website using nuxt 3. i heard there are some new caching options to simplify this? say i want a server route that caches for 10 minutes

What's the most reliable way to detect if a user's system/browser is set to dark or light mode using

I want to find out the default theme settings for a browser/system without using any plugins

Nuxt ui animate error on forms

Hi I’m using nuxt ui with did for error validation. Where can I globally set a setting to animate the text errors that appear under the input fields?

How to make loading effect in layout

Create a loading effect in layout from NuxtJS 3.

Dynamic Titles on every page

How to make dynamic titles on every pages based on constants data.

Job Posting Board Help

Hey, I'm trying to create a Job Posting Board and I'm not sure what is the best Nuxt way to get the complex data types and store in it in a State/Cache so I can create a Filter for when people want to search for different jobs.
I was thinking of just using @HugoRCD 's project as a guide because I think it follows best practices! and I love all of his design work...
No description

Adding onSelect() to NuxtUI CommandPalette causes error "cannot stringify a function"

It works wihtout the onSelect() but fails with Error 500: Cannot stringify a function as soon as I add it back 😦
No description

Layout overload

Hello, I have a problem with my layout. When I connect with nuxt-auth I arrive on a dashboard that has its own layout, when I click on the logo that redirects to the home page or even on elements that bring me back to pages using the default layout, the sidebar of my menu and the authenticated header remain on my page. Should I unload the layout? I should point out that this only happens with dynamic page changes. If I update, everything works normally. *I use a translator...

Wrong page displayed after navigateTo() in route middleware

I have a global route middleware that checks a cookie for user data, and redirects if the user is missing a particular attribute. I'm using the navigateTo function, and the result is that the URL is updated correctly, but the contents of the page look mixed. I have the previous page's contents, plus a button from the page I was trying to redirect to. Is there something I'm doing wrong in the redirect?...

Bind values to the Pinia getter

What is the correct way to bind the default-value of the RadioGroup to Pinia getter? I have a getter called maritalStatus which returns a string and I would like to map it to the correct radio button....

best way to implement /register and /login

So i have a home paeg and i have pinia controlling a login and register modal. i want to be able to enter /login in my browser on my site and that should load my home page and use my pinia store to open my login modal. what's the recommended approach for this i tried a global middleware but maybe i implemented it wrong as it tried to load the page and returned an error it doesn't exist but i though middleware should run before the route tries to load the page?

Custom API (Laravel) with Nuxt

I'm starting a nuxt app and I'm having trouble implementing session management with a custom backend API (in this case its Laravel). Any guides out there? All guides I've seen implements server code using nitro engine but I already have a backend for that. Is there a simpler way to do what I'm aiming for? Thank you!

Reactive Headless Data Models in Nuxt

Hey all! Amateur programmer here. I've got an issue that I run into all the time, and I haven't found a solution yet. The issue is this: do people use composables to represent reactive class structures for their complex data models on the client? If not, what should I be doing? Background: I don't know where to keep my client-side data models. I know useState and Pinia are recommended but they seem to be more for app state, like app-wide UI elements, and I think they only work well for primitive data types. My data types are often heavily graph-based (as in graph theory), and so they tend to have complex dependency structures (across edge relations, which - similar question - how do I store those in my app?) I could just have my UI components handle all the dynamic data computation, but that leads to a lot of repeated code and processing. It would be better to have some kind of stateful headless instancing of these dynamic data models - which is maybe where composables come into play? So, is it bad to use composables as reactive JS Class structures, to decouple data from the UI, but also persist it on the client in a more computed way than primitive data in Pinia stores?...

mask errors on nitro/server api endpoints

nuxt 3 docs make it sound like it's currently not possible to create error handlers for server endpoints, but I may be misunderstanding. I see that you can define a error.vue for non-accept: application/json requests, but anything that's json, it still renders the entire error. in either case, I'm not sure if either work as expected, as I suspect both send the actual error back to the client. however, what if the error contains potentially sensitive data? how are you supposed to mask that so it sends a generic error back, not the actual, full, potentially sensitive error body back? do I have to mask any random potential calls on the server side, hoping I've captured each potential place that might throw errors?...

Can I redirect in a server plugin?

I have a server plugin that checks if a user is set in a cookie, and if not, redirects. The "navigateTo" function works for sending redirects in my dev environment (the "nuxt dev" command). But, it does not work when deployed and the web app is served by NGINX. I get the error "error Error: [nuxt] instance unavailable". How can I properly do a redirect in my server plugin?...

Invalid props not being reported by TypeScript

Hey guys! need some backup over here 👀 I'm new to the vue/nuxt ecosystem, been coding a product on and off for the last 3 months. Now I'm almost finished with the migration of @nuxt/ui from v2 to v3.. but I was not been as easy as I expected. I don't know if this is a thing with vue, nuxt or @nuxt/ui but I'm not getting errors from invalid props. In v2 for example I had this code:...
No description