Nuxt

N

Nuxt

Nuxt Community Chat Server

Join
NTNicholas T5/3/2024

Help with diagnosing and fixing a 10+ second hung process in Nuxt

Hi all, I'm having an issue where a stuck process in some of the Nuxt generated code is causing my site to lag for 10-15 seconds. This happens when I attempt to navigate to a page using the Vuetify :to prop. It only happens on the initial page load, i.e. once the page is cached, the lag is still there, but drops down to about 3 seconds. I've included a screenshot from the Firefox Performance Profiler. Since all the generated code is minified, it doesn't really provide clues toward where the bug is happening, EXCEPT: when I hover over the yellow CPU useage monitor, it points towards an Array.prototype.indexOf call in _/nuxt/reports.{hash}.js as a possible culprit. I realize this is not a lot of information to go on. I'm relatively new to Nuxt and I'm just looking to see if anyone has tips towards debugging something like this. Sadly, this is only happening on our production server, and isn't reproducable in dev or staging. Thanks everyone!...
No description
WWild5/3/2024

useASyncData & watch issue

Hello friends, I've been having a hard time using watch. I've finally found a suitable ref for watch, but the refresh is too late. My store update but what is displayed is one step behind. If i change the lang from fr to en, it'll show fr, and from en to es, it'll show es. What am I missing ? If I use a plugin with
nuxtApp.hook('i18n:localeSwitched',
nuxtApp.hook('i18n:localeSwitched',
and manually call refresh, it works as I would like it to....
Ccosbgn5/3/2024

Did anyone manage to handle CORS with h3/nuxt/nitro?

I'm trying everything like this: ```js export default defineEventHandler( async (event) => { const cors_headers = { ...
KKealanau5/3/2024

Ui Nuxt UCarousel passing in a value to start it on

I have currently set up a UCarousel but I would like the functionally of providing an index, or a value to start in the carousel. If i was to put this in a carouselRef.value.select(props.modelIndex); setInterval but i only want it to fire first. nextTick didn't work. Any help would be greatly appreciated the props passed is const images = [...
Hhz22225/3/2024

how to use router in a pinia store in Nuxt 3?

Hi guys! How can I use router in a pinia store?...
PPoTTii5/3/2024

Could not compile template ui.colors after installing Nuxt UI

I dropped Nuxt UI into my existing project that uses tailwind already, when I run npm run serve, i get this error.
No description
MMMuhammad Mahmoud5/3/2024

Question about using SWR/ISR with user auth

Hello I'm thinking about enabling swr for some pages to avoid waiting for rendering everytime and enhance the response time. But I'm worried it would cause conflicts with user state. An example is I have a Login button in the header which shows a user dropdown if logged in and a Logout button. Are these would be handled properly if using swr or do I have to make certain adjustments?...
EEric5/3/2024

Middleware for OUTGOIN requests ?

from what I understand, middlewares run on every route change. But I would like a piece of code to run every time a request is made to the file storage that live on different domains. I would like to intercept to request made by img tags to set the authorization header... Is there a way to create that ?...
BBootsmann5/3/2024

LCP on pagespeed is big

Have anyone the same issue as me, i've optimized my website as much as possible with nuxt. When i run the test i get an error saying my LCP is big From what i can see it describes it as being my text that has the biggest content load. Have anyone fixed this? I'm using
npm run build
npm run build
with prerendered routes....
No description
MMrBobDaisy5/2/2024

Use external ApiS in Nuxt?

Not sure I'm 100% understanding how to handle external APIs in Nuxt. I need to store a secret key in the .env file and access it later, and make additional queries based on a search from the user. Currently I have a server/api/jobs.js file that holds the initial query, which works great for the initial render. But I'm trying to search for jobs at a different URL in the API call with a query param, set up as server/api/searchCityJobs.js right now. I was doing this in the component previously for testing purposes, but I obviously don't want to expose the private API key. Does anyone have any insight into this?...
WWazbat5/2/2024

Nuxt not detecting patch route

I've created a route with a path param, however no matter how I structure it and restart my vue/tsc server, it appears to not detect the route I've tried structuring the route as ``` server\api\organisations[organisationId].patch.ts...
No description
ZZampa5/2/2024

Get dynamic array of page names in Nuxt application

I have a scenario where I'd like to add a middleware that references an array of all the page names that exist at the root of the application (i.e. /user, /faq, /about, etc.). Rather than hardcode an array of all those names ['user', 'faq', 'about'], is there some way via Nitro or Nuxt to parse/call to get all the page names that exist within the current Nuxt application?...
EEtzBetz5/2/2024

how to delay queryContent until useContent data is available?

Hey there, I'm currently building a website, but I'm having problems with requesting specific data. I am in document mode and in the script part of a slug page....
Ssirlan5/2/2024

Content component not found

For some reason it is saying that it couldn't resolve the component to be used in the content, even though it is in the right folder, and can be found from other places
No description
Hhz22225/2/2024

how to get the url where the user came from

Hi guys! How can I get the url from which page the user came to my page?
Sstefanpeev5/2/2024

Need to set cookies in headers and figure out how to use useState

</script> import { createError, eventHandler, readBody } from 'h3'; import { z } from 'zod'; import { sign } from 'jsonwebtoken';...
FFigma5/2/2024

Where to deploy with long-polling functions

I'm a bit confused where Nitro hangs out in the deployment space and how these deployed environments manage setInterval alongside Nitro endpoints. I have a function that runs every 10 seconds and is currently managed in Nitro like so: ```ts...
KKlaphinir5/2/2024

Nuxt 3 Sitemap with @nuxtjs/sitemap

Hello there. I am a junior frontend dev aswell as a newbie in SEO (but improving !) Sitemaps are for SEO needs a must have, and so i wanted to use the nuxt module to add one. * i added nuxtjs/sitemap with this command yarn add -D @nuxtjs/sitemap * screeshot 1 (left) is a bunch of warnings after installing nuxtjs/sitemap. No error here...
No description
Iisakwang5/2/2024

Cloudflare fail to publish

Hello Im getting an error when deploying to github, but after googling and trying to find the error in my project im stumped. Has anyone else ran into this and fixed it? ...
Iiggiexd5/1/2024

refreshing static page goes from 'TestPage' to 'TestPage/' and then trailing slash is removed

Ive been trying to figure this out for couple days, I have no idea what happens, I created new project (completely empty) the issue still remains. website: https://tinydart.com/TestPage how to reproduce: going to the page, refreshing, it shows page with slash at the end and then slash gets removed. this messes up google console (causes 'Page Redirect' error) as its a redirect...
No description
Next