SPA Routing Brand Header & Navigation

[TFLXX]

Scale Version
v3.0.0-beta.110

Framework and version
vite: 3.0.1
vue: 3.2.37

Additional context
Is there any way to have a SPA friendly way of navigate?
Using some hacky js in the href-tag, as we tried, isnt really best practice.

[acstll]

Hi @TFlaxx, thanks for getting in touch and asking.

Using framework components, e.g. <router-link> inside the current Brand Header is not possible at the moment, it's a known limitation. And we're currently debating on how to make this better in the future.

(In other Scale components like the Sidebar Navigation, it is already possible to use framework components for links.)

However, navigating programatically, e.g. this.$router.push('/dashboard') shouldn't be a problem and it's a valid, documented way do it.

You can have the regular <a> tags for your links that the Brand Header provides, listen for clicks once, preventDefault and then call $router.push with the href of the clicked link. I'm sharing some snippets below to illustrate the idea.

<scale-app-header @click="handleLinkClick">{/* ... */}</scale-app-header>

methods: {
  handleLinkClick(event) {
    event.preventDefault(); // avoid native browser navigation
    try {
      // you could check target is actually an `<a>` tag here
      const url = new URL(event.target.href);
      this.$router.push(url.pathname);
    } catch (err) {
      // ...
    }
  }
}

Is something like this what you're currently doing?

[TFLXX]

After a couple days of research we found a solution which we will use for now.

In our setup, we we're not able to use an object as mainNavigation prop for the <scale-app-shell>.
The object contains onClick: () => router.push("/") instead of href on the <a> tags.
That's why we had this issue and used <scale-app-shell :main-navigation="JSON.stringify(mainNavigation) />" as fallback for creating our mainNavigation.

This is a lazy-loading vue3 issue, see here

But:
We found out, that Scale is getting built as dist and not as dist-custom-elements, which should be used for any frontend framework integrations. See here: Stencil.
Are there any future plans, to change the build to dist-custom-elements?

Building Telekom Scale with dist-custom-elements creates some new issues with babel, tsc or maybe any other transpiler/compiler similar to this issue

Our fix for using the SPA router inside the ScaleAppShell with vue3:

• import { defineCustomElements } from '@telekom/scale-components/dist/custom-elements' instead of @telekom/scale-components/loader
• import '@telekom/scale-components/dist/scale-components/scale-components.css' as usual
• call defineCustomElements()
• use :mainNavigation="mainNavigation" instead of :main-navigation="JSON.stringify(mainNavigation)"
• mainNavigation is an Array of Objects, like here

[acstll]

Thanks for the feedback @TFlaxx — this is a great finding.

Stencil can have many output targets, so besides to dist we're using the now deprecated dist-custom-elements-bundle.

Are there any future plans, to change the build to dist-custom-elements?

definitely, we will then replace the deprecated dist-custom-elements-bundle with the new dist-custom-elements and see if there's anything else we can optimise. (I'm thinking it would be worth mentioning about these alternative loading approaches in Storybook as well.)

I'm closing assuming you've been able to solve the issue. Feel free to re-open if not, or keep the conversation going. Any feedback is valuable.