Preserve the state of the web component view while switching between the tabs.

[saikrupa210]

As a Developer, I have integrated the stoplight elements package using the Web components In my vue js SPA. In my use case, I have rendered the stoplight view in tabs which is similar to the below image.

In the above image, the stoplight component has been rendered in the reference section. Steps to replicate the issue

• Browse any other section of the stoplight view(eg: accounts)
• Switch to any other tab and again to reference
• Stoplight web component is rendering the overview section instead of the accounts section.

Can you please help me on preserving the current state of the stoplight view after switching between the tabs ? Below is the code snippet used for rendering the stoplight-view <elements-api :apiDescriptionUrl="specUrl" router="memory" class="elements-api mb-3" > </elements-api>

[owen-caulfield]

+1 on this. Navigating between examples/tabs/routes inside stoplight when embedded in vue causes a full refresh of the entire module. I'm really wanting to use this tool, but this is a deal breaker if I can't find a way to resolve this.

[owen-caulfield]

@saikrupa210 I have resolved part of this issue locally, but only using <elements-api>. Developer portals (<elements-stoplight-project) hard refresh every time you click a link in the web component, regardless of config (at least when embedded in Vue).

To resolve the issue using <elements-api> in Vue, ensure you have the following config:

<elements-api router="memory" baseUrl="yourBaseUrl"> - set your baseUrl to the beginning of the path you are using for the page rendering elements api (/documentation) etc.

Additionally, remove any router logic on the page rendering elements api (guards, etc).

Doing all of this, it no longer hard refreshes when clicking links/changing sections. However, if you refresh the page in memory mode, it will error or 404. I am working on a solution for this.

[venkatgarlapati]

@owen-caulfield Any luck here Thanks for looking into it

[owen-caulfield]

@venkatgarlapati regarding the 404 on refresh?

I am actually no longer using stoplight for this use-case in my project, however, I believe before I transitioned to a separate tool I did resolve this issue using a fallback route for all paths originating in the stoplight's page's baseUrl value (/documentation etc).

For some real high-level info on setting up a fallback route, see https://router.vuejs.org/guide/essentials/history-mode.html

You'll have to add some custom logic if you want to check requests for the baseUrl value when initiating the fallback routing, however you may be able to avoid the error without this.

Hopefully that saves you a little time - as I mentioned I ended up moving away from this implementation but I believe that's where I was ended/doing before the move.

[chohmann]

Hello!

Our team recently took over the stewardship of the elements repo.

Due the volume of un-triaged issues that are pretty old and the time it would take us to get caught up on all of them, we kindly ask that you open up a new ticket if this is still an issue you're struggling with.

If you open a new issue please include:

• clear steps to reproduce that include example OAS specs, application setup, code, etc.
• the error or issue you are experiencing
• the expected behavior

We will be triaging any new tickets in a timely manner.

Thank you for understanding!