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:...
supabase nuxt confirm page on email confirmation
Hi i have supabase setup using the module however when the user clicks their confirm email link they get sent to my /auth/confirm page where i put this code ```<script setup lang="ts">
const user = useSupabaseUser()
const redirectInfo = useSupabaseCookieRedirect()
watch(user, () => {...
Nuxt UI custom colors
@kapa.ai It's not clear to me exactly how based on the currently released versions of Nuxt and Nuxt UI how I can specify and use a custom colour in my components and pages, is there any detailed information available on how to do this in the current versions. What files need updated? I'd prefer to not use "color mode" but may want the option to use it at a later date. Lastly would it be wise to enable nuxt 4 compatibility mode?
i'd like to see a perfect example on how to add a custom variant to a button please
please show me the details of this example using the app.config.ts configuration
Issues Deploying Nuxt Application on o2switch with SSR and drizzle-kit Migrations
Hello,
I am learning Nuxt and have reached the deployment phase. However, I am encountering significant issues. I am trying to set up the Nuxt server on the o2switch hosting service (which supports Node.js and PostgreSQL), but it is not working.
I run npm run build and upload the output file to the server via FileZilla. I understand that I need to use a loader with a loader.cjs file to load the .mjs files....
multiple modals how to be more efficient loading them
hi i have a site with many modals like login modal, register modal so on so forth. i put them in my default layout to be available everywhere is this the right approach. should i be using some kind of lazy loading or some strategy considering the modals aren't needed immediately usually and sometimes aren't used
random no response errors on usefetch.
hello i have people reporting some issues with problems submitting a form in my project (using useFetch but named differently). the error that happens in the try catch is
<no response> Failed to fetch but the connection is OK and server is online. as the error logging also goes in a usefetch post and arrives to the backend fine? when people open a new window in their browser the issue is no longer there. so its very random. how could i diagnose this as i cannot reproduce it on my system? it also is not as descriptive as i would like making diagnosing the issue way harder. anyone with any advice on fixing such issues?
it happens on the following post request:
```...vitest not working with imports form '#app'
I use vitest for tests and I want to still use '#app' imports like: import { useRuntimeConfig, useRoute, createError, useRequestURL, useFetch } from '#app'
Unfortunately I get this error when running tests
FAIL tests/composables/useCraftQuery.test.ts [ tests/composables/useCraftQuery.test.ts ]...
Nuxt2 displays wrong meta tags when the page is deleted
Hi everyone!
Nuxt2 returns the meta data of the last searched for page when I try to send a page that was deleted, the behaviour is very weird and I have been debugging it all day but with no hope
I have two main components one is the welcome component and this component does the fetching as in here...
Nuxt UI 3 Dynamic Icons
I am in the process of migrating my project to Nuxt 3 and an issue I am having is with a dynamic icon feature I had in a form.
Previsouly I had it setup the following way:
```
const displayIcon = computed(() => {...
Supabase server side login setup
Hi, I saw a lot of examples for using the supabase nuxt sdk client side but I want to handle user registration server side and I'm wondering if there are some good resources to watch or read through for setting that up properly?
Apollo | graphql | proxy
Backend runs on Sprapi on pm2. Frontend is Nuxt on pm2. Installed Apollo Graphql server to get data from backend.
I wanted to proxy
localhost:3000/graphql to localhost:1337/graphql.
How to correctly proxy, so user will not see backend. User must see that graphql request is going to localhost:3000/graphql, but in reality these request should proxy to localhost:1337/graphql
```js...link checker exclude links
https://nuxtseo.com/docs/link-checker/guides/exclude-links
How do I ignore query params too?
currently I have:...