Vue 2: ScaleAppShell slots about scale HOT 9 CLOSED

That's not a problem. I will just remove the proxies.
Everything seems to work fine, I'll just have to manually do some bindings, as you said.
Thanks again! 😊

from scale.

Thanks for asking @SirTomme

The syntax needed is the standard slot attribute. So nothing specific to Vue.

The value for the slot attribute must be the name of the slot you want to replace within the Shadow DOM of the web component. This is what the syntax looks like:

<div slot="header"></div>

Here's an example for adding a custom logo and and custom icon menu, in any framework since this is pure HTML:

<scale-app-shell>
  <scale-app-header slot="header">
    <div slot="logo">
      <span>Hello</span>
    </div>
    <div slot="menu-icon">
      <a href="#">A link</a>
    </div>
  </scale-app-header>
</scale-app-shell>

You can see we use the <scale-app-header> element to fill the header slot within <scale-app-shell>. And then use a div to fill both logo and menu-icon slots respectively.

Within scale-app-header there are the following slots available:

• logo
• menu-main
• menu-icon
• menu-sector
• menu-addon
• menu-mobile

(I can understand the docs can cause some confusion since some Vue syntax is there. We're working on fixing this.)

I hope this helps.

If you would like to dig deeper into slot composition, I can highly recommend this article: https://javascript.info/slots-composition

from scale.

@SirTomme did you get this to work?

I'm trying to build a custom header in Vue 2 and I can't fill any of the named slots in ScaleAppShell.

Here is my template:

<template>
  <scale-app-shell>
    <scale-app-header slot="header">
      <div slot="logo">
        <span>Hello</span>
      </div>
      <div slot="menu-icon">
        <a href="#">A link</a>
      </div>
    </scale-app-header>
    <router-view />
  </scale-app-shell>
</template>

I used the example provided by @acstll here and added a router-view.
The router-view is rendered in the default unnamed slot, but the custom header does not work.

Any tips on how to make it work would be great!

from scale.

Unfortunately, no. I tried the example but it did not work and I hat not much time to investigate any further.

from scale.

Reopening this to investigate further. Thanks for the feedback @SirTomme 🙏

from scale.

@zphilipp I created a working example in codesandbox with the exact same code snippet:

https://codesandbox.io/s/suspicious-hofstadter-vue-shell-router-w01j2?file=/src/App.vue

Could you maybe provide some more details so we could help you better? For instance:

• what tooling (e.g. vue-cli) are you using
• what version of Vue
• what version of @telekom/scale-components
• what errors or screen state exactly are you getting
• any other thing worth sharing

Thank you!

from scale.

@acstll After looking over your example I realized that it only works if I use the scale components in my template without importing them inside of the script tag. I forked your example in codesandbox to demonstrate this:

https://codesandbox.io/s/suspicious-hofstadter-vue-shell-router-forked-e0tj0?file=/src/App.vue

Am I not supposed to import and register the components?

Thanks a lot for your help so far!

from scale.

You're welcome, thanks for the feedback!

This looks very much like a bug. The Vue proxy package (or wrapper) is preventing the slots from working properly somehow.

Am I not supposed to import and register the components?

according to our current docs you could say so, but unlink React (where using the components without the proxy package is almost impossible), Vue perfectly supports web components, so the wrapper is kind of a nice-to-have. Historically, this proxy package (@telekom/scale-components-vue) has been more trouble than it has actually helped, and there is no way to support Vue 3 with the current setup. So we decided we're going to deprecate this package (Angular too). We just haven't found the time to actually (and properly) do it.

We're gonna do some more testing, update the boilerplate/examples and update the documentation; hopefully very soon.

So in summary, you don't need to import/register the components, only the defineCustomElements() call and Vue.config.ignoredElements = [/scale-\w*/] setting are needed.

There are two important things to keep in mind:

• v-model is not gonna work, you have to do the bindings manually (here's an example: #402 (comment))
• for attributes that take "data", like an array (header, footer and data-grid), you might need to JSON.stringify it

Going back to the bug. Since we have plans to deprecate the proxy package, maybe there's no point in hunting for it. Would there be anything preventing you from removing the proxy package from your project?

from scale.

You're very welcome!

from scale.