javascript - ionic - `slot` attributes are deprecated - eslint-plugin-vue

Question

I am getting following error in VS Code:

[vue/no-deprecated-slot-attribute]
`slot` attributes are deprecated. eslint-plugin-vue

I have these two plugin installed in .eslintrc.js

  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],

And this in rules:

'vue/no-deprecated-slot-attribute': 'off',

What should be done in order to avoid this issue?

question from:https://stackoverflow.com/questions/65913547/ionic-slot-attributes-are-deprecated-eslint-plugin-vue

Answer 1

Deprecated slot

The linter rule page for vue/no-deprecated-slot-attribute shows the following sample code, which highlights the problem and solution:

<template>
  <ListComponent>
    <!-- ? GOOD ??-->
    <template v-slot:name>...</template>
  </ListComponent>
  <ListComponent>
    <!-- ? BAD  ??-->
    <template slot="name">...</template>
  </ListComponent>
</template>

So, <ion-refresher slot="fixed"> should be changed to <ion-refresher v-slot:fixed>. However, that causes a different error (vue/valid-v-slot) because Ionic components are built as native Web Components (not Vue components):

Named slots must use '<template>' on a custom element. (vue/valid-v-slot) eslint

To resolve that error, apply v-slot:fixed to a <template> wrapper:

<template v-slot:fixed>
  <ion-refresher>...</ion-refresher>
<template>

demo

Unused fixed

Regarding the 'fixed' is defined but never used error you commented, your <script> section in the SFC likely has an unused variable named fixed. Simply remove that variable to resolve the error.