3

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.

Amadeus Hein
  • 706
  • 1
  • 4
  • 12

1 Answers1

4

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>
Mythos
  • 1,378
  • 1
  • 8
  • 21
  • 1
    Hey! After I followed your advice I still had an error but after doing the following 'npm i eslint-loader@2.1.2' (found here https://github.com/vuejs/vue-cli/issues/4231) your solution works. Thanks a lot! – Amadeus Hein Sep 24 '21 at 08:56