Vue 3 slot deprecation

[tdinino]

Vue 3 has apparently deprecated the slot attribute. https://eslint.vuejs.org/rules/no-deprecated-slot-attribute.html

The rux-dialog, and presumably most other components that understand slots, requires the slot attribute "header" to be set in order to get the span/slot in the actual component header.

Is there a plan to migrate the deprecated slot attribute to use/understand the element when using Astro with Vue 3?

[markacianfrani]

We recommend disabling that eslint rule for now. https://astro-components.netlify.app/?path=/story/astro-uxds-welcome-vue--page#disable-eslint-rule

What happened was Vue 2 had a slot attribute but in Vue 3 they changed it to v-slot because slot is part of the HTML spec and it was conflicting. In v2.6 they added this new eslint rule as part of their migration effort to help people moving from v2 to v3.

The reason you're getting the warning is because the eslint rule can't tell that you're using a web component, it thinks it's a Vue component. So you should be safe to just turn off the rule or ignore the warning.

One exception being if you're currently undergoing a migration from v2 -> v3. Those warnings may be useful so I'd recommend doing that first before disabling the rule.

The components themselves should all work fine using slot. If you're running into any specific issues, you can open up an issue and we'll be happy to help