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

Time:09-24

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.

CodePudding user response:

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>
  • Related