N
NuxtJonathan

skeleton does not work on dynamic routes

guys, can anyone help me? the skeleton is appearing on the main page but on the page where the product is shown, not
No description
No description
J
Jonathan18d ago
the home and product page code, like this:
No description
No description
J
Jonathan18d ago
I tried adding server: false to the code as well, but it doesn't work This server: false only works on the main page my bad for my poor english
L
l422y18d ago
try removing await on your useFetch
J
Jonathan18d ago
dont worked
L
l422y18d ago
you'll need to provide a repro/stackblitz
J
Jonathan18d ago
GitHub
GitHub - JonathanSaan/calisaan: An Ecommerce about calisthenics
An Ecommerce about calisthenics . Contribute to JonathanSaan/calisaan development by creating an account on GitHub.
L
l422y18d ago
that's not really a reproduction of the issue
J
Jonathan18d ago
L
l422y17d ago
that's just the repository in a stackblitz we need a reproduction of the issue
J
Jonathan17d ago
i don't understand I don't know much about these more technical things
L
l422y17d ago
i cannot reproduce the problem you are having just by running your application so i can't help without a reproduction of the issue
J
Jonathan17d ago
but the problem is already reproduced when the application is running there are no errors in the console or terminal, the skeleton just doesn't appear on the dynamic page. in /product/${id}/{$name}
L
l422y17d ago
it is not occuring to me when running the application
J
Jonathan17d ago
is the skeleton showing up for you? on the dynamic route
L
l422y17d ago
i am not seeing any skeletons as the data loads too quickly
J
Jonathan17d ago
that's the problem. the skeleton doesn't appear regardless of whether the data has been loaded or not. if the page is restarted, which is when the skeleton should appear, it doesn't appear
L
l422y17d ago
i am not seeing any skeletons at all because i just see what should be there
A
Anthony17d ago
It could be the data is loading too fast, have you tried added a delay to see if that is the issue?
J
Jonathan16d ago
shows this:
No description
No description
A
Anthony16d ago
I’ll share with you how I handle this. I’m at work at the moment but I’ll respond back soon
J
Jonathan16d ago
okay
A
Anthony15d ago
Sorry for the delay. This is how I do this. I set a const with a boolean of always true (because it should always be true initially) const loading = ref<boolean>(true);
const { pending, execute: productExecute } = await useAsyncData(
"products",
async () => {
loading.value = true;
const { data } = await client
.from("product_listings_homepage")
.select("*")
.eq("slug", route.params.slug);
products.value = [...products.value, ...data];

loading.value = false;
},
{
server: true,
lazy: true,
immediate: false,
}
);
const { pending, execute: productExecute } = await useAsyncData(
"products",
async () => {
loading.value = true;
const { data } = await client
.from("product_listings_homepage")
.select("*")
.eq("slug", route.params.slug);
products.value = [...products.value, ...data];

loading.value = false;
},
{
server: true,
lazy: true,
immediate: false,
}
);
then inside template if we're not loading we need to show the actual data
<template v-if="!loading">
Data shows here
</template>
<template v-else>
show skeleton
</template>
<template v-if="!loading">
Data shows here
</template>
<template v-else>
show skeleton
</template>
if you set the useAsyncData to immediate: false you'll need to also call the function to run it. I set a timeout within the onMounted so the skeleton has enough time to show and its not too flashy.
onMounted(async () => {
setTimeout(async () => {
await productExecute();
}, 500);
});
onMounted(async () => {
setTimeout(async () => {
await productExecute();
}, 500);
});
Currently building this out but I use these methods here --- https://fairshopping.io/
J
Jonathan15d ago
bro, the problem was actually here:
No description
J
Jonathan15d ago
I changed it and it "worked"
J
Jonathan15d ago
but when I restart the page, the skeleton stays forever
No description
No description
No description
No description
J
Jonathan15d ago
No description
No description
J
Jonathan15d ago
but when I go from one page to another, it works
No description
No description
A
Anthony15d ago
Can you share a repo or demo so I can debug the issue
J
Jonathan14d ago
I was testing here and realized that the problem is specifically in the activeImage variable, when I remove this variable and the image, the page works
No description
J
Jonathan14d ago
No description
J
Jonathan13d ago
I think the message I sent yesterday wasn't there, so I'll say it again, it's almost working, but the problem is in the image
No description
No description
No description
J
Jonathan13d ago
I managed to solve it here, I was using ref instead of computed
J
Jonathan13d ago
I've been testing here and realized that I can't change the image when I select another one
No description
J
Jonathan13d ago
i think problem is on setActiveImageOrSelectSize function
No description
No description
P
pyplacca13d ago
You’re attempting to write to a computed state which isn’t writable. That won’t work
J
Jonathan13d ago
now i've managed to solve it for real. i changed a few things and added watchEffect to the project and it worked thank you for trying to help me
Want results from more Discord servers?
Add your server
More Posts
how to generate static HTML pages just for some of the routesI'm trying to generate 4 static HTML pages from a huge list of routes that the app has But I only seUDashboardPanel footer (@nuxt/ui-pro)I'm trying to put a footer on the main (`grow` enabled) panel but I can't get the css right. in the useRuntimeConfig() is returning undefined valuesIn my `.env` file I have something like this: ``` NUXT_PUBLIC_LOGIN_DOMAINS="domain1.com,domain2.co@nuxt/eslint autofix?when using `@nuxt/eslint` instead of the old `@nuxtjs/eslint-module` how does one enable autofix? `Check whether any page has fully mounted from the root App.vueSome of my pages have a ```ts definePageMeta({ hideSidebar: true }) ``` which sets the `hideSidebarGetting error "Component is already mounted" when using "useFetch()" and changing route.I am getting the error in my console: ``` [nuxt] [useFetch] Component is already mounted, please uHelp with postinstall: sh: nuxt: not foundHello, I need help with a concern I have regarding the `postinstall` script that runs `nuxt prepare`Types errors in Storybook and tests after upgrade nuxt to 3.11.0Hello there! I upgrade the nuxt version from 3.9.0 to 3.11.0, but now when I run `npm run tsc` I geNuxt eslint module helpI'm joining a new nuxt project that have vue3 eslint plugin, does the Nuxt Eslint Module replace theTailwind CSS errorKeep getting this error in my Nuxt project on saveRouting to another page leads to null parent node errorWhen converting a Vue app to Nuxt and after following directory and layout structures, routing leadsi18n doesn't work with 3.11I already reported a bug for it, just wanted to post for posterity. When using `getRoutseBaseName`,eslint vs typescript 5.45.4.3 is being pulled by nuxt but eslint doesn't like it even if I explictly install the latest `vituseNuxtApp doesn't have my custom pluginsThere are no my custom plugins inside the useNuxtApp hook, they just don't show up.Middleware called 3 times instead of 2 ? (stackblitz reproduction)Can you tell me why my middleware is called 3 times ? https://stackblitz.com/edit/github-3enzca-ixdadd class to default root div __nuxtHi, I'm migrating a VUE 3 SSR project to Nuxt 3 and saw that Nuxt adds a rot div that we don't have Maximum call stack size exceededGetting the below error after updating my nuxt version from ('^3.5.1') to ('^3.11.1). and it will brModule creation questionI'm working on a module and I need to install another module that can import/install other modules oWays to have local middleware inside server/I want to do authentication inside some of protected api routes. normally i have to put the checkingCan you use useFetch twice in one composable, once on server, once in client?I am trying to use `useFetch()` once on the server and a second time in the client, in one composabl