___anj___ Comments - Answer Overflow

Topics

___anj___

Explore posts from servers

•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

•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

•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

•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

•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

•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

•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

•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

•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

•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

•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

•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

•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

•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

•Created by ___anj___ on 3/9/2023 in #🙋｜general-help

How to detect if a page has an error inside the layout

28 replies

•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