CODEWITHSUNDEEP
javascriptvue.jsvuejs3stenciljsvuejs-slots
Rutwick Gangurde
Rutwick Gangurde

Reputation: 4912

VueJS slots not working with Stencil JS components?

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?

Upvotes: 6

Views: 848

Answers (1)

Fabio Ribeiro de Carvalho
Fabio Ribeiro de Carvalho

Reputation: 790

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

Upvotes: 0

Related Questions