[SOLVED] How do I use slots from a Vue2 webcomponent in Vue3?

How do I use slots from a Vue2 webcomponent in Vue3?

The component I am trying to use is written in Vue2 and is installed through NPM as a webcomponent. My new project is created in Vue3.

I'm trying to use a components slots, but it's not working.

When I try the following I get no errors, but nothing is rendered inside the slots of the webcomponent:

<my-webcomponent-with-two-slots>
  <main>
    <div>Hello World</div>
  </main>
  <sidebar>
    <div>Hello World</div>
  </sidebar>
</my-webcomponent-with-two-slots>

When I try the following I get an error: error 'slot' attributes are deprecated vue/no-deprecated-slot-attribute

<my-webcomponent-with-two-slots>
  <div slot="main">
    <div>Hello World</div>
  </div>
  <div slot="sidebar">
    <div>Hello World</div>
  </div>
</my-webcomponent-with-two-slots>

I cannot change or upgrade the webcomponent I want to use. How do I use it in my Vue3 project?

EDIT: I should clarify that the webcomponent is working using an older project written in Vue2, using the second example.

Solution

Vue is complaining about the older slot attribute that has been changed to v-slot. But you're not using vue slots, you're using WebComponent's native slot attribute. So you can safely disable this check in your .eslintrc.js file by adding

  rules: {
    'vue/no-deprecated-slot-attribute': 'off',
  }

to your rules to globally disable this rule.

Or if you'd like to disable it for a single line, add this before the line:

  <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
  <div slot="main">
    <div>Hello World</div>
  </div>
  <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
  <div slot="sidebar">
    <div>Hello World</div>
  </div>