6

I have a Vue 3 application, and a StencilJS component library. One of my Stencil components used a default slot earlier, and it worked well with Vue. Now I introduced named slots in my Stencil component, but the named slots aren't working from Vue anymore. I am aware that the slot attribute is deprecated, so I tried this:

<template v-slot:body>
    //content to go inside Stencil component body slot
</template>

However, it comes as blank, as in no content is rendered. For now I am using the old way to add slot by adding an Eslint disable as follows:

<!-- eslint-disable-next-line  vue/no-deprecated-slot-attribute -->
<div slot="body">
    //content to go inside Stencil component body slot
</div>

This is working, but I will have to add the disable everywhere. I want to do it the right way. Can someone tell me how to do it?

Rutwick Gangurde
  • 4,772
  • 11
  • 53
  • 87
  • Hey i run into another issue i try to use a stenciljs component in a slot inside a vue webcomponent and it render sub component twice did you have any news to solve this issue ? – DrMabuse May 20 '21 at 10:07
  • No good solution. need disable vue/no-deprecated-slot-attribut then change the code. – JackChouMine Dec 20 '22 at 08:12

1 Answers1

0

What the Stencil docs say about this:

"The slots that are used in Stencil are Web Component slots, which are different than the slots used in Vue 2. Unfortunately, the APIs for both are very similar, and your linter is likely getting the two confused. You will need to update your lint rules in .eslintrc.js to ignore this warning:"

module.exports = {
  rules: {
    'vue/no-deprecated-slot-attribute': 'off',
  },
};

See the Stencil docs: vue/no-deprecated-slot-attribute

Fabio Ribeiro de Carvalho
  • 661
  • 7
  • 21