___anj___
___anj___
Explore posts from servers
NNuxt
Created by ___anj___ on 5/27/2024 in #❓・help
Typing dynamic template refs in a loop
I could just slap the as keyword:
return refs[`carouselItem${props.activeIndex}`] as HTMLElement;
return refs[`carouselItem${props.activeIndex}`] as HTMLElement;
And red squiggly lines will magically go away. But I'm not sure if it is really correct typing and anyway I want to avoid using as as much as possible (pun not intended). Do you have an idea how to overcome it? What would be a good refactor to make here?
2 replies
AAlokai
Created by ___anj___ on 3/9/2023 in #🙋|general-help
How to detect if a page has an error inside the layout
Small update - I've tested it on various scenarios and for some reason it does not work for the home page. The onSSR inside error.vue is not firing if we throw an error inside the homepage's onSSR. Not sure why. But I think I will scrape this whole idea with composable and I will try to look for other way to handle this one element that we need to hide. Also I figured that the second part about head() isn't a problem with current implementation, because it is only really needed for SEO. It already works for SSR we are not concerned about client side navigation.
28 replies
AAlokai
Created by ___anj___ on 3/9/2023 in #🙋|general-help
How to detect if a page has an error inside the layout
Thank you for your time 🙂
28 replies
AAlokai
Created by ___anj___ on 3/9/2023 in #🙋|general-help
How to detect if a page has an error inside the layout
@rohrig I added it inside onUpdated() instead of onSSR or onMounted and it now now looks like it is working as expected. But I need to test it thoroughly I mean something like this: Error layout (error.vue):
onSSR(async () => {
setError(true);
// ...
});
onSSR(async () => {
setError(true);
// ...
});
Main layout (default.vue):
onUpdated(async () => {
setError(false);
});
onUpdated(async () => {
setError(false);
});
28 replies
AAlokai
Created by ___anj___ on 3/9/2023 in #🙋|general-help
How to detect if a page has an error inside the layout
This isn't the ideal solution lets say, but I need to work around existing code.
28 replies
AAlokai
Created by ___anj___ on 3/9/2023 in #🙋|general-help
How to detect if a page has an error inside the layout
The ultimate goal is to hide one element from default layout using v-if and the second thing is to change data returned by a head(). Depending if there is an error on not.
28 replies
AAlokai
Created by ___anj___ on 3/9/2023 in #🙋|general-help
How to detect if a page has an error inside the layout
Yes, we have ~/layouts/error.vue and ~/layouts/default.vue
28 replies
AAlokai
Created by ___anj___ on 3/9/2023 in #🙋|general-help
How to detect if a page has an error inside the layout
When we get an error we get a default layout with error layout nested inside
28 replies
AAlokai
Created by ___anj___ on 3/9/2023 in #🙋|general-help
How to detect if a page has an error inside the layout
Core integration is this: "@vue-storefront/core": "^2.7.1",
28 replies
AAlokai
Created by ___anj___ on 3/9/2023 in #🙋|general-help
How to detect if a page has an error inside the layout
Thank you 🙂
28 replies
AAlokai
Created by ___anj___ on 3/9/2023 in #🙋|general-help
How to detect if a page has an error inside the layout
Yes. Then we get a race condition where on SSR stage we get something like this:
1. default.vue -> onSSR() -> setError(false)
2. error.vue -> onSSR() -> setError(true)
1. default.vue -> onSSR() -> setError(false)
2. error.vue -> onSSR() -> setError(true)
and then after that on the client side we get the reverse
1. error.vue -> onMounted() -> setError(true)
2. default.vue -> onMounted() -> setError(false)
1. error.vue -> onMounted() -> setError(true)
2. default.vue -> onMounted() -> setError(false)
In consequence the final value is isErrored = false
28 replies
AAlokai
Created by ___anj___ on 3/9/2023 in #🙋|general-help
How to detect if a page has an error inside the layout
Almost. I'm having trouble with picking correct hook in which I should call the setError method. First I tried putting it inside onSSR like this: Error layout (error.vue):
onSSR(async () => {
setError(true);
// ...
});
onSSR(async () => {
setError(true);
// ...
});
Main layout (default.vue):
onSSR(async () => {
setError(false);
// ...
});
onSSR(async () => {
setError(false);
// ...
});
For server side it works fine. If there is no error then only setError(false) is called from the main layout. And if there is an error on the page then setError is called twice, first from default layout with false, then from error layout with true. And it works as expected. The problem arises when I'm navigating on the client side. The setError inside the main layout is not called at all when doing client side navigation. So if I open a page with an error there is a setError(true) call. And then when I navigate to a page without an error, the value is not updated and it is still isErrored = true. I don't know how to get this to work. What hook should I use so that setError will be called both for server side and for client side navigation?
28 replies
AAlokai
Created by ___anj___ on 3/9/2023 in #🙋|general-help
How to detect if a page has an error inside the layout
@rohrig I was thinking about a small composable like this:
import { sharedRef } from '@vue-storefront/core';
import { computed } from '@nuxtjs/composition-api';

export default () => {
const isErrored = sharedRef(false, 'isErrored');

const setError = (error: boolean) => {
isErrored.value = error;
};

return {
isErrored: computed(() => isErrored.value),
setError,
};
};
import { sharedRef } from '@vue-storefront/core';
import { computed } from '@nuxtjs/composition-api';

export default () => {
const isErrored = sharedRef(false, 'isErrored');

const setError = (error: boolean) => {
isErrored.value = error;
};

return {
isErrored: computed(() => isErrored.value),
setError,
};
};
That we could use to store our custom state, and then use it inside our error layout. So that when error layout is being generated we will set isErrored to true. But admittedly this feels kinda wonky and I'm not sure if this is a proper path.
28 replies
AAlokai
Created by ___anj___ on 3/9/2023 in #🙋|general-help
How to detect if a page has an error inside the layout
And in case we will enter an existing URL that matches with a URL inside router configuration, but for some reason there is an error thrown (inside onSSR hook), then we get just this particular route, like for example home page route. I'm not sure how we could check if there is an error in that.
28 replies
AAlokai
Created by ___anj___ on 3/9/2023 in #🙋|general-help
How to detect if a page has an error inside the layout
28 replies
AAlokai
Created by ___anj___ on 3/9/2023 in #🙋|general-help
How to detect if a page has an error inside the layout
Hi, @rohrig . I need to know if I'm on the error page, no matter what the error is.
28 replies